/* CRT Mode Overlay */
.crt-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 100;
    mix-blend-mode: overlay;
    opacity: var(--crt-opacity, 0.8);
}

.crt-overlay::before,
.crt-overlay::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

/* Horizontal scanlines */
.crt-overlay::before {
    background: repeating-linear-gradient(
        0deg,
        transparent 0px,
        transparent 1px,
        rgba(0, 0, 0, var(--scanline-opacity, 0.6)) 1px,
        rgba(0, 0, 0, var(--scanline-opacity, 0.6)) 2px
    );
    animation: scanlines 0.1s linear infinite;
}

/* Vertical color separation (RGB) */
.crt-overlay::after {
    background: repeating-linear-gradient(
        90deg,
        rgba(255, 0, 0, var(--color-separation-opacity, 0.4)) 0px,
        rgba(0, 255, 0, var(--color-separation-opacity, 0.4)) 1px,
        rgba(0, 0, 255, var(--color-separation-opacity, 0.4)) 2px,
        rgba(255, 0, 0, var(--color-separation-opacity, 0.4)) 3px
    );
    animation: colorFlicker 0.15s linear infinite;
}

/* Flickering effect */
@keyframes scanlines {
    0% { transform: translateY(0px); }
    100% { transform: translateY(2px); }
}

@keyframes colorFlicker {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.98; }
}

/* Additional CRT effects */
.crt-overlay.active {
    animation: crtFlicker 0.08s linear infinite;
}

