/* THE GOD TERMINAL — opening sequence (#boot) and first-run hint (#hint).
 * The boot is always Phosphor, so it carries its own fixed colours rather than
 * palette tokens; the hint follows the live palette. */

/* ───────── boot ───────── */
#boot {
  --b-text: #3dff7a;
  --b-bright: #e2ffea;
  --b-dim: #23a04c;
  --b-faint: #1a6e36;
  --b-ok: #b4ff4d;
  --b-warn: #ffe066;
  --b-info: #4dffe1;
  --b-glow: rgba(61, 255, 122, 0.55);
  /* A hair short of opaque on purpose (here and on .boot-screen): an opaque cover lets the browser
   * skip rasterising the dashboard underneath, which would then happen mid-wipe and stutter it. */
  background: rgba(0, 0, 0, 0.996);
  overflow: hidden;
  cursor: default;
}
#boot.is-leaving { background: transparent; pointer-events: none; }
/* Dark tube while the page settles: layers drawn too faintly to see, so their first raster lands on black. */
#boot.is-warming .boot-shutter,
#boot.is-warming .boot-flash,
#boot.is-warming .boot-noise { opacity: 0.004; }

.boot-shutter { position: absolute; inset: 0; overflow: hidden; }

/* The tube: phosphor-lit glass with scanlines and a vignette. */
.boot-screen {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 1rem;
  background:
    radial-gradient(ellipse 70% 62% at 50% 50%, rgba(18, 82, 38, 0.42), rgba(4, 26, 12, 0.5) 52%, rgba(0, 0, 0, 0) 100%),
    rgba(1, 4, 2, 0.996);
  animation: boot-flicker 4.2s steps(1) infinite;
}
.boot-screen::before {
  content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0.36) 0 1px, transparent 1px 3px);
}
.boot-screen::after {
  content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: radial-gradient(ellipse 90% 85% at 50% 50%, transparent 58%, rgba(0, 0, 0, 0.82) 100%);
  box-shadow: inset 0 0 9rem 2rem rgba(0, 0, 0, 0.85);
}
.boot-band {
  position: absolute; left: 0; right: 0; top: 0; height: 24vh; z-index: 2; pointer-events: none;
  background: linear-gradient(to bottom, transparent, rgba(61, 255, 122, 0.05) 50%, transparent);
  animation: boot-band 3.4s linear infinite;
}
.boot-noise {
  position: absolute; inset: -160px; z-index: 4; pointer-events: none;
  opacity: 0;
  background-size: 160px 160px;
  mix-blend-mode: screen;
  animation: boot-noise 0.2s steps(1) infinite;
}

