/* CRT post-processing effects.
   Applied to the screen div. All effects are pure CSS — no canvas
   overhead on top of the channel content.

   Layers (bottom to top, inside .screen):
     1. .surface         — channel content (z-index: 1)
     2. .bug             — channel number overlay (z-index: 2)
     3. .static-canvas   — transition noise (z-index: 3)
     4. .osd             — channel number display (z-index: 4)
     5. .screen::after   — glass recess shadow (z-index: 6)
     6. .screen::before  — CRT effects overlay (z-index: 5, NEW)

   CRT effects:
     - scanlines (horizontal dark lines, subtle)
     - phosphor glow (warm bloom at screen edges)
     - barrel distortion (slight screen curvature)
     - color bleed (chromatic fringe, very subtle)
     - vertical hold jitter (rare, occasional, 0.3s)
*/

/* ---- scanlines ------------------------------------------------------- */

.screen::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  border-radius: inherit;

  /* scanlines: very subtle, adaptive to screen size */
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0, 0, 0, 0.03) 2px,
    rgba(0, 0, 0, 0.03) 3px
  );

  /* phosphor glow: warm bloom around edges, strongest at corners */
  box-shadow:
    inset 0 0 8cqw 3cqw rgba(255, 200, 120, 0.04),
    inset 0 0 3cqw 1cqw rgba(255, 180, 100, 0.03);

  /* slight inner shadow — the tube is slightly darker at edges */
  background:
    radial-gradient(ellipse 95% 90% at 50% 50%, transparent 60%, rgba(0,0,0,0.15) 100%),
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 2px,
      rgba(0, 0, 0, 0.03) 2px,
      rgba(0, 0, 0, 0.03) 3px
    );
}

/* ---- barrel distortion: subtle screen curvature ---------------------- */

.screen {
  /* slight barrel-like curve — the screen bulges outward */
  border-radius: 10px;
  /* inner shadow from the tube edge */
  box-shadow:
    0 0 90px 12px rgba(150, 185, 255, 0.10),
    inset 0 0 20px 8px rgba(0, 0, 0, 0.3);
}

/* ---- color bleed: chromatic fringe on bright content ---------------- */

/* Applied to the ::after as a subtle color shift at edges.
   The glass recess effect already lives on ::after, so we layer
   the chromatic fringe on top of the glass recess. */

.screen::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  border-radius: inherit;

  /* glass recess shadow */
  box-shadow: inset 0 0 5cqw rgba(0, 0, 0, 0.42);

  /* subtle red/blue fringe at edges — like an old tube */
  background:
    radial-gradient(ellipse 100% 100% at 0% 50%, rgba(255,0,0,0.015) 0%, transparent 15%),
    radial-gradient(ellipse 100% 100% at 100% 50%, rgba(0,0,255,0.015) 0%, transparent 15%);
}

/* ---- vertical hold jitter: rare, brief, unsettling ------------------- */

/* Triggered by a CSS custom property animation.
   JavaScript adds .hold-jitter class for ~300ms, then removes it.
   This happens at random intervals (every 2-8 minutes). */

@keyframes hold-jitter {
  0%   { transform: translateY(0); }
  10%  { transform: translateY(-2px); }
  20%  { transform: translateY(1px); }
  30%  { transform: translateY(-3px); }
  40%  { transform: translateY(0); }
  60%  { transform: translateY(2px); }
  70%  { transform: translateY(-1px); }
  85%  { transform: translateY(0); }
  100% { transform: translateY(0); }
}

.hold-jitter {
  animation: hold-jitter 0.3s ease-out;
}

/* ---- warm phosphor shift on the screen background -------------------- */

/* The .surface (channel content) gets a faint warm tint.
   Black backgrounds become slightly warm-black. */

.surface {
  /* warm tint overlay — barely perceptible, like phosphor warmth */
  /* applied via the channel content's own background */
}

/* ---- screen power-on glow: the tube IS the light source -------------- */

/* The screen casts light onto the cabinet. This is handled by
   the .screen box-shadow glow, which increases when the screen
   is bright and decreases during static/dark channels. */

/* ---- reduced motion: strip all effects ------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .hold-jitter {
    animation: none;
  }

  .screen::before {
    background: repeating-linear-gradient(
      0deg,
      transparent,
      transparent 2px,
      rgba(0, 0, 0, 0.02) 2px,
      rgba(0, 0, 0, 0.02) 3px
    );
  }
}