{
  "html": "<section class='hero'><div class='hero__inner'><p class='hero__eyebrow'>Праздник для детей</p><h1 class='hero__title'>Весёлые шарики</h1><p class='hero__subtitle'>Организация детских праздников</p><p class='hero__lead'>Создаём незабываемые эмоции: аниматоры, шоу мыльных пузырей, аквагрим и, конечно, море воздушных шаров!</p></div></section>",
  "css": ".hero .hero__title { 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: hero-shine 4s linear infinite; } .hero .hero__subtitle { position: relative; display: inline-block; } .hero .hero__subtitle::after { content: ''; position: absolute; left: 0; right: 0; bottom: -6px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, #2563eb, #60a5fa, #2563eb); background-size: 200% 100%; animation: hero-wave 2.5s ease-in-out infinite; } .hero .hero__inner { position: relative; } .hero .hero__inner::before { content: ''; position: absolute; inset: -24px; border-radius: 40px; padding: 2px; background: linear-gradient(135deg, #2563eb, #60a5fa, #ffffff, #3b82f6); background-size: 300% 300%; -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: hero-border 6s ease infinite; pointer-events: none; } .hero .hero__inner::after { content: ''; position: absolute; inset: 0; border-radius: 32px; background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.7) 50%, transparent 70%); background-size: 250% 100%; background-position: 200% 0; opacity: 0; transition: opacity 0.4s ease; pointer-events: none; } .hero .hero__inner:hover::after { opacity: 1; animation: hero-glint 1.2s ease forwards; } @keyframes hero-shine { 0% { background-position: 0% center; } 100% { background-position: 200% center; } } @keyframes hero-wave { 0%, 100% { background-position: 0% 50%; transform: scaleX(0.9); } 50% { background-position: 100% 50%; transform: scaleX(1); } } @keyframes hero-border { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } @keyframes hero-glint { 0% { background-position: 200% 0; } 100% { background-position: -50% 0; } }"
}