/* retro.css — Per-board retro terminal visual effects
 *
 * Board 0 (tek): scanlines only, very subtle
 * Board 1 (edu): scanlines medium + soft vignette
 * Board 2 (civ): scanlines light + CSS-animated flicker (deterministic)
 * Board 3 (rhb): canvas noise only, no scanlines
 * Board 4 (msc): heavy scanlines + strong vignette + JS random flicker
 * Board 5 (qna): full combo — scanlines + vignette + noise + harsh flicker
 */

/* ── Base overlay ────────────────────────────────────────────────────── */
.retro-layer {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
}

/* ── Scanlines ────────────────────────────────────────────────────────
   Repeating-linear-gradient horizontal bars.
   Each band: 2px transparent + 2px dark = 4px total period (visible at any zoom).
   Opacity of the dark stripe varies by intensity.
──────────────────────────────────────────────────────────────────────── */

/* Board 0 (tek) — barely there, 4% dark stripe */
.retro-scanlines-light {
    z-index: 1100;
    background-image: repeating-linear-gradient(
        to bottom,
        transparent          0px,
        transparent          2px,
        rgba(0, 0, 0, 0.04)  2px,
        rgba(0, 0, 0, 0.04)  4px
    );
}

/* Board 1 (edu), Board 5 (qna) — noticeable, 10% dark stripe */
.retro-scanlines-medium {
    z-index: 1100;
    background-image: repeating-linear-gradient(
        to bottom,
        transparent          0px,
        transparent          2px,
        rgba(0, 0, 0, 0.10)  2px,
        rgba(0, 0, 0, 0.10)  4px
    );
}

/* Board 2 (civ) — light, 6% (same band width, slightly less than medium) */
.retro-scanlines-faint {
    z-index: 1100;
    background-image: repeating-linear-gradient(
        to bottom,
        transparent          0px,
        transparent          2px,
        rgba(0, 0, 0, 0.06)  2px,
        rgba(0, 0, 0, 0.06)  4px
    );
}

/* Board 4 (msc) — bold, 3px dark stripe out of 5px period, 18% */
.retro-scanlines-heavy {
    z-index: 1100;
    background-image: repeating-linear-gradient(
        to bottom,
        transparent          0px,
        transparent          2px,
        rgba(0, 0, 0, 0.18)  2px,
        rgba(0, 0, 0, 0.18)  5px
    );
}

/* ── Vignette ─────────────────────────────────────────────────────────
   Radial gradient, dark at edges, transparent at centre.
──────────────────────────────────────────────────────────────────────── */

/* Board 1 (edu) — gentle darkening from 65% outward */
.retro-vignette-soft {
    z-index: 1050;
    background: radial-gradient(
        ellipse at 50% 50%,
        transparent          65%,
        rgba(0, 0, 0, 0.28)  100%
    );
}

/* Board 5 (qna) — medium, starts at 55% */
.retro-vignette-medium {
    z-index: 1050;
    background: radial-gradient(
        ellipse at 50% 50%,
        transparent          55%,
        rgba(0, 0, 0, 0.48)  100%
    );
}

/* Board 4 (msc) — strong, starts at 40% */
.retro-vignette-strong {
    z-index: 1050;
    background: radial-gradient(
        ellipse at 50% 50%,
        transparent          40%,
        rgba(0, 0, 0, 0.68)  100%
    );
}

/* ── CSS Flicker (Board 2 — civ) ──────────────────────────────────────
   A fixed dark overlay that briefly appears at irregular keyframe
   intervals. Very faint — barely perceptible, subliminal.
   steps(1) makes changes instantaneous rather than faded.
   12s cycle keeps events well spread out.
──────────────────────────────────────────────────────────────────────── */
@keyframes retro-flicker-kf {
    0%    { background-color: transparent;        }
    1%    { background-color: rgba(0,0,0,0.022);  }
    2%    { background-color: transparent;        }
    3%    { background-color: rgba(0,0,0,0.014);  }
    4%    { background-color: transparent;        }
    37%   { background-color: transparent;        }
    38%   { background-color: rgba(0,0,0,0.018);  }
    39%   { background-color: transparent;        }
    71%   { background-color: transparent;        }
    72%   { background-color: rgba(0,0,0,0.026);  }
    73%   { background-color: rgba(0,0,0,0.010);  }
    74%   { background-color: transparent;        }
    93%   { background-color: transparent;        }
    94%   { background-color: rgba(0,0,0,0.016);  }
    95%   { background-color: transparent;        }
    100%  { background-color: transparent;        }
}

.retro-flicker-css {
    z-index: 1200;
    animation: retro-flicker-kf 12s steps(1) infinite;
}

/* ── Noise canvas (injected by JS) ───────────────────────────────────
   The canvas element itself is positioned fixed by JS; this class just
   sets z-index and ensures block display.
──────────────────────────────────────────────────────────────────────── */
.retro-noise-canvas {
    z-index: 1150;
    display: block;
}