{
  "html": "<section class='projects'><div class='projects__inner'><h2 class='projects__title'>Наши проекты</h2><div class='projects__grid'><a href='#' class='projects__card' data-tilt><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></div><div class='projects__icon'><svg width='48' height='48' viewBox='0 0 48 48' fill='none' xmlns='http://www.w3.org/2000/svg'><circle cx='24' cy='24' r='20' fill='#FF6B6B'/><circle cx='24' cy='24' r='12' fill='#FFD93D'/><circle cx='24' cy='24' r='6' fill='#6BCB77'/></svg></div><h3 class='projects__card-title'>Шоу воздушных шаров</h3><p class='projects__card-text'>Гигантские шары, фигуры и весёлые конкурсы для всех гостей.</p><div class='projects__reveal' aria-hidden='true'><span class='projects__reveal-text'>Подробнее →</span></div></a><a href='#' class='projects__card' data-tilt><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></div><div class='projects__icon'><svg width='48' height='48' viewBox='0 0 48 48' fill='none' xmlns='http://www.w3.org/2000/svg'><rect x='8' y='8' width='32' height='32' rx='8' fill='#4D96FF'/><circle cx='24' cy='24' r='8' fill='#FFD93D'/></svg></div><h3 class='projects__card-title'>Мыльное шоу</h3><p class='projects__card-text'>Огромные пузыри, в которых можно оказаться внутри!</p><div class='projects__reveal' aria-hidden='true'><span class='projects__reveal-text'>Подробнее →</span></div></a><a href='#' class='projects__card' data-tilt><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></div><div class='projects__icon'><svg width='48' height='48' viewBox='0 0 48 48' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M24 4L30 18H44L34 28L38 44L24 36L10 44L14 28L4 18H18L24 4Z' fill='#FFD93D'/><circle cx='24' cy='24' r='6' fill='#FF6B6B'/></svg></div><h3 class='projects__card-title'>Весёлые старты</h3><p class='projects__card-text'>Активные игры и эстафеты с призами и подарками.</p><div class='projects__reveal' aria-hidden='true'><span class='projects__reveal-text'>Подробнее →</span></div></a></div></div></section>",
  "css": ".projects .projects__card { position: relative; overflow: hidden; will-change: transform; transition: transform 0.3s ease-out, box-shadow 0.3s ease-out; } .projects .projects__card:hover { box-shadow: 0 20px 40px rgba(37, 99, 235, 0.18); } .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.22), transparent 55%); opacity: 0; transition: opacity 0.3s ease-out; pointer-events: none; } .projects .projects__card:hover::before { opacity: 1; } .projects .projects__particles { position: absolute; inset: 0; pointer-events: none; overflow: hidden; } .projects .projects__particle { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: #60a5fa; opacity: 0; bottom: 20%; left: 50%; } .projects .projects__particle:nth-child(1) { left: 15%; background: #3b82f6; } .projects .projects__particle:nth-child(2) { left: 32%; background: #93c5fd; width: 4px; height: 4px; } .projects .projects__particle:nth-child(3) { left: 50%; background: #2563eb; width: 8px; height: 8px; } .projects .projects__particle:nth-child(4) { left: 68%; background: #bfdbfe; width: 5px; height: 5px; } .projects .projects__particle:nth-child(5) { left: 82%; background: #60a5fa; } .projects .projects__particle:nth-child(6) { left: 42%; background: #dbeafe; width: 3px; height: 3px; } .projects .projects__card:hover .projects__particle { animation: projects-float 0.9s ease-out forwards; } .projects .projects__card:hover .projects__particle:nth-child(1) { animation-delay: 0s; } .projects .projects__card:hover .projects__particle:nth-child(2) { animation-delay: 0.08s; } .projects .projects__card:hover .projects__particle:nth-child(3) { animation-delay: 0.16s; } .projects .projects__card:hover .projects__particle:nth-child(4) { animation-delay: 0.24s; } .projects .projects__card:hover .projects__particle:nth-child(5) { animation-delay: 0.32s; } .projects .projects__card:hover .projects__particle:nth-child(6) { animation-delay: 0.4s; } .projects .projects__reveal { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: flex-start; padding: 24px 32px; background: linear-gradient(180deg, transparent 40%, rgba(37, 99, 235, 0.92) 100%); clip-path: circle(0% at 50% 100%); transition: clip-path 0.45s ease-out; pointer-events: none; } .projects .projects__card:hover .projects__reveal { clip-path: circle(140% at 50% 100%); } .projects .projects__reveal-text { color: #ffffff; font-weight: 600; font-size: 16px; letter-spacing: 0.02em; transform: translateY(8px); opacity: 0; transition: transform 0.35s ease-out 0.1s, opacity 0.35s ease-out 0.1s; } .projects .projects__card:hover .projects__reveal-text { transform: translateY(0); opacity: 1; } .projects .projects__icon { transition: transform 0.3s ease-out; } .projects .projects__card:hover .projects__icon { transform: scale(1.08) rotate(-4deg); } @keyframes projects-float { 0% { opacity: 0; transform: translate(0, 0) scale(0.6); } 20% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--dx, 20px), -120px) scale(1.1); } } .projects .projects__particle:nth-child(1) { --dx: -30px; } .projects .projects__particle:nth-child(2) { --dx: -10px; } .projects .projects__particle:nth-child(3) { --dx: 5px; } .projects .projects__particle:nth-child(4) { --dx: 25px; } .projects .projects__particle:nth-child(5) { --dx: 40px; } .projects .projects__particle:nth-child(6) { --dx: -20px; }"
}