@keyframes crtFlicker {
    0%, 95%, 100% { 
        opacity: calc(var(--crt-opacity, 0.8) * var(--flicker-intensity, 1)); 
    }
    1% { 
        opacity: calc(var(--crt-opacity, 0.8) * var(--flicker-intensity, 1) * 1.2); 
    }
    2% { 
        opacity: calc(var(--crt-opacity, 0.8) * var(--flicker-intensity, 1) * 0.6); 
    }
    3% { 
        opacity: calc(var(--crt-opacity, 0.8) * var(--flicker-intensity, 1) * 1.4); 
    }
    4% { 
        opacity: calc(var(--crt-opacity, 0.8) * var(--flicker-intensity, 1) * 0.3); 
    }
    5% { 
        opacity: calc(var(--crt-opacity, 0.8) * var(--flicker-intensity, 1) * 1.6); 
    }
    6% { 
        opacity: calc(var(--crt-opacity, 0.8) * var(--flicker-intensity, 1) * 0.2); 
    }
    7% { 
        opacity: calc(var(--crt-opacity, 0.8) * var(--flicker-intensity, 1) * 0.8); 
    }
    8% { 
        opacity: calc(var(--crt-opacity, 0.8) * var(--flicker-intensity, 1) * 0.4); 
    }
    9% { 
        opacity: calc(var(--crt-opacity, 0.8) * var(--flicker-intensity, 1) * 1.1); 
    }
    10% { 
        opacity: calc(var(--crt-opacity, 0.8) * var(--flicker-intensity, 1) * 0.5); 
    }
    11% { 
        opacity: calc(var(--crt-opacity, 0.8) * var(--flicker-intensity, 1) * 1.3); 
    }
    12% { 
        opacity: calc(var(--crt-opacity, 0.8) * var(--flicker-intensity, 1) * 0.3); 
    }
    13% { 
        opacity: calc(var(--crt-opacity, 0.8) * var(--flicker-intensity, 1) * 0.9); 
    }
    14% { 
        opacity: calc(var(--crt-opacity, 0.8) * var(--flicker-intensity, 1) * 0.6); 
    }
    15% { 
        opacity: calc(var(--crt-opacity, 0.8) * var(--flicker-intensity, 1) * 1.2); 
    }
    16% { 
        opacity: calc(var(--crt-opacity, 0.8) * var(--flicker-intensity, 1) * 0.4); 
    }
    17% { 
        opacity: calc(var(--crt-opacity, 0.8) * var(--flicker-intensity, 1) * 0.7); 
    }
    18% { 
        opacity: calc(var(--crt-opacity, 0.8) * var(--flicker-intensity, 1) * 0.5); 
    }
    19% { 
        opacity: calc(var(--crt-opacity, 0.8) * var(--flicker-intensity, 1) * 1.1); 
    }
    20% { 
        opacity: calc(var(--crt-opacity, 0.8) * var(--flicker-intensity, 1) * 0.3); 
    }
    21% { 
        opacity: calc(var(--crt-opacity, 0.8) * var(--flicker-intensity, 1) * 0.8); 
    }
    22% { 
        opacity: calc(var(--crt-opacity, 0.8) * var(--flicker-intensity, 1) * 0.6); 
    }
    23% { 
        opacity: calc(var(--crt-opacity, 0.8) * var(--flicker-intensity, 1) * 1.3); 
    }
    24% { 
        opacity: calc(var(--crt-opacity, 0.8) * var(--flicker-intensity, 1) * 0.4); 
    }
    25% { 
        opacity: calc(var(--crt-opacity, 0.8) * var(--flicker-intensity, 1) * 0.9); 
    }
    26% { 
        opacity: calc(var(--crt-opacity, 0.8) * var(--flicker-intensity, 1) * 0.5); 
    }
    27% { 
        opacity: calc(var(--crt-opacity, 0.8) * var(--flicker-intensity, 1) * 1.2); 
    }
    28% { 
        opacity: calc(var(--crt-opacity, 0.8) * var(--flicker-intensity, 1) * 0.3); 
    }
    29% { 
        opacity: calc(var(--crt-opacity, 0.8) * var(--flicker-intensity, 1) * 0.7); 
    }
    30% { 
        opacity: calc(var(--crt-opacity, 0.8) * var(--flicker-intensity, 1) * 0.6); 
    }
    31% { 
        opacity: calc(var(--crt-opacity, 0.8) * var(--flicker-intensity, 1) * 1.1); 
    }
    32% { 
        opacity: calc(var(--crt-opacity, 0.8) * var(--flicker-intensity, 1) * 0.4); 
    }
    33% { 
        opacity: calc(var(--crt-opacity, 0.8) * var(--flicker-intensity, 1) * 0.8); 
    }
    34% { 
        opacity: calc(var(--crt-opacity, 0.8) * var(--flicker-intensity, 1) * 0.5); 
    }
    35% { 
        opacity: calc(var(--crt-opacity, 0.8) * var(--flicker-intensity, 1) * 1.3); 
    }
    36% { 
        opacity: calc(var(--crt-opacity, 0.8) * var(--flicker-intensity, 1) * 0.3); 
    }
    37% { 
        opacity: calc(var(--crt-opacity, 0.8) * var(--flicker-intensity, 1) * 0.9); 
    }
    38% { 
        opacity: calc(var(--crt-opacity, 0.8) * var(--flicker-intensity, 1) * 0.6); 
    }
    39% { 
        opacity: calc(var(--crt-opacity, 0.8) * var(--flicker-intensity, 1) * 1.2); 
    }
    40% { 
        opacity: calc(var(--crt-opacity, 0.8) * var(--flicker-intensity, 1) * 0.4); 
    }
    41% { 
        opacity: calc(var(--crt-opacity, 0.8) * var(--flicker-intensity, 1) * 0.7); 
    }
    42% { 
        opacity: calc(var(--crt-opacity, 0.8) * var(--flicker-intensity, 1) * 0.5); 
    }
    43% { 
        opacity: calc(var(--crt-opacity, 0.8) * var(--flicker-intensity, 1) * 1.1); 
    }
    44% { 
        opacity: calc(var(--crt-opacity, 0.8) * var(--flicker-intensity, 1) * 0.3); 
    }
    45% { 
        opacity: calc(var(--crt-opacity, 0.8) * var(--flicker-intensity, 1) * 0.8); 
    }
    46% { 
        opacity: calc(var(--crt-opacity, 0.8) * var(--flicker-intensity, 1) * 0.6); 
    }
    47% { 
        opacity: calc(var(--crt-opacity, 0.8) * var(--flicker-intensity, 1) * 1.3); 
    }
    48% { 
        opacity: calc(var(--crt-opacity, 0.8) * var(--flicker-intensity, 1) * 0.4); 
    }
    49% { 
        opacity: calc(var(--crt-opacity, 0.8) * var(--flicker-intensity, 1) * 0.9); 
    }
    50% { 
        opacity: calc(var(--crt-opacity, 0.8) * var(--flicker-intensity, 1) * 0.5); 
    }
    51% { 
        opacity: calc(var(--crt-opacity, 0.8) * var(--flicker-intensity, 1) * 1.2); 
    }
    52% { 
        opacity: calc(var(--crt-opacity, 0.8) * var(--flicker-intensity, 1) * 0.3); 
    }
    53% { 
        opacity: calc(var(--crt-opacity, 0.8) * var(--flicker-intensity, 1) * 0.7); 
    }
    54% { 
        opacity: calc(var(--crt-opacity, 0.8) * var(--flicker-intensity, 1) * 0.6); 
    }
    55% { 
        opacity: calc(var(--crt-opacity, 0.8) * var(--flicker-intensity, 1) * 1.1); 
    }
    56% { 
        opacity: calc(var(--crt-opacity, 0.8) * var(--flicker-intensity, 1) * 0.4); 
    }
    57% { 
        opacity: calc(var(--crt-opacity, 0.8) * var(--flicker-intensity, 1) * 0.8); 
    }
    58% { 
        opacity: calc(var(--crt-opacity, 0.8) * var(--flicker-intensity, 1) * 0.5); 
    }
    59% { 
        opacity: calc(var(--crt-opacity, 0.8) * var(--flicker-intensity, 1) * 1.3); 
    }
    60% { 
        opacity: calc(var(--crt-opacity, 0.8) * var(--flicker-intensity, 1) * 0.3); 
    }
    61% { 
        opacity: calc(var(--crt-opacity, 0.8) * var(--flicker-intensity, 1) * 0.9); 
    }
    62% { 
        opacity: calc(var(--crt-opacity, 0.8) * var(--flicker-intensity, 1) * 0.6); 
    }
    63% { 
        opacity: calc(var(--crt-opacity, 0.8) * var(--flicker-intensity, 1) * 1.2); 
    }
    64% { 
        opacity: calc(var(--crt-opacity, 0.8) * var(--flicker-intensity, 1) * 0.4); 
    }
    65% { 
        opacity: calc(var(--crt-opacity, 0.8) * var(--flicker-intensity, 1) * 0.7); 
    }
    66% { 
        opacity: calc(var(--crt-opacity, 0.8) * var(--flicker-intensity, 1) * 0.5); 
    }
    67% { 
        opacity: calc(var(--crt-opacity, 0.8) * var(--flicker-intensity, 1) * 1.1); 
    }
    68% { 
        opacity: calc(var(--crt-opacity, 0.8) * var(--flicker-intensity, 1) * 0.3); 
    }
    69% { 
        opacity: calc(var(--crt-opacity, 0.8) * var(--flicker-intensity, 1) * 0.8); 
    }
    70% { 
        opacity: calc(var(--crt-opacity, 0.8) * var(--flicker-intensity, 1) * 0.6); 
    }
    71% { 
        opacity: calc(var(--crt-opacity, 0.8) * var(--flicker-intensity, 1) * 1.3); 
    }
    72% { 
        opacity: calc(var(--crt-opacity, 0.8) * var(--flicker-intensity, 1) * 0.4); 
    }
    73% { 
        opacity: calc(var(--crt-opacity, 0.8) * var(--flicker-intensity, 1) * 0.9); 
    }
    74% { 
        opacity: calc(var(--crt-opacity, 0.8) * var(--flicker-intensity, 1) * 0.6); 
    }
    75% { 
        opacity: calc(var(--crt-opacity, 0.8) * var(--flicker-intensity, 1) * 1.2); 
    }
    76% { 
        opacity: calc(var(--crt-opacity, 0.8) * var(--flicker-intensity, 1) * 0.4); 
    }
    77% { 
        opacity: calc(var(--crt-opacity, 0.8) * var(--flicker-intensity, 1) * 0.7); 
    }
    78% { 
        opacity: calc(var(--crt-opacity, 0.8) * var(--flicker-intensity, 1) * 0.5); 
    }
    79% { 
        opacity: calc(var(--crt-opacity, 0.8) * var(--flicker-intensity, 1) * 1.1); 
    }
    80% { 
        opacity: calc(var(--crt-opacity, 0.8) * var(--flicker-intensity, 1) * 0.3); 
    }
    81% { 
        opacity: calc(var(--crt-opacity, 0.8) * var(--flicker-intensity, 1) * 0.8); 
    }
    82% { 
        opacity: calc(var(--crt-opacity, 0.8) * var(--flicker-intensity, 1) * 0.6); 
    }
    83% { 
        opacity: calc(var(--crt-opacity, 0.8) * var(--flicker-intensity, 1) * 1.3); 
    }
    84% { 
        opacity: calc(var(--crt-opacity, 0.8) * var(--flicker-intensity, 1) * 0.4); 
    }
    85% { 
        opacity: calc(var(--crt-opacity, 0.8) * var(--flicker-intensity, 1) * 0.9); 
    }
    86% { 
        opacity: calc(var(--crt-opacity, 0.8) * var(--flicker-intensity, 1) * 0.6); 
    }
    87% { 
        opacity: calc(var(--crt-opacity, 0.8) * var(--flicker-intensity, 1) * 1.2); 
    }
    88% { 
        opacity: calc(var(--crt-opacity, 0.8) * var(--flicker-intensity, 1) * 0.4); 
    }
    89% { 
        opacity: calc(var(--crt-opacity, 0.8) * var(--flicker-intensity, 1) * 0.7); 
    }
    90% { 
        opacity: calc(var(--crt-opacity, 0.8) * var(--flicker-intensity, 1) * 0.5); 
    }
    91% { 
        opacity: calc(var(--crt-opacity, 0.8) * var(--flicker-intensity, 1) * 1.1); 
    }
    92% { 
        opacity: calc(var(--crt-opacity, 0.8) * var(--flicker-intensity, 1) * 0.3); 
    }
    93% { 
        opacity: calc(var(--crt-opacity, 0.8) * var(--flicker-intensity, 1) * 0.8); 
    }
    94% { 
        opacity: calc(var(--crt-opacity, 0.8) * var(--flicker-intensity, 1) * 0.6); 
    }
    95% { 
        opacity: calc(var(--crt-opacity, 0.8) * var(--flicker-intensity, 1) * 1.3); 
    }
    96% { 
        opacity: calc(var(--crt-opacity, 0.8) * var(--flicker-intensity, 1) * 0.4); 
    }
    97% { 
        opacity: calc(var(--crt-opacity, 0.8) * var(--flicker-intensity, 1) * 0.9); 
    }
    98% { 
        opacity: calc(var(--crt-opacity, 0.8) * var(--flicker-intensity, 1) * 0.6); 
    }
    99% { 
        opacity: calc(var(--crt-opacity, 0.8) * var(--flicker-intensity, 1) * 1.2); 
    }
}