{
  "html": "<section class='hero'><div class='hero__bg'><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__particles'><span class='hero__particle' style='left:10%;animation-delay:0s'></span><span class='hero__particle' style='left:25%;animation-delay:1.2s'></span><span class='hero__particle' style='left:40%;animation-delay:2.4s'></span><span class='hero__particle' style='left:55%;animation-delay:0.6s'></span><span class='hero__particle' style='left:70%;animation-delay:1.8s'></span><span class='hero__particle' style='left:85%;animation-delay:3s'></span><span class='hero__particle' style='left:95%;animation-delay:0.9s'></span></div><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; isolation: isolate; } .hero .hero__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; } .hero .hero__blob { position: absolute; border-radius: 50%; filter: blur(60px); opacity: 0.55; will-change: transform; } .hero .hero__blob--1 { width: 420px; height: 420px; top: -120px; left: -80px; background: radial-gradient(circle at 30% 30%, #60a5fa, #2563eb 60%, transparent 70%); animation: hero-float 14s ease-in-out infinite; } .hero .hero__blob--2 { width: 360px; height: 360px; bottom: -140px; right: -60px; background: radial-gradient(circle at 70% 30%, #a78bfa, #7c3aed 60%, transparent 70%); animation: hero-float 18s ease-in-out infinite reverse; } .hero .hero__blob--3 { width: 300px; height: 300px; top: 40%; left: 55%; background: radial-gradient(circle at 50% 50%, #34d399, #059669 60%, transparent 70%); animation: hero-float 22s ease-in-out infinite; } .hero .hero__particles { position: absolute; inset: 0; z-index: 1; pointer-events: none; } .hero .hero__particle { position: absolute; bottom: -10px; width: 8px; height: 8px; border-radius: 50%; background: #2563eb; box-shadow: 0 0 12px 2px rgba(37, 99, 235, 0.6); animation: hero-rise 8s linear infinite; } .hero .hero__inner { position: relative; z-index: 2; } .hero .hero__eyebrow { display: inline-block; padding: 6px 14px; border-radius: 999px; background: rgba(37, 99, 235, 0.08); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(37, 99, 235, 0.18); animation: hero-pulse 3s ease-in-out infinite; } .hero .hero__title { background: linear-gradient(90deg, #1e293b 0%, #2563eb 50%, #7c3aed 100%); background-size: 200% auto; -webkit-background-clip: text; background-clip: text; color: transparent; animation: hero-shine 6s linear infinite; } .hero .hero__subtitle { transition: transform 0.4s ease, color 0.4s ease; } .hero .hero__subtitle:hover { transform: perspective(600px) rotateX(8deg) translateY(-2px); color: #2563eb; } .hero .hero__lead { transition: transform 0.4s ease; } .hero .hero__lead:hover { transform: perspective(600px) rotateX(4deg); } @keyframes hero-float { 0%, 100% { transform: translate(0, 0) scale(1); } 33% { transform: translate(40px, -30px) scale(1.08); } 66% { transform: translate(-30px, 25px) scale(0.95); } } @keyframes hero-rise { 0% { transform: translateY(0) scale(0.6); opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { transform: translateY(-110vh) scale(1.1); opacity: 0; } } @keyframes hero-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.35); } 50% { box-shadow: 0 0 0 10px rgba(37, 99, 235, 0); } } @keyframes hero-shine { 0% { background-position: 0% center; } 100% { background-position: 200% center; } }"
}