{
  "html": "<section class='projects'><div class='projects__inner'><h2 class='projects__title'>Наши направления</h2><div class='projects__grid'><a href='#' class='projects__card projects__card--tilt'><div class='projects__icon projects__icon--glow'><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 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3z'/><path d='M19 10v2a7 7 0 0 1-14 0v-2'/><line x1='12' y1='19' x2='12' y2='22'/></svg></div><h3 class='projects__card-title'>Современная хореография</h3><p class='projects__card-text'>Контемпорари, модерн и импровизация — учимся говорить телом и находить свой стиль.</p><span class='projects__particle projects__particle--1'></span><span class='projects__particle projects__particle--2'></span><span class='projects__particle projects__particle--3'></span></a><a href='#' class='projects__card projects__card--tilt projects__card--reverse'><div class='projects__icon projects__icon--glow'><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'/><path d='M8 14s1.5 2 4 2 4-2 4-2'/><line x1='9' y1='9' x2='9.01' y2='9'/><line x1='15' y1='9' x2='15.01' y2='9'/></svg></div><h3 class='projects__card-title'>Хип-хоп и street</h3><p class='projects__card-text'>Энергия улиц, грув и баттлы. Для тех, кто хочет двигаться смело и свободно.</p><span class='projects__particle projects__particle--1'></span><span class='projects__particle projects__particle--2'></span><span class='projects__particle projects__particle--3'></span></a><a href='#' class='projects__card projects__card--tilt'><div class='projects__icon projects__icon--glow'><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.4 7.4H22l-6.2 4.5 2.4 7.4L12 16.8l-6.2 4.5 2.4-7.4L2 9.4h7.6z'/></svg></div><h3 class='projects__card-title'>Классика и балет</h3><p class='projects__card-text'>Основа основ: осанка, выворотность и грация. База для любого танцевального стиля.</p><span class='projects__particle projects__particle--1'></span><span class='projects__particle projects__particle--2'></span><span class='projects__particle projects__particle--3'></span></a><a href='#' class='projects__card projects__card--tilt projects__card--reverse'><div class='projects__icon projects__icon--glow'><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__particle projects__particle--1'></span><span class='projects__particle projects__particle--2'></span><span class='projects__particle projects__particle--3'></span></a></div></div></section>",
  "css": ".projects .projects__card--tilt { perspective: 900px; transform-style: preserve-3d; will-change: transform; transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease, background 0.35s ease; } .projects .projects__card--tilt:hover { transform: perspective(900px) rotateX(6deg) rotateY(-8deg) translateY(-6px) scale(1.02); box-shadow: 0 30px 60px -25px rgba(109, 40, 217, 0.35), 0 0 0 1px rgba(109, 40, 217, 0.08); } .projects .projects__card--tilt.projects__card--reverse:hover { transform: perspective(900px) rotateX(-6deg) rotateY(8deg) translateY(-6px) scale(1.02); } .projects .projects__card--tilt .projects__icon { transform: translateZ(30px); transition: transform 0.35s ease; } .projects .projects__card--tilt:hover .projects__icon { transform: translateZ(50px) scale(1.05); } .projects .projects__card--tilt .projects__card-title, .projects .projects__card--tilt .projects__card-text { transform: translateZ(20px); } .projects .projects__icon--glow { position: relative; transition: box-shadow 0.4s ease, transform 0.4s ease; } .projects .projects__icon--glow::after { content: ''; position: absolute; inset: -6px; border-radius: 22px; background: radial-gradient(circle at 50% 50%, rgba(139, 92, 246, 0.35), rgba(139, 92, 246, 0) 70%); opacity: 0; transition: opacity 0.4s ease; pointer-events: none; } .projects .projects__card:hover .projects__icon--glow { box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.12), 0 12px 30px -8px rgba(109, 40, 217, 0.45); transform: scale(1.08); } .projects .projects__card:hover .projects__icon--glow::after { opacity: 1; } .projects .projects__card { position: relative; overflow: hidden; } .projects .projects__particle { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: linear-gradient(135deg, #a78bfa, #818cf8); opacity: 0; pointer-events: none; } .projects .projects__particle--1 { top: 20%; left: 15%; animation: projects-float-fast 0.3s ease-out infinite alternate; } .projects .projects__particle--2 { top: 60%; right: 20%; width: 4px; height: 4px; animation: projects-float-fast 0.3s ease-out 0.1s infinite alternate; } .projects .projects__particle--3 { bottom: 25%; left: 40%; width: 5px; height: 5px; animation: projects-float-fast 0.3s ease-out 0.2s infinite alternate; } .projects .projects__card:hover .projects__particle { opacity: 1; } @keyframes projects-float-fast { 0% { transform: translateY(0) translateX(0); opacity: 0.4; } 100% { transform: translateY(-18px) translateX(6px); opacity: 1; } }"
}