/* Vector Drift — scratch logo-reveal beta styles (BANNER model).
   The VECTOR DRIFT logo is an in-flow banner at the TOP of the console output;
   the prompt is reordered BELOW the output so typed commands push everything up
   and the banner scrolls off the top. Font lives in vd-font.css.
   Phosphor hue matches the live site (cyan #11cab8 / 17,202,184). */

/* ---- console reorder: prompt sits BELOW the output (banner on top) ---- */
/* Top-anchor the terminal (logo near the top of the page) with a bit of padding,
   and let the box hug its content so the prompt sits right under the banner. */
body.vd-banner-active .terminal-stage { align-items: flex-start; padding-top: 6vh; }
body.vd-banner-active .terminal-window,
body.vd-banner-active .terminal-screen,
body.vd-banner-active .terminal-content { height: auto; }

.terminal-content.vd-console { justify-content: flex-start; }
.terminal-content.vd-console .terminal-output {
  order: 1;
  flex: none;          /* hug content so the prompt follows right after the divider */
  height: auto;        /* override the live boot's fixed 29.82em output height */
  max-height: 62vh;    /* cap + scroll once command history fills in */
  overflow: hidden;
}
.terminal-content.vd-console .terminal-header {
  order: 2;
  flex: none;
  height: auto;
  margin: 2.44em 0 0;   /* ~2 line breaks between the divider and the prompt */
}

/* ---- banner ---- */
.vd-banner {
  --phos: #11cab8;
  --hot: #aef9e6;
  --glitch: #24f5cf;
  --dim: rgba(17, 202, 184, 0.45);
  --lf: clamp(6px, 2.15vw, 20px);
  --glow: 0 0 2px rgba(17, 202, 184, 0.82), 0 0 6px rgba(17, 202, 184, 0.34), 0 0 10px rgba(17, 202, 184, 0.08);
  --glow-hot: 0 0 3px rgba(174, 249, 230, 0.88), 0 0 8px rgba(36, 245, 207, 0.42), 0 0 13px rgba(36, 245, 207, 0.12);
  display: block;
  text-align: left;
  padding: 0.6em 0 0.4em;
}

/* loading gauges (progress bars) shown before the logo */
/* Gauges render in #terminal-output during the boot (NOT inside .vd-banner).
   They inherit the boot's Glass TTY look; the ONLY thing needed for alignment is
   white-space:pre so the padding spaces don't collapse (that was the bug). */
.terminal-home .vd-gauge-line { white-space: pre; line-height: 1.42; }

/* logo */
.vd-banner #stage { display: block; width: max-content; max-width: 100%; }
.vd-banner #logo { text-align: left; opacity: 0; }
.vd-banner #logo pre {
  margin: 0;
  font-family: "VD Logo Mono", "DejaVu Sans Mono", "Menlo", "Consolas", "Courier New", monospace;
  display: block;
  width: max-content;
  max-width: 100%;
  text-align: left;
  text-shadow: var(--glow);
}
.vd-banner #vec { font-size: var(--lf, 12px); line-height: 1.02; }
.vd-banner #driftrow {
  display: flex;
  align-items: center;
  width: max-content;
  max-width: 100%;
  margin: 0.12em 0 0 0;   /* start at the logo's left edge so the speed lines (first
     in this row) don't get dragged off-screen-left and clipped. The lines fill the
     indent; DRIFT follows to the right of them. */
  font-size: var(--lf, 12px);
}
.vd-banner #speed {
  display: flex;
  flex-direction: column;
  gap: 0.9em;                /* generous space between the streaks */
  align-items: flex-end;     /* right ends toward the D */
  margin-right: 0.7em;
  transform: translateY(-0.5em);   /* sit slightly ABOVE center. NO skew. */
}
.vd-banner #speed i {
  display: block;
  height: 0.18em;
  background: var(--phos);
  box-shadow: var(--glow);
  border-radius: 1px;
  opacity: 0;                       /* hidden until JS glitches them on */
  transform: scaleX(0);
  transform-origin: right center;   /* streaks grow out from the D side */
}
/* Ref shape: top line longest, both ends taper INWARD going down. LEFT ends step
   right ~0.5em/line (top reaches the logo's left edge), RIGHT ends step left
   ~0.4em/line (follow the D's diagonal). UNIFORM brightness (no per-line opacity
   variance). driftrow margin-left:0 -> lines can't clip. The reveal itself is
   driven in JS (runSpeedGlitch), timed to the DRIFT panel finishing: scramble
   (random flicker + glitch-cyan) then lock hot -> phosphor, all locking together.
   Same scramble->lock language as the VECTOR / DRIFT words. */
