/* ═══════════════════════════════════════════════════════
   CRT EFFECTS — Scanlines, Glow, Flicker, Vignette
   ═══════════════════════════════════════════════════════ */

/* ─── CRT Screen Frame ───────────────────────────────── */

#terminal {
    border-radius: 18px;
    box-shadow:
        inset 0 0 80px rgba(0, 0, 0, 0.6),
        0 0 15px var(--glow-color),
        0 0 50px rgba(0, 0, 0, 0.9);
    background:
        radial-gradient(
            ellipse at center,
            var(--bg-secondary) 0%,
            var(--bg-primary) 65%,
            #000 100%
        );
}

/* ─── Scanlines Overlay ──────────────────────────────── */

#crt-overlay {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 2000;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        var(--scanline-color) 2px,
        var(--scanline-color) 4px
    );
    mix-blend-mode: multiply;
}

/* ─── Screen Flicker ─────────────────────────────────── */

#crt-overlay::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(18, 16, 16, 0);
    animation: flicker 8s infinite;
    pointer-events: none;
}

@keyframes flicker {
    0%    { opacity: 0; }
    3%    { opacity: 0.03; }
    6%    { opacity: 0; }
    7%    { opacity: 0.04; }
    8%    { opacity: 0; }
    10%   { opacity: 0; }
    11%   { opacity: 0.03; }
    12%   { opacity: 0; }
    89%   { opacity: 0; }
    90%   { opacity: 0.04; }
    92%   { opacity: 0; }
    95%   { opacity: 0.02; }
    97%   { opacity: 0; }
    100%  { opacity: 0; }
}

/* ─── Vignette Effect ────────────────────────────────── */

#crt-overlay::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(
        ellipse at center,
        transparent 55%,
        rgba(0, 0, 0, 0.45) 100%
    );
    pointer-events: none;
}

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

#output,
#input-line {
    text-shadow: 0 0 4px var(--glow-color);
}

/* ─── Smooth Theme Transitions ───────────────────────── */

#terminal,
#output,
#output .line,
#input-line,
.prompt,
#cmd-input {
    transition:
        color 0.6s ease,
        background 0.6s ease,
        text-shadow 0.6s ease,
        box-shadow 0.6s ease;
}

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

@media (prefers-reduced-motion: reduce) {
    #crt-overlay::before {
        animation: none;
    }

    .boot-content {
        animation: none;
    }

    .boot-logo {
        animation: none;
    }
}