{
  "html": "<section class='hero'><div class='hero__bg' aria-hidden='true'><span class='hero__blob hero__blob--1'></span><span class='hero__blob hero__blob--2'></span><span class='hero__blob hero__blob--3'></span></div><div class='hero__inner'><p class='hero__eyebrow'>Праздник для детей</p><h1 class='hero__title' data-text='Весёлые шарики'>Весёлые шарики</h1><p class='hero__subtitle'>Организация детских праздников</p><p class='hero__lead'>Воздушные шары, мыльные пузыри, игры и смех — мы создаём праздник, который запомнится надолго!</p></div></section>",
  "css": ".hero { position: relative; overflow: hidden; isolation: isolate; } .hero .hero__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; } .hero .hero__blob { position: absolute; display: block; border-radius: 50%; filter: blur(60px); opacity: 0.55; will-change: transform; } .hero .hero__blob--1 { width: 420px; height: 420px; top: -120px; left: -100px; background: radial-gradient(circle at 30% 30%, #60a5fa 0%, rgba(96,165,250,0) 70%); animation: hero-blob-float-1 14s ease-in-out infinite; } .hero .hero__blob--2 { width: 360px; height: 360px; bottom: -140px; right: -80px; background: radial-gradient(circle at 60% 40%, #3b82f6 0%, rgba(59,130,246,0) 70%); animation: hero-blob-float-2 18s ease-in-out infinite; } .hero .hero__blob--3 { width: 300px; height: 300px; top: 40%; left: 55%; background: radial-gradient(circle at 50% 50%, #dbeafe 0%, rgba(219,234,254,0) 70%); animation: hero-blob-float-3 22s ease-in-out infinite; animation-delay: 0.2s; } .hero .hero__inner { position: relative; z-index: 1; } .hero .hero__title { position: relative; text-shadow: -2px 0 rgba(37,99,235,0.55), 2px 0 rgba(96,165,250,0.55); animation: hero-chroma-shift 6s ease-in-out infinite; } .hero .hero__title::after { content: attr(data-text); position: absolute; inset: 0; color: transparent; background: linear-gradient(90deg, #2563eb 0%, #3b82f6 50%, #60a5fa 100%); -webkit-background-clip: text; background-clip: text; clip-path: inset(0 100% 0 0); transition: clip-path 0.8s cubic-bezier(0.65, 0, 0.35, 1); pointer-events: none; } .hero .hero__title:hover::after { clip-path: inset(0 0 0 0); } .hero .hero__eyebrow { display: inline-block; padding: 6px 16px; border-radius: 999px; background: rgba(37,99,235,0.08); box-shadow: 0 0 0 0 rgba(59,130,246,0.45); animation: hero-glow-pulse 3s ease-in-out infinite; animation-delay: 0.2s; } .hero:focus-within .hero__blob { animation-play-state: paused; opacity: 0.85; filter: blur(40px); } @keyframes hero-blob-float-1 { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(60px, 40px) scale(1.15); } } @keyframes hero-blob-float-2 { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-50px, -30px) scale(1.2); } } @keyframes hero-blob-float-3 { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-40px, 50px) scale(1.1); } } @keyframes hero-chroma-shift { 0%, 100% { text-shadow: -2px 0 rgba(37,99,235,0.55), 2px 0 rgba(96,165,250,0.55); } 50% { text-shadow: -3px 0 rgba(37,99,235,0.7), 3px 0 rgba(96,165,250,0.7); } } @keyframes hero-glow-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(59,130,246,0.45); transform: scale(1); } 50% { box-shadow: 0 0 24px 6px rgba(59,130,246,0.35); transform: scale(1.04); } }"
}