#gl{position:fixed;inset:0;width:100vw;height:100vh;z-index:0;opacity:0;transition:opacity 1s ease}
#gl.is-ready{opacity:1}
#poster{position:fixed;inset:0;z-index:-1;background-color:var(--neutral);
  /* forged neon-hall plate as the base; brand-tint gradients on top. If the
     image 404s the gradients + base color still render a designed poster. */
  background-image:
    radial-gradient(55% 55% at 30% 20%, color-mix(in srgb,var(--primary) 24%,transparent), transparent 60%),
    radial-gradient(50% 50% at 78% 72%, color-mix(in srgb,var(--accent) 26%,transparent), transparent 60%),
    url("../assets/img/abstract/hall_01.png");
  background-size:cover,cover,cover;
  background-position:center;
  background-repeat:no-repeat;}
body[data-mode="poster"] #gl{display:none}

/* boot / loading state */
#boot{position:fixed;inset:0;z-index:60;display:grid;place-items:center;background:var(--neutral);
  transition:opacity .7s ease,visibility .7s}
#boot.done{opacity:0;visibility:hidden}
.boot-inner{width:min(80vw,340px);text-align:center;font-family:var(--font-mono);color:var(--primary)}
.boot-title{font-family:var(--font-display);letter-spacing:.35em;font-size:.8rem;color:var(--ink);
  text-shadow:var(--glow-g);margin-bottom:1.1rem}
.boot-bar{height:3px;background:rgba(57,255,20,.15);border-radius:3px;overflow:hidden}
.boot-fill{height:100%;width:0%;background:var(--primary);box-shadow:var(--glow-g);transition:width .2s linear}
.boot-pct{margin-top:.7rem;font-size:.7rem;letter-spacing:.3em;color:var(--ink-dim)}
.boot-pct .blink{animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:0}}