/* CRT Screen Effects */

/* CRT Screen Effect */
.crt-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1000;
    background: linear-gradient(
        transparent 50%,
        rgba(0, 255, 0, 0.03) 50%
    );
    background-size: 100% 4px;
    animation: scanline 8s linear infinite;
}

@keyframes scanline {
    0% { transform: translateY(0); }
    100% { transform: translateY(4px); }
}

.crt-screen::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(
        ellipse at center,
        transparent 0%,
        rgba(0, 0, 0, 0.4) 100%
    );
    pointer-events: none;
}

.crt-screen::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    animation: flicker 0.15s infinite;
    pointer-events: none;
}

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

/* Glitch Effect */
.glitch {
    animation: glitch 0.3s infinite;
}

@keyframes glitch {
    0%, 100% {
        text-shadow: 2px 0 #ff0000, -2px 0 #00ff00;
        transform: translate(0);
    }
    20% {
        text-shadow: -2px 0 #ff0000, 2px 0 #00ff00;
        transform: translate(2px, -2px);
    }
    40% {
        text-shadow: 2px 0 #ff0000, -2px 0 #00ff00;
        transform: translate(-2px, 2px);
    }
    60% {
        text-shadow: -2px 0 #ff0000, 2px 0 #00ff00;
        transform: translate(2px, 2px);
    }
    80% {
        text-shadow: 2px 0 #ff0000, -2px 0 #00ff00;
        transform: translate(-2px, -2px);
    }
}

/* Glitch Screen Animation */
@keyframes glitch-screen {
    0%, 100% { filter: hue-rotate(0deg); }
    25% { filter: hue-rotate(90deg); transform: translateX(-5px); }
    50% { filter: hue-rotate(180deg); transform: translateX(5px); }
    75% { filter: hue-rotate(270deg); transform: translateX(-3px); }
}