#hexr{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;opacity:.2}
#ring{position:fixed;left:0;top:0;width:38px;height:38px;margin:-19px 0 0 -19px;border:1.5px solid rgba(255,70,55,.8);border-radius:50%;z-index:61;pointer-events:none;transition:width .2s,height .2s,margin .2s,background .2s,border-color .2s;mix-blend-mode:screen}
#ring.big{width:70px;height:70px;margin:-35px 0 0 -35px;background:rgba(255,42,42,.15);border-color:#fff}
#ring.dn{width:22px;height:22px;margin:-11px 0 0 -11px;background:rgba(255,255,255,.4)}
.scan{position:absolute;left:0;right:0;top:0;height:3px;z-index:5;pointer-events:none;background:linear-gradient(90deg,transparent,#ff3b3b,#fff,#ff3b3b,transparent);box-shadow:0 0 22px 6px rgba(255,42,42,.65);animation:scn 3.6s ease-in-out infinite;opacity:.85}
@keyframes scn{0%{top:2%;opacity:0}10%{opacity:.9}50%{top:96%}60%{opacity:0}100%{top:96%;opacity:0}}
#nos{position:fixed;inset:0;z-index:70;pointer-events:none;opacity:0;background:repeating-conic-gradient(from 0deg at 50% 50%,transparent 0 3deg,rgba(90,180,255,.4) 3deg 3.7deg,transparent 3.7deg 7deg);-webkit-mask:radial-gradient(circle,transparent 18%,#000 75%);mask:radial-gradient(circle,transparent 18%,#000 75%)}
#nos.on{animation:nosa 1.5s ease-out}
@keyframes nosa{0%{opacity:0;transform:scale(.6)}15%{opacity:1}100%{opacity:0;transform:scale(2.2)}}
#nosf{position:fixed;inset:0;z-index:69;pointer-events:none;opacity:0;background:radial-gradient(circle,rgba(120,200,255,.5),transparent 70%)}
#nosf.on{animation:nosb 1s ease-out}
@keyframes nosb{0%{opacity:1}100%{opacity:0}}
.sw{position:fixed;z-index:71;width:20px;height:20px;margin:-10px 0 0 -10px;border-radius:50%;border:3px solid #fff;pointer-events:none;box-shadow:0 0 30px #ff2a2a,inset 0 0 20px #ff2a2a;animation:swv .8s ease-out forwards}
@keyframes swv{to{transform:scale(22);opacity:0;border-width:1px}}
h2.gl2{animation:gl2 .5s steps(2) 1}
@keyframes gl2{0%{text-shadow:3px 0 #ff2a2a,-3px 0 #39f;transform:translateX(-4px)}50%{text-shadow:-4px 0 #ff2a2a,4px 0 #39f;transform:translateX(4px) skewX(6deg)}100%{text-shadow:none;transform:none}}
section h2{position:relative}
section h2::after{content:"";display:block;height:3px;width:0;margin-top:10px;border-radius:3px;background:linear-gradient(90deg,#ff2a2a,#ff8a7a,transparent);box-shadow:0 0 14px #ff2a2a;transition:width .9s cubic-bezier(.2,.8,.2,1)}
section h2.in::after{width:min(260px,60%)}
.logo img{animation:lgf 4s ease-in-out infinite}
@keyframes lgf{50%{box-shadow:0 0 44px rgba(255,42,42,.9);transform:rotate(-4deg) scale(1.06)}}
@media(prefers-reduced-motion:reduce){#hexr,#ring,.scan,#nos,#nosf{display:none}h2.gl2,.logo img{animation:none}}

.em{position:fixed;z-index:72;border-radius:50%;pointer-events:none;box-shadow:0 0 10px 2px rgba(255,90,50,.9);animation:emv .9s cubic-bezier(.1,.7,.3,1) forwards}
@keyframes emv{to{transform:translate(var(--dx),var(--dy)) scale(.2);opacity:0}}
.emt{position:fixed;z-index:72;transform:translate(-50%,-10px);pointer-events:none;font-weight:700;font-size:15px;color:#fff;padding:6px 14px;border-radius:999px;background:linear-gradient(180deg,#ff3b3b,#c8101a);box-shadow:0 8px 24px rgba(255,42,42,.6);white-space:nowrap;animation:emu 1.4s ease-out forwards}
@keyframes emu{to{transform:translate(-50%,-70px);opacity:0}}