{
  "html": "<section class='hero'><div class='hero__inner'><p class='hero__eyebrow'>Персональный сайт</p><h1 class='hero__title'>Алексей Смирнов<span class='hero__wave'></span></h1><p class='hero__subtitle'>Разработчик</p><p class='hero__lead'>Создаю удобные и быстрые веб-приложения. Люблю чистый код и продуманный дизайн.</p><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></section>",
  "css": ".hero { animation: hero-breathe 6s ease-in-out infinite; animation-delay: 0.2s; transform-origin: center; }\n.hero .hero__title { position: relative; display: inline-block; }\n.hero .hero__wave { position: absolute; left: 0; right: 0; bottom: -14px; height: 8px; display: block; background: linear-gradient(90deg, #2563eb 0%, #3b82f6 50%, #60a5fa 100%); border-radius: 999px; transform-origin: left center; animation: hero-wave 0.3s ease-out forwards; }\n.hero .hero__wave::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, #60a5fa 0%, #3b82f6 50%, #2563eb 100%); border-radius: 999px; opacity: 0.6; animation: hero-wave-shimmer 2.4s ease-in-out infinite; }\n.hero .hero__particles { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }\n.hero .hero__inner { position: relative; }\n.hero .hero__particle { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: #60a5fa; opacity: 0; box-shadow: 0 0 0 4px rgba(96, 165, 250, 0.15); }\n.hero .hero__particle--1 { left: 12%; top: 30%; background: #2563eb; }\n.hero .hero__particle--2 { left: 24%; top: 70%; background: #3b82f6; width: 6px; height: 6px; }\n.hero .hero__particle--3 { left: 48%; top: 18%; background: #60a5fa; width: 10px; height: 10px; }\n.hero .hero__particle--4 { left: 68%; top: 62%; background: #2563eb; width: 7px; height: 7px; }\n.hero .hero__particle--5 { left: 82%; top: 34%; background: #3b82f6; }\n.hero .hero__particle--6 { left: 90%; top: 76%; background: #60a5fa; width: 5px; height: 5px; }\n.hero:hover .hero__particle--1 { animation: hero-float-1 0.3s ease-out forwards; }\n.hero:hover .hero__particle--2 { animation: hero-float-2 0.3s ease-out forwards; }\n.hero:hover .hero__particle--3 { animation: hero-float-3 0.3s ease-out forwards; }\n.hero:hover .hero__particle--4 { animation: hero-float-4 0.3s ease-out forwards; }\n.hero:hover .hero__particle--5 { animation: hero-float-5 0.3s ease-out forwards; }\n.hero:hover .hero__particle--6 { animation: hero-float-6 0.3s ease-out forwards; }\n@keyframes hero-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.01); } }\n@keyframes hero-wave { 0% { transform: scaleX(0); opacity: 0; } 100% { transform: scaleX(1); opacity: 1; } }\n@keyframes hero-wave-shimmer { 0%, 100% { transform: translateX(0); opacity: 0.4; } 50% { transform: translateX(6px); opacity: 0.8; } }\n@keyframes hero-float-1 { 0% { opacity: 0; transform: translate(0, 0); } 100% { opacity: 1; transform: translate(-14px, -22px); } }\n@keyframes hero-float-2 { 0% { opacity: 0; transform: translate(0, 0); } 100% { opacity: 1; transform: translate(10px, -18px); } }\n@keyframes hero-float-3 { 0% { opacity: 0; transform: translate(0, 0); } 100% { opacity: 1; transform: translate(-8px, 20px); } }\n@keyframes hero-float-4 { 0% { opacity: 0; transform: translate(0, 0); } 100% { opacity: 1; transform: translate(16px, -14px); } }\n@keyframes hero-float-5 { 0% { opacity: 0; transform: translate(0, 0); } 100% { opacity: 1; transform: translate(-12px, 16px); } }\n@keyframes hero-float-6 { 0% { opacity: 0; transform: translate(0, 0); } 100% { opacity: 1; transform: translate(8px, -20px); } }"
}