/* =============================================================
   VHS / VCR LAYER
   Four stacked effects, all fixed, all pointer-events:none:
     1. scanlines      — fine horizontal comb
     2. tracking band  — a bright distortion bar crawling upward
     3. flicker        — slow brightness wobble
     4. vignette       — tube curvature falloff at the edges
   Every one dies under prefers-reduced-motion. The whole layer
   is behind a body class so it can be switched off in one place.
   ============================================================= */

.vhs {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9997;
}

/* ---------------------------------------------------- 1. scanlines */
.vhs-scanlines {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    rgba(0, 0, 0, 0.16) 0px,
    rgba(0, 0, 0, 0.16) 1px,
    transparent 1px,
    transparent 3px
  );
  opacity: 0.55;
}

/* ------------------------------------------------ 2. tracking band */
/* The giveaway of a worn tape: a band of misalignment drifting up
   the picture. Slow and mostly subtle, with one hard jump. */
.vhs-tracking {
  position: absolute;
  left: 0;
  right: 0;
  height: 90px;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(255, 255, 255, 0.03) 30%,
    rgba(0, 255, 0, 0.045) 50%,
    rgba(255, 255, 255, 0.03) 70%,
    transparent 100%
  );
  filter: blur(0.5px);
  animation: vhs-tracking 9s linear infinite;
}

@keyframes vhs-tracking {
  0%   { top: 100%; opacity: 0; }
  4%   { opacity: 1; }
  46%  { opacity: 1; }
  50%  { opacity: 0.35; }
  96%  { opacity: 1; }
  100% { top: -90px; opacity: 0; }
}

/* -------------------------------------------------- 3. tube flicker */
.vhs-flicker {
  position: absolute;
  inset: 0;
  background: rgba(120, 255, 150, 0.014);
  animation: vhs-flicker 4.4s steps(3) infinite;
}

@keyframes vhs-flicker {
  0%, 100% { opacity: 0.35; }
  33%      { opacity: 0.8; }
  66%      { opacity: 0.15; }
}

/* -------------------------------------------------- 4. tube vignette */
.vhs-vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse at center,
    transparent 55%,
    rgba(0, 0, 0, 0.35) 100%
  );
}

/* ------------------------------------------------------ chroma bleed */
/* Colour separation on large display type — the one place a real VHS
   would show it worst. Applied to the hero and page headings only;
   over body copy it would just look broken. */
.vhs-chroma {
  text-shadow:
    0.9px 0 0 rgba(255, 0, 80, 0.35),
    -0.9px 0 0 rgba(0, 200, 255, 0.28);
}

/* One hard dropout every few seconds: the tape losing sync briefly. */
.vhs-dropout {
  position: absolute;
  inset: 0;
  opacity: 0;
  background: linear-gradient(
    180deg,
    transparent 48%,
    rgba(255, 255, 255, 0.06) 49%,
    rgba(0, 255, 0, 0.05) 50%,
    transparent 52%
  );
  animation: vhs-dropout 11s steps(1) infinite;
}

@keyframes vhs-dropout {
  0%, 92%   { opacity: 0; transform: translateY(0); }
  93%       { opacity: 1; transform: translateY(-6px); }
  94%       { opacity: 0; }
  95%       { opacity: 1; transform: translateY(4px); }
  96%, 100% { opacity: 0; transform: translateY(0); }
}

/* --------------------------------------------------------- opt out */
.no-vhs .vhs { display: none; }

@media (prefers-reduced-motion: reduce) {
  .vhs-tracking,
  .vhs-flicker,
  .vhs-dropout { animation: none; }
  .vhs-tracking,
  .vhs-dropout { opacity: 0; }
  .vhs-chroma  { text-shadow: none; }
}

/* The comb is dense enough on a phone to hurt legibility; soften it. */
@media (max-width: 768px) {
  .vhs-scanlines { opacity: 0.3; }
  .vhs-tracking  { display: none; }
}