/* ============================================================
   CRT Effect
   Injected into #wrapper via main.js — confined to the site
   window by overflow:hidden on #wrapper.
   ============================================================ */

/* ─── Tuning variables ──────────────────────────────────────
   All CRT knobs live here. Defaults ship with moderate scanlines
   and a dark vignette.                                          */
:root {
  /* Scanlines */
  --crt-scanline-size:  10px;                    /* row height (px)            */
  --crt-scanline-dark:  rgba(0, 0, 0, 0.20);     /* dark stripe opacity        */
  /* Phosphor tint — set to `transparent` to disable.
     Alternatives: amber → rgba(255, 160, 20, 0.05)
                   blue  → rgba(34,  136, 255, 0.05)          */
  --crt-scanline-tint:  rgba(0, 255, 60, 0.04);

  /* Vignette */
  --crt-vignette-color: rgba(11, 11, 11, 0.55);  /* screen-edge darkening      */
}

/* ─── Scanline drift animation ──────────────────────────────
   Animates background-position so the scanline grid itself
   slowly drifts up/down rather than flickering or sweeping.
   Values are non-multiples of --crt-scanline-size so motion
   is visible between keyframes.
   Adjust duration (12s) or px values to change the speed/range.
   To freeze: remove the `animation:` line from #crt-overlay.   */
@keyframes crt-scan {
  0%   { background-position: 0 0px,   center; }
  15%  { background-position: 0 -3px,  center; }
  30%  { background-position: 0 -1px,  center; }
  50%  { background-position: 0 -5px,  center; }
  70%  { background-position: 0 -2px,  center; }
  85%  { background-position: 0 -7px,  center; }
  100% { background-position: 0 0px,   center; }
}

/* ─── Overlay element ───────────────────────────────────────
   div#crt-overlay is the first child of #wrapper in the HTML
   layout. Sitting at z-index:0, it is below all content
   children (which have position:relative set below so they
   paint after it in document order).                           */
#crt-overlay {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(
      0deg,
      var(--crt-scanline-tint) 0px,
      var(--crt-scanline-tint) 1px,
      var(--crt-scanline-dark) 1px,
      var(--crt-scanline-dark) 2px,
      transparent              2px,
      transparent              var(--crt-scanline-size)
    ),
    radial-gradient(ellipse at center, transparent 50%, var(--crt-vignette-color) 100%);
  background-position: 0 0, center;
  animation: crt-scan 12s ease-in-out infinite;
}

/* ─── Horizontal sync glitch ────────────────────────────────
   Simulates brief horizontal sync loss — the wrapper snaps
   left/right ~160ms once per 8-second cycle, then corrects.
   The brightness bump mimics the phosphor flare on resync.
   step-end timing makes each shift instantaneous (no easing). */
@keyframes crt-glitch {
  0%, 94%, 100% { transform: translateX(0);    filter: none; }
  95%           { transform: translateX(-3px); filter: brightness(1.08); }
  96%           { transform: translateX(2px);  filter: brightness(0.95); }
  97%           { transform: translateX(0);    filter: none; }
}

/* ─── Content layering ──────────────────────────────────────
   position:relative makes each child a positioned element so
   it paints after #crt-overlay in document order, landing on
   top of it without needing an explicit z-index.               */
#header,
#navbar,
#marquee-strip,
#content-area,
#footer {
  position: relative;
}