{
  "html": "<section class='hero'><div class='hero__inner'><p class='hero__eyebrow'>Танцевальная студия</p><h1 class='hero__title'><span class='hero__title-text'>Ритм и Пластика</span></h1><p class='hero__subtitle'>Студия современного танца</p><p class='hero__lead'>Мы создаём пространство, где каждый может раскрыть свой потенциал через движение. Профессиональные педагоги, уютные залы и атмосфера вдохновения.</p></div></section>",
  "css": ".hero { animation: hero-breathe 4s ease-in-out infinite; }\n.hero .hero__title { position: relative; display: inline-block; }\n.hero .hero__title-text { display: inline-block; transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); }\n.hero .hero__title:hover .hero__title-text { transform: skewX(-6deg) rotate(-1.5deg); }\n.hero .hero__title::after { content: ''; position: absolute; left: 0; right: 0; bottom: -14px; height: 6px; border-radius: 999px; background: linear-gradient(90deg, #a78bfa, #7c3aed, #a78bfa); background-size: 200% 100%; transform-origin: left center; animation: hero-wave 2.6s cubic-bezier(0.34, 1.56, 0.64, 1) infinite; }\n.hero .hero__eyebrow { transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); }\n.hero .hero__eyebrow:hover { transform: skewX(-8deg) rotate(-2deg); }\n@keyframes hero-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.01); } }\n@keyframes hero-wave { 0% { transform: scaleX(0.35) translateY(0); background-position: 0% 50%; opacity: 0.7; } 50% { transform: scaleX(1) translateY(-2px); background-position: 100% 50%; opacity: 1; } 100% { transform: scaleX(0.35) translateY(0); background-position: 0% 50%; opacity: 0.7; } }\n@media (prefers-reduced-motion: reduce) { .hero { animation: none; } .hero .hero__title::after { animation: none; } .hero .hero__title-text, .hero .hero__eyebrow { transition: none; } }"
}