{
  "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><span class='hero__particle hero__particle--7'></span><span class='hero__particle hero__particle--8'></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; background: linear-gradient(135deg, #e0f7ff 0%, #ffffff 55%, #f0fbff 100%); } .hero .hero__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; } .hero .hero__inner { position: relative; z-index: 2; } .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: -100px; background: radial-gradient(circle at 30% 30%, #22d3ee 0%, #06b6d4 45%, rgba(6, 182, 212, 0) 70%); animation: hero-blob-drift-1 16s ease-in-out infinite; } .hero .hero__blob--2 { width: 360px; height: 360px; bottom: -140px; right: -80px; background: radial-gradient(circle at 60% 40%, #38bdf8 0%, #0ea5e9 50%, rgba(14, 165, 233, 0) 72%); animation: hero-blob-drift-2 20s ease-in-out infinite; } .hero .hero__blob--3 { width: 300px; height: 300px; top: 40%; left: 55%; background: radial-gradient(circle at 50% 50%, #67e8f9 0%, #22d3ee 55%, rgba(34, 211, 238, 0) 75%); animation: hero-blob-drift-3 24s ease-in-out infinite; opacity: 0.4; } .hero .hero__particle { position: absolute; width: 10px; height: 10px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #ffffff 0%, #67e8f9 45%, #06b6d4 100%); box-shadow: 0 0 12px rgba(34, 211, 238, 0.8), 0 0 24px rgba(56, 189, 248, 0.45); opacity: 0.85; animation: hero-particle-float 9s ease-in-out infinite; will-change: transform, opacity; } .hero .hero__particle--1 { top: 18%; left: 12%; animation-delay: 0s; animation-duration: 8s; } .hero .hero__particle--2 { top: 70%; left: 20%; width: 6px; height: 6px; animation-delay: 1.2s; animation-duration: 10s; } .hero .hero__particle--3 { top: 30%; left: 82%; width: 14px; height: 14px; animation-delay: 0.6s; animation-duration: 12s; } .hero .hero__particle--4 { top: 78%; left: 74%; width: 8px; height: 8px; animation-delay: 2.4s; animation-duration: 9s; } .hero .hero__particle--5 { top: 12%; left: 48%; width: 5px; height: 5px; animation-delay: 3.1s; animation-duration: 11s; } .hero .hero__particle--6 { top: 55%; left: 6%; width: 7px; height: 7px; animation-delay: 1.8s; animation-duration: 13s; } .hero .hero__particle--7 { top: 88%; left: 42%; width: 9px; height: 9px; animation-delay: 0.9s; animation-duration: 10.5s; } .hero .hero__particle--8 { top: 42%; left: 92%; width: 6px; height: 6px; animation-delay: 2.7s; animation-duration: 9.5s; } .hero .hero__eyebrow { display: inline-block; padding: 8px 18px; border-radius: 999px; background: rgba(255, 255, 255, 0.55); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(34, 211, 238, 0.45); color: #0e7490; box-shadow: 0 0 0 0 rgba(34, 211, 238, 0.55); animation: hero-pulse-ring 3s ease-out infinite; } .hero .hero__title { background: linear-gradient(120deg, #0e7490 0%, #06b6d4 35%, #22d3ee 60%, #38bdf8 100%); background-size: 220% 220%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; animation: hero-gradient-shift 8s ease infinite; text-shadow: 0 0 40px rgba(34, 211, 238, 0.25); } .hero .hero__subtitle { display: inline-block; padding: 6px 16px; border-radius: 12px; background: rgba(255, 255, 255, 0.5); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(56, 189, 248, 0.4); color: #0369a1; box-shadow: 0 8px 24px rgba(6, 182, 212, 0.18); } .hero .hero__lead { padding: 20px 24px; border-radius: 18px; background: rgba(255, 255, 255, 0.45); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(103, 232, 249, 0.5); box-shadow: 0 12px 40px rgba(14, 165, 233, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.8); color: #334155; transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.45s ease; transform-style: preserve-3d; } .hero .hero__lead:hover { transform: perspective(900px) rotateX(4deg) rotateY(-4deg) translateY(-4px); box-shadow: 0 24px 60px rgba(6, 182, 212, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.9); } @keyframes hero-blob-drift-1 { 0%, 100% { transform: translate(0, 0) scale(1); } 33% { transform: translate(80px, 60px) scale(1.15); } 66% { transform: translate(40px, -40px) scale(0.92); } } @keyframes hero-blob-drift-2 { 0%, 100% { transform: translate(0, 0) scale(1); } 40% { transform: translate(-90px, -50px) scale(1.12); } 70% { transform: translate(-40px, 40px) scale(0.95); } } @keyframes hero-blob-drift-3 { 0%, 100% { transform: translate(-50%, -50%) scale(1); } 50% { transform: translate(-40%, -60%) scale(1.2); } } @keyframes hero-particle-float { 0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.4; } 50% { transform: translate(24px, -40px) scale(1.4); opacity: 1; } } @keyframes hero-pulse-ring { 0% { box-shadow: 0 0 0 0 rgba(34, 211, 238, 0.55); } 70% { box-shadow: 0 0 0 14px rgba(34, 211, 238, 0); } 100% { box-shadow: 0 0 0 0 rgba(34, 211, 238, 0); } } @keyframes hero-gradient-shift { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }"
}