.vd-banner #speed i:nth-child(1) { width: 6.7em; margin-right: 0;     }
.vd-banner #speed i:nth-child(2) { width: 5.8em; margin-right: 0.4em; }
.vd-banner #speed i:nth-child(3) { width: 4.9em; margin-right: 0.8em; }
.vd-banner #speed i:nth-child(4) { width: 4em;   margin-right: 1.2em; }

/* Option 1: solid DRIFT (still skewed italic). */
.vd-banner #dft {
  font-size: 1em;
  line-height: 1.02;
  margin: 0;
  color: var(--phos);
  text-shadow: var(--glow);
  transform: skewX(-15deg);
  transform-origin: left center;
}
.vd-banner #logo .g { color: var(--glitch); text-shadow: 0 0 2px rgba(36, 245, 207, 0.7); opacity: 0.9; }
.vd-banner #logo .hot { color: var(--hot); text-shadow: var(--glow-hot); }
.vd-banner #logo.flash { animation: vdlflash 0.5s ease-out; }
@keyframes vdlflash {
  0%   { filter: brightness(2.3) drop-shadow(0 0 14px rgba(174, 249, 230, 0.85)); }
  100% { filter: brightness(1); }
}

/* Option 2 (.drift-outline): hollow DRIFT — bigger + tracking. */
.vd-banner.drift-outline #dft {
  font-size: 1.1em;
  letter-spacing: 0.1em;
  color: #020604;
  text-shadow:
    0.05em 0 0 var(--phos), -0.05em 0 0 var(--phos), 0 0.05em 0 var(--phos), 0 -0.05em 0 var(--phos),
    0.05em 0.05em 0 var(--phos), -0.05em -0.05em 0 var(--phos), 0.05em -0.05em 0 var(--phos), -0.05em 0.05em 0 var(--phos),
    0 0 0.3em rgba(36, 245, 207, 0.5);
}
.vd-banner.drift-outline #dft .g,
.vd-banner.drift-outline #dft .hot { text-shadow: 0 0 2px rgba(36, 245, 207, 0.7); }

/* version line + solid divider beneath the logo (>=2 line breaks of space above) */
/* Container stays fully opaque so the version's scramble glyphs are visible as
   they glitch in (a fade here washed them out). The version is empty until
   glitchText fills it; the divider fades in on .show. */
.vd-banner .vd-meta { margin-top: 1.2em; }
.vd-banner .vd-version {
  display: block;
  font-family: "Glass TTY VT220", "Courier New", monospace;
  font-size: 0.85em;
  letter-spacing: 0.06em;
  color: rgba(17, 202, 184, 0.66);
  text-shadow: 0 0 1px rgba(17, 202, 184, 0.45);   /* tight glow -> crisp small text */
}
/* glitch chars while the version scrambles->locks (matches the logo words) */
.vd-banner .vd-version .g { color: var(--glitch); text-shadow: 0 0 2px rgba(36, 245, 207, 0.7); opacity: 0.9; }
.vd-banner .vd-version .hot { color: var(--hot); text-shadow: var(--glow-hot); }
.vd-banner .vd-divider {
  border: 0;
  border-top: 1px solid rgba(17, 202, 184, 0.55);
  box-shadow: 0 0 6px rgba(17, 202, 184, 0.4);
  margin: 0.45em 0 0;
  opacity: 0;
  transition: opacity 0.5s ease;
}
.vd-banner .vd-meta.show .vd-divider { opacity: 1; }

