/* ORBIT – anslutningssekvens (en färg, lugn, GPU-vänlig) */
#connect{position:fixed;inset:0;z-index:50;background:#000;overflow:hidden;cursor:pointer;color:#D6F4FF;font-family:'Rajdhani',sans-serif}
#connect canvas{position:absolute;inset:0;width:100%;height:100%;will-change:transform;transform:translateZ(0)}
#connect .hex{position:absolute;will-change:transform;transform:translateZ(0);top:0;bottom:0;width:180px;font-family:monospace;font-size:12px;line-height:16px;color:rgba(63,208,255,.25);overflow:hidden;white-space:pre;pointer-events:none;contain:strict}
#connect .hex.l{left:16px} #connect .hex.r{right:16px;text-align:right}
#connect .cwrap{position:relative;z-index:1;isolation:isolate;will-change:transform;transform:translateZ(0);height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:16px}
#connect .core{position:relative;width:min(300px,70vw);aspect-ratio:1;animation:cIn 1.2s cubic-bezier(.2,.8,.2,1) both}
#connect .core>*{position:absolute;inset:0;width:100%;height:100%}
#connect .ring{will-change:transform}
#connect .ring svg{width:100%;height:100%;display:block}
#connect .r1{animation:spin 20s linear infinite}
#connect .r2{animation:spin 16s linear infinite reverse}
#connect .r3{animation:spin 12s linear infinite}
#connect .ctitle{min-height:2.6em;display:flex;align-items:center;justify-content:center;font-family:'Orbitron',sans-serif;font-size:clamp(18px,3.4vw,30px);font-weight:700;letter-spacing:6px;color:#fff;text-align:center}
#connect ul{list-style:none;margin:0;padding:0;width:min(440px,92vw);display:flex;flex-direction:column;gap:6px;font-family:'Share Tech Mono',ui-monospace,monospace;font-size:17px;color:#BFEFFF}
#connect li{display:flex;justify-content:space-between;gap:12px;opacity:0;transition:opacity .4s ease;will-change:opacity}
#connect li.on{opacity:1}
#connect li .ok{font-family:'Share Tech Mono',ui-monospace,monospace;font-size:15px;letter-spacing:2px;color:#3FD0FF}
#connect li.done .ok{color:#3FD0FF}
#connect .cbar{width:min(440px,92vw);height:6px;border-radius:3px;background:rgba(63,208,255,.15);overflow:hidden}
#connect .cbar div{height:100%;width:100%;background:#3FD0FF;transform:scaleX(0);transform-origin:left;transition:transform .5s ease;will-change:transform}
#connect .skip{font-size:14px;color:rgba(156,200,216,.7);letter-spacing:2px}
#connect.out{animation:cOut 1.2s ease-in-out forwards}
@keyframes cIn{from{opacity:0;transform:scale(.4) rotate(-60deg)}to{opacity:1;transform:none}}
@keyframes cOut{to{opacity:0;transform:scale(1.12)}}
@keyframes spin{to{transform:rotate(360deg)}}
@media (max-width:700px){#connect .hex{display:none}}
@media (prefers-reduced-motion:reduce){#connect *,#connect.out{animation:none!important;transition:none!important}}
#connect .ghost{visibility:hidden}
#connect .noise{color:rgba(63,208,255,.55)}
#connect li.typing .txt::after{content:'_';color:#3FD0FF}
#connect .secure{display:flex;align-items:center;gap:12px;padding:10px 16px;border:1px solid rgba(63,208,255,.45);border-radius:8px;background:rgba(4,16,28,.85);opacity:0;transition:opacity .5s ease;will-change:opacity}
#connect .secure.show{opacity:1}
#connect .secure .s1{font-family:'Orbitron',sans-serif;font-size:14px;font-weight:700;letter-spacing:3px;color:#fff}
#connect .secure .s2{font-family:'Share Tech Mono',ui-monospace,monospace;font-size:14px;color:#9CC8D8}
#connect .secure.warn{border-color:#FF8F98}
#connect .secure.warn .s1{color:#FF8F98}