{
  "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 { position: relative; overflow: hidden; animation: hero-breathe 6s ease-in-out infinite alternate-reverse; } .hero::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(37, 99, 235, 0.06) 0%, rgba(96, 165, 250, 0.04) 50%, rgba(255, 255, 255, 0) 100%); pointer-events: none; animation: hero-bg-shift linear both; animation-timeline: scroll(root); } .hero .hero__inner { position: relative; z-index: 1; } .hero .hero__title { position: relative; display: inline-block; } .hero .hero__title::after { content: ''; position: absolute; inset: -8px -16px; border-radius: 16px; background: linear-gradient(120deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0.85) 50%, rgba(255, 255, 255, 0) 70%); background-size: 250% 100%; background-position: 200% 0; pointer-events: none; animation: hero-shine 4s ease-out infinite; } .hero .hero__eyebrow { display: inline-block; padding: 6px 14px; border-radius: 999px; background: rgba(255, 255, 255, 0.6); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid rgba(37, 99, 235, 0.15); animation: hero-pulse-ring 2.4s ease-out infinite; } @keyframes hero-breathe { 0% { transform: scale(1); } 100% { transform: scale(1.01); } } @keyframes hero-bg-shift { 0% { transform: translateY(0); } 100% { transform: translateY(-40px); } } @keyframes hero-shine { 0% { background-position: 200% 0; } 60% { background-position: -100% 0; } 100% { background-position: -100% 0; } } @keyframes hero-pulse-ring { 0% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.35); } 70% { box-shadow: 0 0 0 12px rgba(37, 99, 235, 0); } 100% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0); } }"
}