{
  "html": "<section class='hero'><div class='hero__blobs' 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></div><div class='hero__particles' aria-hidden='true'><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'><div class='hero__card'><p class='hero__eyebrow'>Персональный сайт</p><h1 class='hero__title'>Алексей Смирнов</h1><p class='hero__subtitle'>Разработчик</p><p class='hero__lead'>Создаю удобные и быстрые веб-приложения. Люблю чистый код и продуманный дизайн.</p></div></div></section>",
  "css": ".hero { position: relative; overflow: hidden; isolation: isolate; } .hero .hero__blobs { position: absolute; inset: 0; pointer-events: none; z-index: 0; } .hero .hero__blob { position: absolute; border-radius: 50%; filter: blur(60px); opacity: 0.55; will-change: transform; } .hero .hero__blob--1 { width: 380px; height: 380px; top: -120px; left: -100px; background: radial-gradient(circle at 30% 30%, #60a5fa 0%, rgba(96, 165, 250, 0) 70%); animation: hero-blob-drift-1 18s ease-in-out infinite; } .hero .hero__blob--2 { width: 460px; height: 460px; bottom: -180px; right: -140px; background: radial-gradient(circle at 60% 40%, #3b82f6 0%, rgba(59, 130, 246, 0) 70%); animation: hero-blob-drift-2 22s ease-in-out infinite; } .hero .hero__blob--3 { width: 300px; height: 300px; top: 40%; left: 55%; background: radial-gradient(circle at 50% 50%, #bfdbfe 0%, rgba(191, 219, 254, 0) 70%); animation: hero-blob-drift-3 26s ease-in-out infinite; } .hero .hero__particles { position: absolute; inset: 0; pointer-events: none; z-index: 0; } .hero .hero__particle { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: radial-gradient(circle at 30% 30%, #ffffff 0%, #60a5fa 60%, #2563eb 100%); box-shadow: 0 0 12px rgba(59, 130, 246, 0.45); opacity: 0.85; will-change: transform; } .hero .hero__particle--1 { top: 18%; left: 12%; animation: hero-particle-float-1 7s cubic-bezier(0.34, 1.56, 0.64, 1) infinite; } .hero .hero__particle--2 { top: 70%; left: 22%; width: 6px; height: 6px; animation: hero-particle-float-2 9s cubic-bezier(0.34, 1.56, 0.64, 1) infinite; animation-delay: -1.5s; } .hero .hero__particle--3 { top: 30%; left: 82%; width: 10px; height: 10px; animation: hero-particle-float-3 8s cubic-bezier(0.34, 1.56, 0.64, 1) infinite; animation-delay: -3s; } .hero .hero__particle--4 { top: 78%; left: 74%; width: 5px; height: 5px; animation: hero-particle-float-1 6.5s cubic-bezier(0.34, 1.56, 0.64, 1) infinite; animation-delay: -2s; } .hero .hero__particle--5 { top: 12%; left: 58%; width: 7px; height: 7px; animation: hero-particle-float-2 10s cubic-bezier(0.34, 1.56, 0.64, 1) infinite; animation-delay: -4s; } .hero .hero__particle--6 { top: 55%; left: 40%; width: 6px; height: 6px; animation: hero-particle-float-3 8.5s cubic-bezier(0.34, 1.56, 0.64, 1) infinite; animation-delay: -5s; } .hero .hero__inner { position: relative; z-index: 1; perspective: 1200px; } .hero .hero__card { position: relative; padding: 40px 32px; border-radius: 24px; background: linear-gradient(135deg, rgba(255, 255, 255, 0.75) 0%, rgba(240, 244, 255, 0.55) 100%); border: 1px solid rgba(37, 99, 235, 0.12); box-shadow: 0 20px 60px -20px rgba(37, 99, 235, 0.25), 0 8px 24px -12px rgba(30, 41, 59, 0.12); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); overflow: hidden; transform-style: preserve-3d; transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.5s ease; } .hero .hero__card::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(115deg, rgba(255, 255, 255, 0) 35%, rgba(255, 255, 255, 0.75) 50%, rgba(255, 255, 255, 0) 65%); background-size: 250% 250%; background-position: 150% 0; pointer-events: none; animation: hero-card-glare 6s ease-in-out infinite; } .hero .hero__card:hover { transform: rotateX(-4deg) rotateY(4deg) translateZ(0); box-shadow: 0 30px 80px -24px rgba(37, 99, 235, 0.35), 0 12px 32px -14px rgba(30, 41, 59, 0.18); } .hero .hero__card:focus-within { transform: rotateX(-4deg) rotateY(4deg) translateZ(0); box-shadow: 0 30px 80px -24px rgba(37, 99, 235, 0.35), 0 12px 32px -14px rgba(30, 41, 59, 0.18); } .hero .hero__card:focus-within::after { animation-duration: 2.5s; } @keyframes hero-blob-drift-1 { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(60px, 40px) scale(1.15); } 100% { transform: translate(0, 0) scale(1); } } @keyframes hero-blob-drift-2 { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-70px, -50px) scale(1.2); } 100% { transform: translate(0, 0) scale(1); } } @keyframes hero-blob-drift-3 { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-40px, 60px) scale(0.9); } 100% { transform: translate(0, 0) scale(1); } } @keyframes hero-particle-float-1 { 0% { transform: translate(0, 0) scale(1); opacity: 0.85; } 50% { transform: translate(14px, -22px) scale(1.25); opacity: 1; } 100% { transform: translate(0, 0) scale(1); opacity: 0.85; } } @keyframes hero-particle-float-2 { 0% { transform: translate(0, 0) scale(1); opacity: 0.7; } 50% { transform: translate(-18px, -16px) scale(1.3); opacity: 1; } 100% { transform: translate(0, 0) scale(1); opacity: 0.7; } } @keyframes hero-particle-float-3 { 0% { transform: translate(0, 0) scale(1); opacity: 0.8; } 50% { transform: translate(10px, 20px) scale(1.2); opacity: 1; } 100% { transform: translate(0, 0) scale(1); opacity: 0.8; } } @keyframes hero-card-glare { 0% { background-position: 150% 0; } 55% { background-position: -50% 0; } 100% { background-position: -50% 0; } }"
}