{
  "html": "<section class='projects'><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 width='32' height='32' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><rect x='2' y='4' width='20' height='16' rx='3'/><path d='M8 4v16M16 4v16M2 12h20'/></svg></div><h3 class='projects__card-title'>Новостной блок</h3><p class='projects__card-text'>Ежедневные выпуски новостей с оперативной съёмкой и прямыми включениями.</p><span class='projects__ripple'></span></a><a href='#' class='projects__card'><div class='projects__icon'><svg width='32' height='32' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.8' 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><span class='projects__ripple'></span></a><a href='#' class='projects__card'><div class='projects__icon'><svg width='32' height='32' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M12 2L2 7l10 5 10-5-10-5z'/><path d='M2 17l10 5 10-5'/><path d='M2 12l10 5 10-5'/></svg></div><h3 class='projects__card-title'>Рекламные ролики</h3><p class='projects__card-text'>Креативные видео для брендов — от концепции до постпродакшена.</p><span class='projects__ripple'></span></a><a href='#' class='projects__card'><div class='projects__icon'><svg width='32' height='32' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'/><circle cx='9' cy='7' r='4'/><path d='M23 21v-2a4 4 0 0 0-3-3.87'/><path d='M16 3.13a4 4 0 0 1 0 7.75'/></svg></div><h3 class='projects__card-title'>Ток-шоу</h3><p class='projects__card-text'>Студийные программы с гостями, дискуссиями и живой аудиторией.</p><span class='projects__ripple'></span></a></div><div class='projects__particles' aria-hidden='true'><span class='projects__particle'></span><span class='projects__particle'></span><span class='projects__particle'></span><span class='projects__particle'></span><span class='projects__particle'></span><span class='projects__particle'></span><span class='projects__particle'></span><span class='projects__particle'></span></div></div></section>",
  "css": ".projects { position: relative; overflow: hidden; background: linear-gradient(180deg, #ffffff 0%, #f0f7ff 100%); } .projects .projects__inner { position: relative; z-index: 2; } .projects .projects__title-shine { display: inline-block; background: linear-gradient(90deg, #2563eb 0%, #60a5fa 25%, #ffffff 50%, #60a5fa 75%, #2563eb 100%); background-size: 200% auto; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; animation: projects-shine 4s linear infinite; } @keyframes projects-shine { 0% { background-position: 0% center; } 100% { background-position: 200% center; } } .projects .projects__card { position: relative; overflow: hidden; will-change: transform; transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; } .projects .projects__card:hover { border-color: #bfdbfe; box-shadow: 0 24px 48px -16px rgba(37, 99, 235, 0.25); } .projects .projects__card::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(96, 165, 250, 0.18), transparent 60%); opacity: 0; transition: opacity 0.3s ease; pointer-events: none; } .projects .projects__card:hover::before { opacity: 1; } .projects .projects__icon { transition: transform 0.3s ease, background 0.3s ease, color 0.3s ease; } .projects .projects__card:hover .projects__icon { transform: scale(1.08) rotate(-4deg); background: #dbeafe; color: #2563eb; } .projects .projects__ripple { position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; border-radius: 50%; background: radial-gradient(circle, rgba(59, 130, 246, 0.45) 0%, rgba(59, 130, 246, 0) 70%); transform: translate(-50%, -50%) scale(0); opacity: 0; pointer-events: none; } .projects .projects__card:hover .projects__ripple { animation: projects-ripple 1.2s ease-out infinite; } @keyframes projects-ripple { 0% { transform: translate(-50%, -50%) scale(0); opacity: 0.9; } 100% { transform: translate(-50%, -50%) scale(30); opacity: 0; } } .projects .projects__particles { position: absolute; inset: 0; pointer-events: none; z-index: 1; } .projects .projects__particle { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: radial-gradient(circle, #60a5fa 0%, rgba(96, 165, 250, 0) 70%); opacity: 0.7; animation: projects-float 12s ease-in-out infinite; } .projects .projects__particle:nth-child(1) { left: 8%; top: 20%; animation-delay: 0s; animation-duration: 11s; } .projects .projects__particle:nth-child(2) { left: 22%; top: 70%; animation-delay: 1.5s; animation-duration: 14s; width: 6px; height: 6px; } .projects .projects__particle:nth-child(3) { left: 38%; top: 35%; animation-delay: 3s; animation-duration: 10s; } .projects .projects__particle:nth-child(4) { left: 55%; top: 80%; animation-delay: 0.8s; animation-duration: 13s; width: 10px; height: 10px; } .projects .projects__particle:nth-child(5) { left: 68%; top: 15%; animation-delay: 2.2s; animation-duration: 12s; } .projects .projects__particle:nth-child(6) { left: 82%; top: 60%; animation-delay: 4s; animation-duration: 15s; width: 6px; height: 6px; } .projects .projects__particle:nth-child(7) { left: 92%; top: 30%; animation-delay: 1s; animation-duration: 11s; } .projects .projects__particle:nth-child(8) { left: 48%; top: 10%; animation-delay: 3.5s; animation-duration: 13s; width: 7px; height: 7px; } @keyframes projects-float { 0% { transform: translate(0, 0) scale(1); opacity: 0.3; } 25% { transform: translate(20px, -30px) scale(1.2); opacity: 0.8; } 50% { transform: translate(-15px, -60px) scale(0.9); opacity: 0.5; } 75% { transform: translate(25px, -90px) scale(1.1); opacity: 0.7; } 100% { transform: translate(0, -120px) scale(1); opacity: 0; } }"
}