/* CRT Effect Styles */
.crt-effect {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9999;
}

/* Scanlines */
.crt-scanline {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        to bottom,
        transparent 50%,
        rgba(0, 0, 0, 0.03) 50%
    );
    background-size: 100% 4px;
    pointer-events: none;
    z-index: 9998;
    opacity: 0.5;
}

/* Vignette Effect - DISABLED */
.crt-vignette {
    display: none !important;
}

/* Noise Effect */
.crt-noise {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9996;
    opacity: 0.02;
}

.crt-noise::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMDAiIGhlaWdodD0iMzAwIj4KPGZpbHRlciBpZD0ibm9pc2UiPgo8ZmVUdXJidWxlbmNlIHR5cGU9ImZyYWN0YWxOb2lzZSIgYmFzZUZyZXF1ZW5jeT0iMC45IiBudW1PY3RhdmVzPSI0IiBzZWVkPSI1Ij48L2ZlVHVyYnVsZW5jZT4KPC9maWx0ZXI+CjxyZWN0IHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbHRlcj0idXJsKCNub2lzZSkiIG9wYWNpdHk9IjEiPjwvcmVjdD4KPC9zdmc+');
    animation: noise 0.2s steps(10) infinite;
}

@keyframes noise {
    0% { transform: translate(0, 0); }
    10% { transform: translate(-5%, -5%); }
    20% { transform: translate(-10%, 5%); }
    30% { transform: translate(5%, -10%); }
    40% { transform: translate(-5%, 15%); }
    50% { transform: translate(-10%, 5%); }
    60% { transform: translate(15%, 0); }
    70% { transform: translate(0, 10%); }
    80% { transform: translate(-15%, 0); }
    90% { transform: translate(10%, 5%); }
    100% { transform: translate(5%, 0); }
}

/* Flicker Effect */
.crt-flicker {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9995;
    background: rgba(255, 255, 255, 0);
    animation: flicker 0.15s infinite;
}

@keyframes flicker {
    0% { opacity: 0.27861; }
    5% { opacity: 0.34769; }
    10% { opacity: 0.23604; }
    15% { opacity: 0.90626; }
    20% { opacity: 0.18128; }
    25% { opacity: 0.83891; }
    30% { opacity: 0.65583; }
    35% { opacity: 0.67807; }
    40% { opacity: 0.26559; }
    45% { opacity: 0.84693; }
    50% { opacity: 0.96019; }
    55% { opacity: 0.08594; }
    60% { opacity: 0.20313; }
    65% { opacity: 0.71988; }
    70% { opacity: 0.53455; }
    75% { opacity: 0.37288; }
    80% { opacity: 0.71428; }
    85% { opacity: 0.70419; }
    90% { opacity: 0.7003; }
    95% { opacity: 0.36108; }
    100% { opacity: 0.24387; }
}

/* Chromatic Aberration */
.crt-aberration {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9994;
    animation: aberration 0.5s infinite;
}

@keyframes aberration {
    0% { text-shadow: 1px 0 0 #ff0000, -1px 0 0 #00ffff; }
    25% { text-shadow: -1px 0 0 #ff0000, 1px 0 0 #00ffff; }
    50% { text-shadow: 1px 0 0 #ff0000, -1px 0 0 #00ffff; }
    75% { text-shadow: -1px 0 0 #ff0000, 1px 0 0 #00ffff; }
    100% { text-shadow: 1px 0 0 #ff0000, -1px 0 0 #00ffff; }
}

/* Screen Persistence */
.crt-persistence {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9993;
    background: rgba(0, 255, 0, 0.01);
    mix-blend-mode: screen;
}

/* Main Flicker */
.flicker {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9992;
}

.flicker::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(18, 16, 16, 0.1);
    opacity: 0;
    animation: flicker-main 0.06s infinite;
}

@keyframes flicker-main {
    0% { opacity: 0.27861; }
    5% { opacity: 0.34769; }
    10% { opacity: 0.23604; }
    15% { opacity: 0.90626; }
    20% { opacity: 0.18128; }
    25% { opacity: 0.83891; }
    30% { opacity: 0.65583; }
    35% { opacity: 0.67807; }
    40% { opacity: 0.26559; }
    45% { opacity: 0.84693; }
    50% { opacity: 0.96019; }
    55% { opacity: 0.08594; }
    60% { opacity: 0.20313; }
    65% { opacity: 0.71988; }
    70% { opacity: 0.53455; }
    75% { opacity: 0.37288; }
    80% { opacity: 0.71428; }
    85% { opacity: 0.70419; }
    90% { opacity: 0.7003; }
    95% { opacity: 0.36108; }
    100% { opacity: 0.24387; }
}


/* Toggle CRT Effects */
.crt-off .crt-scanline,
.crt-off .crt-vignette,
.crt-off .crt-noise,
.crt-off .crt-flicker,
.crt-off .crt-aberration,
.crt-off .crt-persistence,
.crt-off .flicker,
.crt-off body::before {
    display: none !important;
}

/* Performance Mode - Disable heavy effects */
@media (prefers-reduced-motion: reduce) {
    .crt-noise,
    .crt-flicker,
    .crt-aberration,
    .flicker {
        animation: none !important;
    }
}

/* Mobile - Lighter effects */
@media (max-width: 768px) {
    .crt-noise {
        opacity: 0.01;
    }
    
    .crt-scanline {
        opacity: 0.3;
    }
    
    .crt-flicker,
    .crt-aberration {
        display: none;
    }
}

/* High Performance Mode */
.performance-mode .crt-noise,
.performance-mode .crt-flicker,
.performance-mode .crt-aberration,
.performance-mode .flicker {
    display: none !important;
}

/* Retro Monitor Glow - DISABLED */
@keyframes monitor-glow {
    0% { box-shadow: none; }
    50% { box-shadow: none; }
    100% { box-shadow: none; }
}

.crt-effect {
    animation: none !important;
}