{
  "html": "<section class='projects'><div class='projects__bg-chess'></div><div class='projects__blob projects__blob--1'></div><div class='projects__blob projects__blob--2'></div><div class='projects__blob projects__blob--3'></div><div class='projects__inner'><h2 class='projects__title'><span class='projects__title-shine'>Мои проекты</span></h2><div class='projects__grid'><a href='#' class='projects__card'><div class='projects__icon'><svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='2' y='2' width='20' height='20' rx='2.18' ry='2.18'/><line x1='7' y1='2' x2='7' y2='22'/><line x1='17' y1='2' x2='17' y2='22'/><line x1='2' y1='12' x2='22' y2='12'/><line x1='2' y1='7' x2='7' y2='7'/><line x1='2' y1='17' x2='7' y2='17'/><line x1='17' y1='17' x2='22' y2='17'/><line x1='17' y1='7' x2='22' y2='7'/></svg></div><h3 class='projects__card-title'>Классика кино</h3><p class='projects__card-text'>Подборка культовых фильмов прошлого века с описанием сюжета и актёрского состава.</p></a><a href='#' class='projects__card'><div class='projects__icon'><svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polygon points='12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2'/></svg></div><h3 class='projects__card-title'>Новинки проката</h3><p class='projects__card-text'>Свежие релизы и премьеры с рейтингами и краткими обзорами.</p></a><a href='#' class='projects__card'><div class='projects__icon'><svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><polygon points='10 8 16 12 10 16 10 8'/></svg></div><h3 class='projects__card-title'>Жанровые подборки</h3><p class='projects__card-text'>Фильмы по жанрам: драмы, комедии, триллеры, фантастика и другие.</p></a></div></div></section>",
  "css": ".projects { position: relative; overflow: hidden; isolation: isolate; } .projects .projects__bg-chess { position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: repeating-conic-gradient(from 0deg, rgba(56, 189, 248, 0.10) 0deg 90deg, rgba(251, 146, 60, 0.10) 90deg 180deg); background-size: 64px 64px; -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%); mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%); animation: projects-chess-shift 24s linear infinite; } .projects .projects__blob { position: absolute; z-index: 0; pointer-events: none; border-radius: 50%; filter: blur(60px); opacity: 0.55; will-change: transform; } .projects .projects__blob--1 { width: 380px; height: 380px; top: -80px; left: -60px; background: radial-gradient(circle at 30% 30%, #38bdf8, transparent 70%); animation: projects-blob-move-1 18s ease-in-out infinite; } .projects .projects__blob--2 { width: 420px; height: 420px; bottom: -120px; right: -80px; background: radial-gradient(circle at 70% 70%, #fb923c, transparent 70%); animation: projects-blob-move-2 22s ease-in-out infinite; } .projects .projects__blob--3 { width: 320px; height: 320px; top: 40%; left: 55%; background: radial-gradient(circle at 50% 50%, #34d399, transparent 70%); animation: projects-blob-move-3 26s ease-in-out infinite; } .projects .projects__inner { position: relative; z-index: 1; } .projects .projects__title { position: relative; } .projects .projects__title-shine { display: inline-block; background: linear-gradient(100deg, #0ea5e9 0%, #22c55e 25%, #f59e0b 50%, #ef4444 75%, #0ea5e9 100%); background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; animation: projects-shine 6s linear infinite; } .projects .projects__title-shine--reverse { animation-direction: reverse; } .projects .projects__card { position: relative; overflow: hidden; } .projects .projects__card::before { content: ''; position: absolute; inset: 0; z-index: 0; background: linear-gradient(135deg, rgba(56, 189, 248, 0.10), rgba(251, 146, 60, 0.10) 50%, rgba(52, 211, 153, 0.10)); opacity: 0; transition: opacity 0.3s ease; pointer-events: none; } .projects .projects__card:hover::before { opacity: 1; } .projects .projects__card > * { position: relative; z-index: 1; } .projects .projects__card-title, .projects .projects__card-text { clip-path: inset(0 0 0 0); } .projects .projects__card:hover .projects__card-title { animation: projects-reveal-text 0.6s ease forwards; } .projects .projects__card:hover .projects__card-text { animation: projects-reveal-text 0.6s ease 0.08s forwards; } @keyframes projects-chess-shift { 0% { background-position: 0 0; } 100% { background-position: 64px 64px; } } @keyframes projects-blob-move-1 { 0%, 100% { transform: translate(0, 0) scale(1); } 33% { transform: translate(60px, 40px) scale(1.15); } 66% { transform: translate(20px, 90px) scale(0.9); } } @keyframes projects-blob-move-2 { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-70px, -50px) scale(1.2); } } @keyframes projects-blob-move-3 { 0%, 100% { transform: translate(0, 0) scale(1); } 40% { transform: translate(-50px, 60px) scale(1.1); } 70% { transform: translate(40px, -30px) scale(0.95); } } @keyframes projects-shine { 0% { background-position: 0% 50%; } 100% { background-position: 250% 50%; } } @keyframes projects-reveal-text { 0% { clip-path: inset(0 100% 0 0); } 100% { clip-path: inset(0 0 0 0); } }"
}