@media (max-width: 600px) {
  .vd-banner #dft { transform: none; }
  /* keep the slightly-high position on mobile */
  .vd-banner #speed { transform: translateY(-0.5em); }
  /* Banner mode: widen the terminal box to the full screen and shrink the side
     padding so the logo (which fills ~97% of its container) reaches near the
     screen edges. Safe: the boot text is cleared before banner mode, so this
     only affects the logo + the console prompt beneath it. */
  body.vd-banner-active .terminal-window { width: 100vw; max-width: 100vw; }
  body.vd-banner-active .terminal-screen { padding-left: 10px; padding-right: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .vd-banner #speed i { opacity: 1; transform: scaleX(1); background: var(--phos); }
  .vd-banner #logo.flash { animation: none; }
  .vd-banner .vd-meta { transition: none; }
}

/* Noise-dither overlay: breaks up 8-bit banding in the glow halos / dark bg. */
#vd-dither {
  position: fixed;
  inset: 0;
  z-index: 40;
  pointer-events: none;
  opacity: 0.28;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Loadable ASCII SNAKE grid. A <pre> resets font-family to the UA monospace, so
   EVERY console text property must be restated here to match the console output
   (.terminal-home .terminal-output) exactly: Glass TTY, phosphor green, size,
   weight, glow, blur. Scanlines/dither are global overlays that sit on top. */
.terminal-home .vd-snake {
  font-family: "Glass TTY VT220", "Courier New", monospace;
  font-size: min(18px, 3.3vw);   /* 18px like the console; scales down so 50 cols fit narrow screens */
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: 0.035em;
  color: #11cab8;
  text-shadow: 0 0 2px rgba(17, 202, 184, 0.74), 0 0 12px rgba(17, 202, 184, 0.42), 0 0 28px rgba(17, 202, 184, 0.16);
  filter: blur(0.28px);
  white-space: pre;
  margin: 0.35em 0 0.45em;
}
/* head brightest (hot), food a bright pip — same cyan phosphor family as the console */
.terminal-home .vd-snake .s-head { color: #aef9e6; text-shadow: 0 0 4px rgba(174, 249, 230, 0.95), 0 0 9px rgba(36, 245, 207, 0.5); }
.terminal-home .vd-snake .s-food { color: #7ffce8; text-shadow: 0 0 5px rgba(36, 245, 207, 0.9); }

/* Loadable pi streamer — same console match as .vd-snake (a <pre>/div must restate
   the console props explicitly). Body wraps digit blocks. */
.terminal-home .vd-pi {
  font-family: "Glass TTY VT220", "Courier New", monospace;
  font-size: min(18px, 3.3vw);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: #11cab8;
  text-shadow: 0 0 2px rgba(17, 202, 184, 0.74), 0 0 12px rgba(17, 202, 184, 0.42), 0 0 28px rgba(17, 202, 184, 0.16);
  filter: blur(0.28px);
  margin: 0.35em 0 0.5em;
}
.terminal-home .vd-pi .vd-pi-head { opacity: 0.72; margin-bottom: 0.55em; }
.terminal-home .vd-pi .vd-pi-body { word-break: break-all; }   /* continuous digits fill the width */
.terminal-home .vd-pi .vd-pi-stat { opacity: 0.6; margin-top: 0.55em; }

/* In-page "404" takeover (fake404.js). Lives here rather than in an injected
   <style> because the page CSP is `style-src 'self'`, which blocks dynamically
   created style elements. Typography mirrors the console exactly (18px / 1.42 /
   0.035em, same glow + micro-blur); the panel is 53 columns, so the vw/vh terms
   only shrink it below 18px when it would otherwise not fit one screen.
   It cuts in hard (no fade-in) so it can never be left invisible. */
#vd404 {
  position: fixed;
  inset: 0;
  z-index: 120;
  background: #040705;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2vh 12px;
  box-sizing: border-box;
  overflow: hidden;
  font-family: "Glass TTY VT220", "Courier New", monospace;
  font-weight: 400;
  font-size: min(18px, 3.1vw, 3.7vh);
  line-height: 1.42;
  letter-spacing: 0.035em;
  color: #11cab8;
  text-shadow: 0 0 2px rgba(17, 202, 184, 0.74), 0 0 12px rgba(17, 202, 184, 0.42), 0 0 28px rgba(17, 202, 184, 0.16);
  filter: blur(0.28px);
  opacity: 1;   /* no fade-in: a hard cut reads as the crash it follows, and an
                   animation-based fade leaves the overlay invisible wherever
                   animations don't run. The fade-OUT is applied inline in JS. */
}
#vd404 pre { margin: 0; font: inherit; letter-spacing: inherit; white-space: pre; text-align: left; }
#vd404 a {
  color: #aef9e6;
  text-decoration: none;
  cursor: pointer;
  text-shadow: 0 0 4px rgba(174, 249, 230, 0.9), 0 0 9px rgba(36, 245, 207, 0.5);
}
#vd404 a:hover { color: #7ffce8; }
#vd404 .cur {
  display: inline-block;
  width: 0.6em;
  height: 0.95em;
  background: #11cab8;
  vertical-align: text-bottom;
  animation: vd404blink 1.06s steps(2, start) infinite;
}
@keyframes vd404blink { to { visibility: hidden; } }
@media (prefers-reduced-motion: reduce) { #vd404 .cur { animation: none; } }