{
  "html": "<footer class='footer'><div class='footer__noise' aria-hidden='true'></div><div class='footer__glow' aria-hidden='true'></div><div class='footer__particles' aria-hidden='true'><span class='footer__particle'></span><span class='footer__particle'></span><span class='footer__particle'></span><span class='footer__particle'></span><span class='footer__particle'></span></div><div class='footer__inner'><p class='footer__copy'>© 2026 Алексей Смирнов</p><nav class='footer__nav'><a href='/policy' class='footer__link'>Политика</a><a href='/rules' class='footer__link'>Правила</a></nav></div></footer>",
  "css": ".footer { position: relative; overflow: hidden; isolation: isolate; } .footer .footer__noise { position: absolute; inset: 0; pointer-events: none; opacity: 0.35; mix-blend-mode: multiply; background-image: url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/></svg>\"); z-index: 0; } .footer .footer__glow { position: absolute; right: -80px; bottom: -80px; width: 260px; height: 260px; border-radius: 50%; pointer-events: none; background: radial-gradient(circle at center, rgba(96, 165, 250, 0.55) 0%, rgba(59, 130, 246, 0.25) 40%, rgba(37, 99, 235, 0) 70%); animation: footer-pulse 4s ease-in-out infinite; z-index: 0; } .footer .footer__inner { position: relative; z-index: 2; } .footer .footer__link { position: relative; display: inline-block; } .footer .footer__link::after { content: ''; position: absolute; left: 0; right: 0; bottom: -3px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, #2563eb 0%, #3b82f6 25%, #60a5fa 50%, #3b82f6 75%, #2563eb 100%); background-size: 200% 100%; transform: scaleX(0); transform-origin: left center; transition: transform 0.3s ease-out; } .footer .footer__link:hover::after, .footer .footer__link:focus-visible::after { transform: scaleX(1); animation: footer-run 0.3s ease-out forwards; } .footer .footer__particles { position: absolute; inset: 0; pointer-events: none; z-index: 1; opacity: 0; transition: opacity 0.4s ease; } .footer .footer__particle { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: radial-gradient(circle at 30% 30%, #ffffff 0%, #60a5fa 60%, #3b82f6 100%); box-shadow: 0 0 8px rgba(59, 130, 246, 0.6); opacity: 0.85; } .footer .footer__particle:nth-child(1) { left: 12%; bottom: 20%; animation: footer-float-1 6s ease-in-out infinite; } .footer .footer__particle:nth-child(2) { left: 32%; bottom: 10%; width: 4px; height: 4px; animation: footer-float-2 7s ease-in-out infinite 0.5s; } .footer .footer__particle:nth-child(3) { left: 55%; bottom: 30%; width: 5px; height: 5px; animation: footer-float-3 5.5s ease-in-out infinite 1s; } .footer .footer__particle:nth-child(4) { left: 72%; bottom: 15%; animation: footer-float-1 8s ease-in-out infinite 1.5s; } .footer .footer__particle:nth-child(5) { left: 88%; bottom: 25%; width: 4px; height: 4px; animation: footer-float-2 6.5s ease-in-out infinite 2s; } .footer:focus-within .footer__particles { opacity: 1; } @keyframes footer-pulse { 0%, 100% { transform: scale(1); opacity: 0.7; } 50% { transform: scale(1.25); opacity: 1; } } @keyframes footer-run { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } } @keyframes footer-float-1 { 0%, 100% { transform: translate(0, 0); opacity: 0.4; } 50% { transform: translate(10px, -22px); opacity: 1; } } @keyframes footer-float-2 { 0%, 100% { transform: translate(0, 0); opacity: 0.5; } 50% { transform: translate(-14px, -18px); opacity: 1; } } @keyframes footer-float-3 { 0%, 100% { transform: translate(0, 0); opacity: 0.35; } 50% { transform: translate(8px, -26px); opacity: 1; } }"
}