/* ============================================================
   boot.css v3 — "RGB keyboard in a dark room", with text + sound.
   ARMED: black room, keyboard glowing, PRESS ANY KEY prompt.
   RUN:   boot log types, beams + strobes, glitch wordmark,
          keyboard spins, white flash-bang, auto-typing.
   ============================================================ */

.boot-veil{
  position:fixed; inset:0; z-index:999; overflow:hidden;
  background:
    radial-gradient(55% 45% at 16% 84%, rgba(0,229,255,.08), transparent 70%),
    radial-gradient(50% 40% at 86% 12%, rgba(255,43,214,.07), transparent 70%),
    #050505;
  /* fail-safe: if JS ever dies, the veil lifts itself */
  animation:veil-failsafe .7s 9.5s forwards;
}
@keyframes veil-failsafe{ to{ opacity:0; visibility:hidden; } }

/* CRT power-on scanline — plays immediately on load */
.bv-scan{
  position:absolute; left:0; right:0; top:-3px; height:3px; opacity:0;
  background:linear-gradient(90deg, transparent, rgba(0,229,255,.95), transparent);
  box-shadow:0 0 22px rgba(0,229,255,.9), 0 0 60px rgba(0,229,255,.45);
  animation:bv-scan .34s .05s cubic-bezier(.3,0,.7,1) forwards;
}
@keyframes bv-scan{
  0%{ transform:translateY(0); opacity:1; }
  85%{ opacity:1; }
  100%{ transform:translateY(102vh); opacity:0; }
}

/* ---------- ARMED: press-any-key prompt ---------- */
.bv-prompt{
  position:absolute; left:50%; bottom:14%; transform:translateX(-50%);
  font-family:"JetBrains Mono", ui-monospace, monospace;
  font-size:clamp(13px,1.6vw,17px); letter-spacing:.34em; text-transform:uppercase;
  color:rgba(0,229,255,.92); text-shadow:0 0 14px rgba(0,229,255,.6);
  white-space:nowrap; text-align:center;
  animation:bv-prompt-breathe 2.2s ease-in-out infinite;
}
.bv-prompt .cursor{
  display:inline-block; width:.62em; height:1.05em; margin-left:.45em;
  background:rgba(0,229,255,.95); vertical-align:text-bottom;
  animation:bv-cursor 1s steps(1) infinite;
  box-shadow:0 0 12px rgba(0,229,255,.8);
}
.bv-prompt .sub{
  display:block; margin-top:12px; font-size:10px; letter-spacing:.22em;
  color:rgba(255,255,255,.34); text-shadow:none;
}
@keyframes bv-cursor{ 0%,49%{ opacity:1; } 50%,100%{ opacity:0; } }
@keyframes bv-prompt-breathe{ 0%,100%{ opacity:1; } 50%{ opacity:.55; } }
.boot-run .bv-prompt{ display:none; }

