/* ═══ CRT / phosphor tube ═════════════════════════════════════════════
   Everything here is decorative and lives above the page at z-index 60,
   pointer-events:none. `crt off` (html.crt-off) kills the lot in one pass.
   ─────────────────────────────────────────────────────────────────────── */

#crt {
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
}

/* ── scanlines ───────────────────────────────────────────────────────── */
#crt::before {
  content: "";
  position: absolute;
  inset: 0;
  mix-blend-mode: multiply;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0 2px,
    rgb(0 0 0 / var(--scanline-alpha)) 2px 4px
  );
}

/* ── refresh bar: the slow bright band rolling down the tube ─────────── */
/* transform only — compositor-safe, no repaint. */
#crt::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -30vh;
  height: 26vh;
  background: linear-gradient(
    to bottom,
    transparent,
    rgb(var(--phosphor-rgb) / .028) 45%,
    rgb(var(--phosphor-rgb) / .045) 55%,
    transparent
  );
  will-change: transform;
  animation: sweep 8s linear infinite;
}
@keyframes sweep { to { transform: translate3d(0, 140vh, 0); } }

/* ── vignette + tube edge ────────────────────────────────────────────── */
#screen::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 55;
  pointer-events: none;
  background: radial-gradient(ellipse at center,
              transparent 52%, rgb(0 0 0 / .88) 100%);
  box-shadow: inset 0 0 180px rgb(0 0 0 / .9);
}

/* ── phosphor flicker ────────────────────────────────────────────────── */
/* opacity only. The 4% dip is the "mains hum" tell. */
#screen { animation: flicker 5.5s infinite steps(1); }
@keyframes flicker {
  0%, 100% { opacity: 1; }
  3%   { opacity: .985; }
  3.5% { opacity: 1; }
  47%  { opacity: 1; }
  47.6%{ opacity: .96; }
  48%  { opacity: 1; }
  72%  { opacity: .99; }
  72.4%{ opacity: 1; }
}

/* Header wordmark gets a whisper of aberration. Body text never does. */
#brand .wordmark {
  text-shadow:
    -0.5px 0 0 rgb(255 0 80 / .30),
     0.5px 0 0 rgb(0 180 255 / .30),
    var(--glow);
}

/* ═══ escape hatch: `crt off` ═════════════════════════════════════════ */
html.crt-off #crt,
html.crt-off #screen::after,
html.crt-off .ascii-aberr { display: none; }

html.crt-off #screen { animation: none; border-radius: 0; }

html.crt-off #terminal,
html.crt-off .ascii-main,
html.crt-off #brand .feather,
html.crt-off #brand .wordmark {
  text-shadow: none;
  filter: none;
}
html.crt-off .caret { box-shadow: none; }

/* ═══ accessibility ═══════════════════════════════════════════════════ */

/* Motion off. Scanlines and vignette STAY — they are not motion. */
@media (prefers-reduced-motion: reduce) {
  #crt::after,
  #screen,
  #screen.shake,
  .flash.fire,
  .caret,
  .tap-hint {
    animation: none !important;
  }
  .caret { opacity: 1; }
  * { transition-duration: .01ms !important; }
}

/* Turn the tube down, turn the text up. */
@media (prefers-contrast: more) {
  :root {
    --phosphor: #7cff9f;
    --scanline-alpha: .10;
    --glow: 0 0 2px rgb(124 255 159 / .6);
  }
  .ascii-aberr { display: none; }
  #brand .wordmark { text-shadow: var(--glow); }
  .l-dim, .l-echo { color: #a8ffc2; }
}