/* Power-on beam, bloom flash, and the exit scanline. */
.boot-beam {
  position: absolute; left: 0; right: 0; top: 50%; height: 3px; margin-top: -1.5px; z-index: 5;
  opacity: 0; pointer-events: none;
  background: linear-gradient(90deg, transparent, #c8ffd8 9%, #fff 50%, #c8ffd8 91%, transparent);
  box-shadow: 0 0 12px 2px rgba(61, 255, 122, 0.9), 0 0 48px 10px rgba(61, 255, 122, 0.4);
}
.boot-flash {
  position: absolute; inset: 0; z-index: 6; opacity: 0; pointer-events: none;
  background: radial-gradient(ellipse 72% 60% at 50% 50%, rgba(232, 255, 238, 0.95), rgba(61, 255, 122, 0.45) 45%, rgba(0, 30, 10, 0) 88%);
}
.boot-wipe {
  position: absolute; left: 0; right: 0; top: 0; height: 2px; margin-top: -1px; z-index: 7;
  opacity: 0; pointer-events: none;
  background: #f0fff4;
  box-shadow: 0 0 10px 2px rgba(61, 255, 122, 0.95), 0 0 60px 14px rgba(61, 255, 122, 0.35);
}
.boot-wipe::before {
  content: ''; position: absolute; left: 0; right: 0; bottom: 100%; height: 6rem;
  background: linear-gradient(to bottom, transparent, rgba(61, 255, 122, 0.16));
}

/* ───────── the text ───────── */
.boot-term {
  position: relative; z-index: 1;
  width: 48ch; max-width: 100%; min-width: 0;
  font: 500 clamp(0.8rem, 1.6vw, 2rem) / 1.62 var(--font-mono);
  color: var(--b-text);
  white-space: pre;
  text-shadow:
    -0.05em 0 0.02em rgba(255, 50, 90, 0.2),
    0.05em 0 0.02em rgba(40, 190, 255, 0.2),
    0 0 0.32em var(--b-glow),
    0 0 1.1em rgba(61, 255, 122, 0.24);
}
.bt-row { position: relative; display: flex; align-items: baseline; min-height: 1.62em; }
.bt-wrap { flex-wrap: wrap; }
.bt-label { position: relative; flex: none; }
.bt-title { color: var(--b-bright); font-weight: 800; }
.bt-id { color: var(--b-info); font-weight: 700; }
.bt-hot {
  font-weight: inherit;
  color: #fff;
  text-shadow: 0 0 0.25em #fff, 0 0 0.7em var(--b-text), 0 0 1.4em var(--b-glow);
}
.bt-lead {
  flex: 1 1 auto; min-width: 1ch;
  margin: 0 0.6ch;
  overflow: hidden;
  color: var(--b-faint);
  text-shadow: 0 0 0.3em rgba(61, 255, 122, 0.3);
  clip-path: inset(0 100% 0 0);
}
.bt-status { position: relative; flex: none; display: inline-block; font-weight: 800; transform-origin: 50% 60%; }
.bt-status.is-counting { color: var(--b-dim); font-weight: 700; }
.bt-status.is-ok { color: var(--b-ok); text-shadow: 0 0 0.35em rgba(180, 255, 77, 0.75), 0 0 1em rgba(180, 255, 77, 0.3); }
.bt-status.is-warn { color: var(--b-warn); text-shadow: 0 0 0.35em rgba(255, 224, 102, 0.75), 0 0 1em rgba(255, 224, 102, 0.3); }
.bt-status.is-info { color: var(--b-info); text-shadow: 0 0 0.35em rgba(77, 255, 225, 0.75), 0 0 1em rgba(77, 255, 225, 0.3); }
.bt-ready {
  color: var(--b-bright); font-weight: 800;
  text-shadow: 0 0 0.3em var(--b-text), 0 0 1.2em var(--b-glow), 0 0 2.4em rgba(61, 255, 122, 0.3);
}
.bt-row:last-child { transform-origin: 0 50%; }

.bt-cursor {
  position: absolute; left: 100%; top: 0.2em;
  width: 0.58em; height: 1.18em; margin-left: 0.12em;
  background: var(--b-text);
  box-shadow: 0 0 0.45em var(--b-glow), 0 0 1em rgba(61, 255, 122, 0.3);
}
.bt-cursor.is-blink { animation: boot-blink 1.06s steps(1) infinite; }

.bt-rule {
  height: 1px; margin: 0.35em 0 0.55em;
  background: linear-gradient(90deg, var(--b-text), rgba(61, 255, 122, 0.12));
  box-shadow: 0 0 0.5em var(--b-glow);
  transform: scaleX(0); transform-origin: 0 50%;
}

/* Segmented progress bar: white backfill jumps, green fill catches up. */
.bt-bar {
  position: relative;
  height: 0.62em; margin: 0.75em 0 0.6em;
  border: 1px solid rgba(61, 255, 122, 0.32);
  border-radius: 3px;
  box-shadow: 0 0 0.6em -0.1em rgba(61, 255, 122, 0.35), inset 0 0 0.5em rgba(61, 255, 122, 0.12);
  transform: scaleX(0); transform-origin: 0 50%;
}
.bt-bar-track {
  position: absolute; inset: 2px;
  -webkit-mask: repeating-linear-gradient(90deg, #000 0 0.8em, transparent 0.8em 1em);
  mask: repeating-linear-gradient(90deg, #000 0 0.8em, transparent 0.8em 1em);
}
.bt-bar i { position: absolute; inset: 0; transform: scaleX(0); transform-origin: 0 50%; }
.bt-bar-back { background: #fff; transition: transform 110ms cubic-bezier(.2, .8, .2, 1); }
.bt-bar-fill {
  background: linear-gradient(90deg, #17b84c, var(--b-text) 55%, #c6ffd6);
  transition: transform 300ms cubic-bezier(.3, .7, .2, 1) 150ms;
}

@keyframes boot-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes boot-flicker {
  0%, 100% { opacity: 1; }
  9% { opacity: 0.94; } 10% { opacity: 1; }
  46% { opacity: 0.97; } 47% { opacity: 1; }
  73% { opacity: 0.95; } 74% { opacity: 1; }
}
@keyframes boot-band { from { transform: translateY(-26vh); } to { transform: translateY(104vh); } }
@keyframes boot-noise {
  0% { transform: translate(0, 0); }
  25% { transform: translate(-61px, 37px); }
  50% { transform: translate(43px, -71px); }
  75% { transform: translate(-29px, -17px); }
}

/* ───────── first-run hint ───────── */
.hint-box {
  position: absolute;
  display: grid; place-items: center;
  animation: hint-fade 420ms var(--d, 0ms) both ease-out;
}
.hint-scrim {
  position: absolute;
  width: min(54rem, 130%); aspect-ratio: 2.1;
  background: radial-gradient(closest-side,
    color-mix(in srgb, var(--bg) 94%, transparent),
    color-mix(in srgb, var(--bg) 78%, transparent) 55%,
    transparent);
}
.hint-card {
  position: relative;
  display: grid; justify-items: center; gap: 0.6rem;
  padding: 1.75rem 2.75rem 1.6rem;
  text-align: center;
}
.hint-corner {
  position: absolute; width: 1.5rem; height: 1.5rem;
  border: 2px solid var(--line-bright);
  filter: drop-shadow(0 0 calc(6px * var(--glow-k)) var(--glow));
  animation: hint-corner 560ms var(--d, 0ms) both cubic-bezier(.2, 1.3, .4, 1);
}
.hint-tl { top: 0; left: 0; border-right: 0; border-bottom: 0; border-top-left-radius: 6px; --from: -14px, -14px; }
.hint-tr { top: 0; right: 0; border-left: 0; border-bottom: 0; border-top-right-radius: 6px; --from: 14px, -14px; }
.hint-bl { bottom: 0; left: 0; border-right: 0; border-top: 0; border-bottom-left-radius: 6px; --from: -14px, 14px; }
.hint-br { bottom: 0; right: 0; border-left: 0; border-top: 0; border-bottom-right-radius: 6px; --from: 14px, 14px; }

.hint-keys { display: flex; gap: 0.5rem; margin-bottom: 0.35rem; }
.hint-keys kbd {
  min-width: 2.4em; padding: 0.3em 0.55em;
  font-size: 1.25rem;
  border-bottom-width: 3px;
  box-shadow: 0 0 calc(10px * var(--glow-k)) -4px var(--glow);
  animation:
    hint-pop 420ms calc(var(--d, 0ms) + var(--i) * 70ms) both cubic-bezier(.2, 1.5, .4, 1),
    hint-key 1.6s calc(var(--d, 0ms) + 500ms + var(--i) * 120ms) infinite;
}
.hint-tap { position: relative; width: 3.25rem; height: 3.25rem; margin-bottom: 0.35rem; animation: hint-pop 420ms var(--d, 0ms) both cubic-bezier(.2, 1.5, .4, 1); }
.hint-tap b {
  position: absolute; inset: 30%;
  border-radius: 50%;
  background: var(--text-bright);
  box-shadow: 0 0 14px var(--glow);
  animation: hint-tap-dot 1.4s var(--d, 0ms) infinite;
}
.hint-tap i {
  position: absolute; inset: 0;
  border: 2px solid var(--line-bright); border-radius: 50%;
  animation: hint-ripple 1.4s var(--d, 0ms) infinite ease-out;
}
.hint-tap i + i { animation-delay: calc(var(--d, 0ms) + 0.25s); }

.hint-title {
  font: 400 clamp(3rem, 4.6vw, 4.75rem) / 0.95 var(--font-display);
  letter-spacing: 0.05em;
  color: var(--text-bright);
  white-space: nowrap;
  text-shadow: 0 0 2px var(--text-bright), 0 0 calc(4px + 16px * var(--glow-k)) var(--glow);
  animation: hint-power 620ms calc(var(--d, 0ms) + 80ms) both cubic-bezier(.2, .9, .3, 1);
}
.hint-sub {
  font-size: 1.25rem; font-weight: 500;
  color: var(--text);
  text-shadow: var(--text-glow);
  animation: hint-rise 480ms calc(var(--d, 0ms) + 220ms) both cubic-bezier(.2, 1, .3, 1);
}
.hint-extra {
  display: flex; align-items: center; gap: 0.55rem;
  margin-top: 0.35rem;
  font-size: 1rem; font-weight: 500;
  color: var(--dim);
  animation: hint-rise 480ms calc(var(--d, 0ms) + 320ms) both cubic-bezier(.2, 1, .3, 1);
}
.hint-extra kbd { font-size: 0.9375rem; }
.hint-timer {
  position: absolute; left: 24%; right: 24%; bottom: 0; height: 2px;
  border-radius: 2px;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent);
  opacity: 0.75;
  animation: hint-timer var(--life, 5s) var(--d, 0ms) both linear;
}

@keyframes hint-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes hint-corner { from { opacity: 0; transform: translate(var(--from)); } to { opacity: 1; transform: none; } }
@keyframes hint-pop { from { opacity: 0; transform: translateY(-10px) scale(0.6); } to { opacity: 1; transform: none; } }
@keyframes hint-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes hint-power {
  0% { opacity: 0; transform: scale(1.25, 0.04); filter: brightness(3); }
  35% { opacity: 1; transform: scale(0.98, 1.12); filter: brightness(1.8); }
  60% { transform: scale(1.01, 0.96); }
  100% { opacity: 1; transform: none; filter: none; }
}
@keyframes hint-key {
  0%, 22%, 100% { transform: none; }
  8% {
    transform: translateY(3px) scale(0.94);
    color: var(--bg);
    background: var(--text-bright);
    border-color: var(--text-bright);
    box-shadow: 0 0 calc(8px + 14px * var(--glow-k)) var(--glow);
  }
}
@keyframes hint-ripple { from { transform: scale(0.55); opacity: 0.9; } to { transform: scale(1.7); opacity: 0; } }
@keyframes hint-tap-dot { 0%, 100% { transform: scale(1); } 12% { transform: scale(0.72); } }
@keyframes hint-timer { from { transform: scaleX(1); } to { transform: scaleX(0); } }

@media (max-width: 599px) {
  /* 40 columns edge to edge (JetBrains Mono advances 0.6em): the longest check still fits on one line. */
  .boot-term { width: 40ch; font-size: calc((100vw - 2.5rem) / 24); }
  .hint-card { padding: 1.4rem 1.75rem 1.3rem; }
  .hint-sub { font-size: 1.125rem; }
}

/* Reduced motion: no flicker, noise, rolling band or looping key demo; fades stay. */
html[data-reduced-motion="on"] .boot-screen,
html[data-reduced-motion="on"] .bt-cursor.is-blink { animation: none; }
html[data-reduced-motion="on"] .boot-band,
html[data-reduced-motion="on"] .boot-noise { display: none; }
html[data-reduced-motion="on"] .hint-keys kbd,
html[data-reduced-motion="on"] .hint-tap,
html[data-reduced-motion="on"] .hint-tap b,
html[data-reduced-motion="on"] .hint-tap i,
html[data-reduced-motion="on"] .hint-corner,
html[data-reduced-motion="on"] .hint-title,
html[data-reduced-motion="on"] .hint-sub,
html[data-reduced-motion="on"] .hint-extra { animation: hint-fade 420ms var(--d, 0ms) both ease-out; }