{
  "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:8%;animation-delay:0s'></span><span class='hero__particle' style='left:22%;animation-delay:1.2s'></span><span class='hero__particle' style='left:38%;animation-delay:2.4s'></span><span class='hero__particle' style='left:54%;animation-delay:0.6s'></span><span class='hero__particle' style='left:70%;animation-delay:1.8s'></span><span class='hero__particle' style='left:86%;animation-delay:3s'></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%, #4f6ef7 0%, rgba(79,110,247,0) 70%); animation: hero-blob-float 14s ease-in-out infinite; } .hero .hero__blob--2 { width: 360px; height: 360px; bottom: -140px; right: -60px; background: radial-gradient(circle at 70% 70%, #a855f7 0%, rgba(168,85,247,0) 70%); animation: hero-blob-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%, #22d3ee 0%, rgba(34,211,238,0) 70%); animation: hero-blob-float 22s ease-in-out infinite; } .hero .hero__particles { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; } .hero .hero__particle { position: absolute; bottom: -20px; width: 10px; height: 10px; border-radius: 50%; background: radial-gradient(circle at 30% 30%, #ffffff, #4f6ef7); box-shadow: 0 0 12px rgba(79,110,247,0.8); opacity: 0; animation: hero-particle-rise 8s linear infinite; } .hero .hero__particle:nth-child(2n) { width: 6px; height: 6px; background: radial-gradient(circle at 30% 30%, #ffffff, #a855f7); box-shadow: 0 0 10px rgba(168,85,247,0.8); } .hero .hero__particle:nth-child(3n) { width: 14px; height: 14px; background: radial-gradient(circle at 30% 30%, #ffffff, #22d3ee); box-shadow: 0 0 14px rgba(34,211,238,0.8); } .hero .hero__inner { position: relative; z-index: 2; } .hero .hero__eyebrow { display: inline-block; padding: 6px 16px; border-radius: 999px; background: rgba(79,110,247,0.1); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(79,110,247,0.25); animation: hero-pulse-glow 3s ease-in-out infinite; } .hero .hero__title { background: linear-gradient(120deg, #1a2b4c 0%, #4f6ef7 50%, #a855f7 100%); background-size: 200% auto; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; animation: hero-gradient-shift 6s ease infinite; transition: transform 0.4s ease; transform-style: preserve-3d; } .hero .hero__title:hover { transform: perspective(600px) rotateX(6deg) rotateY(-6deg) scale(1.02); } .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); text-shadow: 0 8px 24px rgba(79,110,247,0.4); } .hero .hero__lead { padding: 20px 24px; border-radius: 20px; background: rgba(255,255,255,0.55); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.7); box-shadow: 0 8px 32px rgba(26,43,76,0.08); transition: transform 0.4s ease, box-shadow 0.4s ease; } .hero .hero__lead:hover { transform: perspective(800px) rotateX(4deg) translateY(-4px); box-shadow: 0 16px 48px rgba(79,110,247,0.25); } @keyframes hero-blob-float { 0%, 100% { transform: translate(0, 0) scale(1); } 33% { transform: translate(40px, -30px) scale(1.1); } 66% { transform: translate(-30px, 30px) scale(0.95); } } @keyframes hero-particle-rise { 0% { transform: translateY(0) translateX(0); opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { transform: translateY(-520px) translateX(30px); opacity: 0; } } @keyframes hero-pulse-glow { 0%, 100% { box-shadow: 0 0 0 0 rgba(79,110,247,0.4); } 50% { box-shadow: 0 0 0 10px rgba(79,110,247,0); } } @keyframes hero-gradient-shift { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }"
}