/* ---------- RUN: typed boot log ---------- */
.bv-term{
  position:absolute; left:clamp(18px,4vw,56px); top:clamp(18px,4vw,48px);
  font-family:"JetBrains Mono", ui-monospace, monospace;
  font-size:clamp(11px,1.25vw,14px); line-height:2;
  color:rgba(0,229,255,.85); text-shadow:0 0 10px rgba(0,229,255,.45);
  white-space:pre; text-align:left;
}
.bv-term .ok{ color:#9CFF57; text-shadow:0 0 10px rgba(156,255,87,.5); }

/* ---------- RUN: glitch wordmark ---------- */
.bv-title{
  position:absolute; left:50%; top:10%; transform:translateX(-50%);
  font-family:"JetBrains Mono", ui-monospace, monospace; font-weight:700;
  font-size:clamp(30px,6.4vw,92px); letter-spacing:.1em; white-space:nowrap;
  color:#fff; opacity:0; text-shadow:0 0 30px rgba(255,255,255,.4);
}
.bv-title::before, .bv-title::after{
  content:attr(data-text); position:absolute; left:0; top:0; width:100%;
  opacity:.8;
}
.bv-title::before{ color:#00E5FF; z-index:-1; }
.bv-title::after{ color:#FF2BD6; z-index:-2; }
.boot-run .bv-title{ animation:bv-title-in .12s 1.4s linear forwards; }
.boot-run .bv-title::before{
  animation:bv-glitch-a .55s 1.4s steps(2, jump-none) forwards,
            bv-glitch-a .3s 2.6s steps(2, jump-none) forwards;
}
.boot-run .bv-title::after{
  animation:bv-glitch-b .55s 1.4s steps(2, jump-none) forwards,
            bv-glitch-b .3s 2.6s steps(2, jump-none) forwards;
}
@keyframes bv-title-in{ to{ opacity:1; } }
@keyframes bv-glitch-a{
  0%{ transform:translate(-6px,2px); clip-path:inset(10% 0 64% 0); }
  25%{ transform:translate(5px,-3px); clip-path:inset(58% 0 8% 0); }
  50%{ transform:translate(-4px,1px); clip-path:inset(30% 0 42% 0); }
  75%{ transform:translate(3px,-1px); clip-path:inset(72% 0 4% 0); }
  100%{ transform:translate(-2.5px,0); clip-path:none; }
}
@keyframes bv-glitch-b{
  0%{ transform:translate(6px,-2px); clip-path:inset(64% 0 10% 0); }
  25%{ transform:translate(-5px,3px); clip-path:inset(8% 0 58% 0); }
  50%{ transform:translate(4px,-1px); clip-path:inset(42% 0 30% 0); }
  75%{ transform:translate(-3px,1px); clip-path:inset(4% 0 72% 0); }
  100%{ transform:translate(2.5px,0); clip-path:none; }
}

/* ---------- RUN: neon beams ---------- */
.bv-beam{
  position:absolute; top:-12%; bottom:-12%; left:0; width:13vw; min-width:120px;
  opacity:0; pointer-events:none; filter:blur(14px);
  transform:translateX(-28vw) skewX(-16deg);
}
.bv-beam.b1{ background:linear-gradient(90deg, transparent, rgba(0,229,255,.9), transparent); }
.bv-beam.b2{ background:linear-gradient(90deg, transparent, rgba(255,43,214,.85), transparent); }
.bv-beam.b3{ background:linear-gradient(90deg, transparent, rgba(243,196,76,.85), transparent); }
.boot-run .bv-beam.b1{
  animation:bv-sweep-r .62s .2s cubic-bezier(.5,0,.5,1) forwards,
            bv-sweep-r .62s 1.55s cubic-bezier(.5,0,.5,1) forwards;
}
.boot-run .bv-beam.b2{
  animation:bv-sweep-l .62s .5s cubic-bezier(.5,0,.5,1) forwards,
            bv-sweep-l .62s 1.85s cubic-bezier(.5,0,.5,1) forwards;
}
.boot-run .bv-beam.b3{
  animation:bv-sweep-r .5s 1.05s cubic-bezier(.5,0,.5,1) forwards,
            bv-sweep-r .5s 2.25s cubic-bezier(.5,0,.5,1) forwards;
}
@keyframes bv-sweep-r{
  0%{ transform:translateX(-28vw) skewX(-16deg); opacity:0; }
  8%{ opacity:1; } 22%{ opacity:.25; } 36%{ opacity:1; } 52%{ opacity:.4; } 68%{ opacity:1; }
  100%{ transform:translateX(124vw) skewX(-16deg); opacity:0; }
}
@keyframes bv-sweep-l{
  0%{ transform:translateX(124vw) skewX(-16deg); opacity:0; }
  8%{ opacity:1; } 24%{ opacity:.2; } 40%{ opacity:1; } 56%{ opacity:.35; } 72%{ opacity:1; }
  100%{ transform:translateX(-28vw) skewX(-16deg); opacity:0; }
}

/* ---------- RUN: club strobes ---------- */
.bv-strobe{ position:absolute; inset:0; opacity:0; pointer-events:none; }
.boot-run .bv-strobe.s1{
  background:rgba(255,43,214,.18);
  animation:bv-blip .1s .55s linear 1, bv-blip .09s 1.3s linear 1, bv-blip .08s 2.2s linear 1;
}
.boot-run .bv-strobe.s2{
  background:rgba(0,229,255,.16);
  animation:bv-blip .1s .9s linear 1, bv-blip .09s 1.7s linear 1, bv-blip .08s 2.5s linear 1;
}
@keyframes bv-blip{ 0%,100%{ opacity:0; } 50%{ opacity:1; } }

/* ---------- RUN: white flash-bang reveal ---------- */
.bv-white{ position:absolute; inset:0; background:#fff; opacity:0; pointer-events:none; }
.boot-veil.lift{ animation:bv-veilfade .5s .08s cubic-bezier(.2,.7,.3,1) forwards; }
.boot-veil.lift .bv-white{ animation:bv-whiteflash .5s linear forwards; }
@keyframes bv-veilfade{ to{ opacity:0; } }
@keyframes bv-whiteflash{ 0%{ opacity:0; } 16%{ opacity:.95; } 100%{ opacity:0; } }

/* ============================================================
   night state — the keyboard alone, alive in the dark
   ============================================================ */
.boot-night .kb-stage{ position:relative; z-index:1000; }

.boot-night .key::before{
  opacity:1;
  animation:bv-rgbwave 1.1s linear infinite;
  animation-delay:calc(var(--ki, 0) * -90ms);
}
@keyframes bv-rgbwave{
  from{ filter:blur(11px) saturate(2.2) hue-rotate(0deg); }
  to{ filter:blur(11px) saturate(2.2) hue-rotate(360deg); }
}

.boot-night .kcap{ filter:brightness(1.14) saturate(1.35); }

/* caps punch brighter in sync with the strobes (3s window, 6 hits) */
.boot-run.boot-night .kcap{ animation:bv-kpulse 3s linear forwards; }
@keyframes bv-kpulse{
  0%, 14%, 23%, 26%, 34%, 39%, 48%, 52%, 61%, 68%, 78%, 79%, 88%, 100%{
    filter:brightness(1.14) saturate(1.35);
  }
  18%, 30%, 43%, 57%, 73%, 83%{
    filter:brightness(1.8) saturate(1.9);
  }
}

/* colour pool washing the desk under the deck */
.boot-night .kb-stage::after{
  content:""; position:absolute; left:50%; top:60%;
  width:min(82vw, 920px); height:360px;
  transform:translate(-50%,-50%);
  background:
    radial-gradient(38% 60% at 28% 50%, rgba(0,229,255,.3), transparent 70%),
    radial-gradient(38% 60% at 72% 50%, rgba(255,43,214,.28), transparent 70%),
    radial-gradient(52% 72% at 50% 56%, rgba(243,196,76,.2), transparent 75%);
  filter:blur(36px);
  animation:bv-pool 1.4s linear infinite;
  pointer-events:none; z-index:-1;
}
@keyframes bv-pool{ to{ filter:blur(36px) hue-rotate(360deg); } }

/* keyboard spins through the dark, braking as the lights hit */
.kb-deck.boot-spin{
  animation:deck-spin 2.2s cubic-bezier(.16,1,.3,1) both;
}
@keyframes deck-spin{
  from{ transform:rotateX(var(--rx)) rotateZ(calc(var(--rz) - 720deg)); }
}