/* ============================================
   CRT MONITOR EFFECTS
   Pure CSS overlay that stacks on any theme.
   Activated by .crt-active on #terminal.
   Zero JS per frame — all pseudo-elements + keyframes.
   ============================================ */

/* ── CRT Custom Properties ───────────────── */

#terminal.crt-active {
    --crt-scanline-opacity: 0.08;
    --crt-glow-color: color-mix(in srgb, var(--t-green) 60%, #b0ffb0);
    --crt-glow-spread: color-mix(in srgb, var(--t-green) 30%, transparent);
    --crt-vignette-strength: 0.45;
    --crt-fringe-offset: 0.3px;
}

/* ── Scanlines (::before) ────────────────── */

#terminal.crt-active {
    position: relative;
}

#terminal.crt-active::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 200;
    pointer-events: none;
    background: repeating-linear-gradient(
        to bottom,
        transparent 0px,
        transparent 2px,
        rgba(0, 0, 0, var(--crt-scanline-opacity)) 2px,
        rgba(0, 0, 0, var(--crt-scanline-opacity)) 4px
    );
    animation: crtFlicker 8s steps(4, end) infinite;
}

/* ── Screen Curvature / Vignette (::after) ── */

#terminal.crt-active::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 201;
    pointer-events: none;
    background: radial-gradient(
        ellipse 80% 80% at 50% 50%,
        transparent 55%,
        rgba(0, 0, 0, calc(var(--crt-vignette-strength) * 0.4)) 75%,
        rgba(0, 0, 0, var(--crt-vignette-strength)) 100%
    );
    border-radius: inherit;
}

/* ── Phosphor Glow on Text ───────────────── */

#terminal.crt-active .terminal-content,
#terminal.crt-active .terminal-lines,
#terminal.crt-active .line,
#terminal.crt-active .input-field {
    text-shadow:
        0 0 3px var(--crt-glow-spread),
        0 0 8px var(--crt-glow-spread);
}

/* Prompt segments get a slightly warmer glow */
#terminal.crt-active .prompt-user {
    text-shadow:
        0 0 4px var(--crt-glow-spread),
        0 0 10px var(--crt-glow-spread);
}

/* ── Subtle Color Fringing ───────────────── */

#terminal.crt-active .terminal-content {
    filter:
        drop-shadow(var(--crt-fringe-offset) 0 0 rgba(255, 60, 60, 0.12))
        drop-shadow(calc(var(--crt-fringe-offset) * -1) 0 0 rgba(60, 255, 255, 0.12));
}

/* ── Flicker Animation ───────────────────── */

@keyframes crtFlicker {
    0%   { opacity: 0.97; }
    13%  { opacity: 1.0; }
    25%  { opacity: 0.98; }
    38%  { opacity: 1.0; }
    50%  { opacity: 0.97; }
    63%  { opacity: 0.99; }
    75%  { opacity: 1.0; }
    88%  { opacity: 0.98; }
    100% { opacity: 1.0; }
}

/* ── Theme-Specific Tuning ───────────────── */

/* Matrix theme: more intense glow (already has green emphasis) */
body.theme-matrix #terminal.crt-active {
    --crt-scanline-opacity: 0.10;
    --crt-glow-color: color-mix(in srgb, var(--t-green) 70%, #b0ffb0);
    --crt-glow-spread: color-mix(in srgb, var(--t-green) 40%, transparent);
    --crt-vignette-strength: 0.55;
}

/* Catppuccin theme: softer, warmer glow */
body.theme-catppuccin #terminal.crt-active {
    --crt-scanline-opacity: 0.06;
    --crt-glow-color: color-mix(in srgb, var(--t-green) 45%, #d4ffd4);
    --crt-glow-spread: color-mix(in srgb, var(--t-green) 22%, transparent);
    --crt-vignette-strength: 0.35;
}

/* ── Overlay Compat ──────────────────────── */
/* CRT pseudo-elements shouldn't cover overlays (shop, email, etc.) */

#terminal.crt-active .shop-overlay.active,
#terminal.crt-active .email-overlay.active,
#terminal.crt-active .market-overlay.active,
#terminal.crt-active .snake-overlay.active {
    z-index: 300;
}

/* ── Reduced Motion ──────────────────────── */

@media (prefers-reduced-motion: reduce) {
    #terminal.crt-active::before {
        animation: none;
        opacity: 1;
    }
}