/* Loading cover. A first visit sees two steel doors meet at a hazard-striped seam with the logo and a load meter;
   they part once the console has drawn its first frame. Later visits in the session get a short dark fade.
   intro.js drives it; the failsafe below opens it even if no script runs. */
.intro{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;overflow:hidden;animation:intro-failsafe 0s linear 9s forwards}
@keyframes intro-failsafe{to{visibility:hidden;pointer-events:none}}
html.intro-done .intro,.intro.is-gone{display:none}

.intro-door{--rivets:radial-gradient(circle,#3a3d3f 0 2.5px,#0a0b0b 3px 4px,transparent 4.5px);position:absolute;left:0;right:0;height:50.5%;transition:transform .85s cubic-bezier(.76,0,.22,1);box-shadow:0 0 40px #000c;
  background:var(--rivets) left 18px top 26px/14px 46px repeat-y,var(--rivets) right 18px top 26px/14px 46px repeat-y,
    repeating-linear-gradient(0deg,#ffffff05 0 1px,transparent 1px 5px),linear-gradient(180deg,#1b1d1e,#0d0e0f 70%,#121314)}
.intro-top{top:0}
.intro-bottom{bottom:0;background:var(--rivets) left 18px bottom 26px/14px 46px repeat-y,var(--rivets) right 18px bottom 26px/14px 46px repeat-y,
    repeating-linear-gradient(0deg,#ffffff05 0 1px,transparent 1px 5px),linear-gradient(0deg,#1b1d1e,#0d0e0f 70%,#121314)}
/* the seam: a dark lip, then hazard stripes, on both door edges */
.intro-door>i{position:absolute;left:0;right:0;height:16px;background:repeating-linear-gradient(-45deg,#e39b1d 0 13px,#151413 13px 26px);box-shadow:inset 0 2px 0 #ffffff1a,inset 0 -2px 0 #0008}
.intro-top>i{bottom:6px}.intro-bottom>i{top:6px}
.intro-door>b{position:absolute;left:0;right:0;height:6px;background:#060606}
.intro-top>b{bottom:0}.intro-bottom>b{top:0}

.intro-badge{position:relative;z-index:2;display:grid;justify-items:center;gap:26px;transition:opacity .22s ease,transform .3s ease}
.intro-logo{display:block;width:min(400px,64vw);height:auto;filter:drop-shadow(0 10px 18px #000a)}
.intro-status{display:flex;align-items:center;gap:14px;margin:0;padding:9px 16px;background:#0a0a0a;border:1px solid #2c2a27;border-radius:3px;
  font:600 12px/1 'JetBrains Mono',ui-monospace,Consolas,monospace;letter-spacing:.22em;text-transform:uppercase;color:#d9cdb2}
.intro-leds{display:flex;gap:3px}
.intro-leds i{width:11px;height:7px;background:#2a2723;transition:background .18s}
.intro-leds i.on{background:#ffb84d}

.intro.is-open{pointer-events:none}
.intro.is-open .intro-badge{opacity:0;transform:scale(.97)}
.intro.is-open .intro-top{transform:translateY(-101%)}
.intro.is-open .intro-bottom{transform:translateY(101%)}

/* Returning in the same session: no doors, just a dark cover that fades when the console is ready. */
html.intro-quick .intro-badge,html.intro-quick .intro-door>i,html.intro-quick .intro-door>b{display:none}
html.intro-quick .intro-door{background:#0b0b0c;box-shadow:none;transition:opacity .3s ease}
html.intro-quick .intro.is-open .intro-door{transform:none;opacity:0}
@media(prefers-reduced-motion:reduce){
  .intro-door{transition:opacity .3s ease}
  .intro.is-open .intro-door{transform:none;opacity:0}
}
@media(max-width:600px){.intro-badge{gap:20px}.intro-status{font-size:10px;padding:8px 12px;gap:10px}.intro-leds i{width:8px;height:6px}}