{
  "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 class='hero__progress' aria-hidden='true'><span class='hero__progress-bar'></span></div><a class='hero__cta' href='#catalog'>Смотреть каталог</a></div></section>",
  "css": ".hero .hero__progress { position: relative; width: 100%; max-width: 420px; height: 6px; margin: 32px auto 28px; background: #e0ecff; border-radius: 999px; overflow: hidden; box-shadow: inset 0 1px 2px rgba(37, 99, 235, 0.12); } .hero .hero__progress-bar { display: block; height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, #60a5fa 0%, #3b82f6 50%, #2563eb 100%); animation: hero-progress-fill 2.4s cubic-bezier(0.22, 1, 0.36, 1) 0.3s forwards; } .hero .hero__cta { position: relative; display: inline-block; padding: 14px 34px; font-size: 16px; font-weight: 600; letter-spacing: 0.01em; color: #ffffff; text-decoration: none; background: #2563eb; border-radius: 999px; overflow: hidden; isolation: isolate; box-shadow: 0 8px 22px rgba(37, 99, 235, 0.28); animation: hero-pulse-ring 4s ease-in-out infinite; transition: transform 0.25s ease, box-shadow 0.25s ease; } .hero .hero__cta::before { content: ''; position: absolute; inset: 0; z-index: -1; width: 0; background: linear-gradient(90deg, #3b82f6 0%, #60a5fa 100%); transition: width 0.45s cubic-bezier(0.22, 1, 0.36, 1); } .hero .hero__cta:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(37, 99, 235, 0.36); } .hero .hero__cta:hover::before { width: 100%; } .hero .hero__cta:focus-visible { outline: 3px solid #60a5fa; outline-offset: 3px; } @keyframes hero-progress-fill { 0% { width: 0; } 60% { width: 78%; } 100% { width: 100%; } } @keyframes hero-pulse-ring { 0% { box-shadow: 0 8px 22px rgba(37, 99, 235, 0.28), 0 0 0 0 rgba(59, 130, 246, 0.45); } 50% { box-shadow: 0 8px 22px rgba(37, 99, 235, 0.28), 0 0 0 12px rgba(59, 130, 246, 0); } 100% { box-shadow: 0 8px 22px rgba(37, 99, 235, 0.28), 0 0 0 0 rgba(59, 130, 246, 0); } } @media (prefers-reduced-motion: reduce) { .hero .hero__progress-bar { animation: none; width: 100%; } .hero .hero__cta { animation: none; } .hero .hero__cta::before { transition: none; } }"
}