.home-logo{position:relative;width:min(100%,550px);min-width:0;justify-self:center;margin:0;align-self:center}
.home-logo-art{position:relative;aspect-ratio:1;width:100%;overflow:hidden;background:transparent;mix-blend-mode:screen;mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 52%,transparent 100%);-webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 52%,transparent 100%)}
.home-logo-art>img{display:block;width:100%;height:100%;object-fit:contain;aspect-ratio:1;filter:url(#home-logo-cutout)}
.home-logo-art>svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.logo-current{fill:none;stroke:#91d9ff;stroke-width:4;stroke-linecap:round;stroke-dasharray:24 230;animation:logo-current 5s linear infinite;filter:drop-shadow(0 0 5px #677bff)}
.logo-current.violet{stroke:#c38cff;animation-delay:-2.5s}
.logo-beacon{fill:url(#home-logo-beacon);opacity:.3;animation:logo-beacon 5s ease-in-out infinite}
.home-logo-motion{position:absolute;z-index:2;bottom:16px;right:16px;display:flex;align-items:center;gap:7px;padding:7px 10px;border:1px solid #334b70;border-radius:8px;background:#06101deb;color:#b8cee0;font-size:12px;cursor:pointer}
.home-logo-motion input{accent-color:#62baff;margin:0;width:15px;height:15px}
.home-logo:has(input:checked) .logo-current,.home-logo:has(input:checked) .logo-beacon{animation-play-state:paused}
@keyframes logo-current{to{stroke-dashoffset:-254}}
@keyframes logo-beacon{0%,100%{opacity:.15}50%{opacity:.65}}
@media(prefers-reduced-motion:reduce){.home-logo .logo-current,.home-logo .logo-beacon{animation:none}.home-logo-motion{display:none}.logo-current{opacity:.3}}
@media(max-width:600px){.home-logo{width:min(100%,420px)}.home-logo-art{border-radius:16px}}