{
  "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><span class='hero__particle hero__particle--1'></span><span class='hero__particle hero__particle--2'></span><span class='hero__particle hero__particle--3'></span><span class='hero__particle hero__particle--4'></span><span class='hero__particle hero__particle--5'></span><span class='hero__particle hero__particle--6'></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; overflow: hidden; border-radius: inherit; } .hero .hero__inner { position: relative; z-index: 1; } .hero .hero__blob { position: absolute; border-radius: 50%; filter: blur(40px); opacity: 0.55; will-change: transform; } .hero .hero__blob--1 { width: 340px; height: 340px; top: -120px; left: -80px; background: radial-gradient(circle at 30% 30%, #60a5fa, rgba(96, 165, 250, 0) 70%); animation: hero-blob-float-1 14s ease-in-out infinite; } .hero .hero__blob--2 { width: 300px; height: 300px; bottom: -140px; right: -60px; background: radial-gradient(circle at 70% 70%, #a78bfa, rgba(167, 139, 250, 0) 70%); animation: hero-blob-float-2 18s ease-in-out infinite; } .hero .hero__blob--3 { width: 260px; height: 260px; top: 40%; left: 55%; background: radial-gradient(circle at 50% 50%, #34d399, rgba(52, 211, 153, 0) 70%); animation: hero-blob-float-3 16s ease-in-out infinite; } .hero .hero__particle { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: #2563eb; box-shadow: 0 0 12px rgba(37, 99, 235, 0.8); opacity: 0.7; will-change: transform, opacity; } .hero .hero__particle--1 { top: 20%; left: 10%; animation: hero-particle-rise 9s linear infinite; } .hero .hero__particle--2 { top: 70%; left: 25%; width: 6px; height: 6px; animation: hero-particle-rise 11s linear infinite 1.5s; } .hero .hero__particle--3 { top: 40%; left: 80%; width: 10px; height: 10px; background: #a78bfa; box-shadow: 0 0 14px rgba(167, 139, 250, 0.8); animation: hero-particle-rise 13s linear infinite 3s; } .hero .hero__particle--4 { top: 85%; left: 65%; animation: hero-particle-rise 10s linear infinite 0.8s; } .hero .hero__particle--5 { top: 15%; left: 55%; width: 5px; height: 5px; background: #34d399; box-shadow: 0 0 10px rgba(52, 211, 153, 0.8); animation: hero-particle-rise 12s linear infinite 2.2s; } .hero .hero__particle--6 { top: 60%; left: 90%; width: 7px; height: 7px; animation: hero-particle-rise 8s linear infinite 4s; } .hero .hero__eyebrow { display: inline-block; padding: 6px 14px; border-radius: 999px; background: rgba(255, 255, 255, 0.6); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 4px 18px rgba(37, 99, 235, 0.15); animation: hero-pulse-glow 3s ease-in-out infinite; } .hero .hero__title { background: linear-gradient(90deg, #1e293b 0%, #2563eb 50%, #1e293b 100%); background-size: 200% auto; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: hero-title-shine 6s linear infinite; } .hero .hero__subtitle { display: inline-block; transition: transform 0.4s ease, text-shadow 0.4s ease; } .hero .hero__subtitle:hover { transform: perspective(600px) rotateX(8deg) rotateY(-8deg) scale(1.05); text-shadow: 0 8px 24px rgba(59, 130, 246, 0.35); } .hero .hero__lead { transition: transform 0.4s ease; } .hero .hero__lead:hover { transform: perspective(800px) rotateX(4deg) translateY(-2px); } @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(0.9); } } @keyframes hero-particle-rise { 0% { transform: translateY(0) translateX(0); opacity: 0; } 10% { opacity: 0.8; } 50% { transform: translateY(-120px) translateX(20px); opacity: 0.9; } 90% { opacity: 0.2; } 100% { transform: translateY(-240px) translateX(-10px); opacity: 0; } } @keyframes hero-pulse-glow { 0%, 100% { box-shadow: 0 4px 18px rgba(37, 99, 235, 0.15); } 50% { box-shadow: 0 4px 28px rgba(37, 99, 235, 0.45); } } @keyframes hero-title-shine { 0% { background-position: 0% center; } 100% { background-position: 200% center; } }"
}