/* Efecto "pantalla arcade": tubo CRT a color con scanlines marcadas,      */
/* rejilla de subpíxeles RGB, viñeta de tubo con fringing y parpadeo de    */
/* fósforo con algún salto de sincronía. Va al final para que sus overlays */
/* queden por encima de cualquier otra cosa (z-index alto).                */

html {
    filter: contrast(1.18) saturate(1.35) brightness(1.02);
}

body::before,
body::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 9999;
    pointer-events: none;
}

/* Scanlines marcadas + una capa de ruido de estática muy tenue. */
body::before {
    background-image:
        repeating-linear-gradient(
            to bottom,
            rgba(0, 0, 0, .38) 0px,
            rgba(0, 0, 0, .38) 1px,
            transparent 1px,
            transparent 3px
        ),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E");
    mix-blend-mode: multiply;
    animation: tv-flicker 4s infinite;
}

/* Rejilla RGB (aperture grille) + viñeta de tubo con fringing de color en los bordes. */
body::after {
    background:
        repeating-linear-gradient(
            to right,
            rgba(255, 0, 60, .05) 0px,
            rgba(0, 255, 90, .05) 1px,
            rgba(0, 120, 255, .05) 2px,
            transparent 3px,
            transparent 4px
        ),
        radial-gradient(ellipse at center, transparent 50%, rgba(0, 0, 0, .62) 100%),
        radial-gradient(ellipse at center, rgba(255, 0, 90, .05), transparent 55%),
        radial-gradient(ellipse at center, rgba(0, 140, 255, .05), transparent 60%),
        linear-gradient(rgba(0, 0, 0, .32), transparent 8%, transparent 92%, rgba(0, 0, 0, .32));
    box-shadow: inset 0 0 160px rgba(0, 0, 0, .85), inset 0 0 50px rgba(80, 180, 255, .08);
}

@keyframes tv-flicker {
    0%, 100% { opacity: 1; transform: translateY(0); }
    92% { opacity: 1; transform: translateY(0); }
    93% { opacity: .8; transform: translateY(-1px); }
    94% { opacity: 1; transform: translateY(0); }
    96% { opacity: .9; }
    96.5% { opacity: 1; transform: translateY(2px); }
    97% { opacity: .85; transform: translateY(0); }
    98% { opacity: 1; }
}

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