/* Efecto CRT / Screen Door Effect */
.crt-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9999;
    opacity: 0.15;
    mix-blend-mode: overlay;
}

/* Patrón de rejilla (grid de píxeles) */
.crt-grid {
    background-image: 
        linear-gradient(rgba(0, 0, 0, 0.1) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 0, 0, 0.1) 1px, transparent 1px);
    background-size: 4px 4px;
    width: 100%;
    height: 100%;
}

/* Efecto de sombras de píxeles individuales */
.pixel-shadow {
    position: absolute;
    border-radius: 1px;
    background: rgba(0, 0, 0, 0.1);
    box-shadow: 
        0 0 1px rgba(0, 0, 0, 0.3),
        0 0 2px rgba(0, 0, 0, 0.2),
        0 0 3px rgba(0, 0, 0, 0.1);
}

/* Efecto de escaneo (scanlines) */
.scanlines {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        to bottom,
        transparent 50%,
        rgba(0, 0, 0, 0.1) 51%
    );
    background-size: 100% 4px;
    animation: scanline 10s linear infinite;
}

/* Efecto de curvatura CRT */
.crt-curvature {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 5% / 2%;
    box-shadow: 
        inset 0 0 60px rgba(0, 0, 0, 0.3),
        inset 0 0 100px rgba(0, 0, 0, 0.2);
    overflow: hidden;
}

/* Efecto de viñeta */
.crt-vignette {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-shadow: 
        inset 0 0 100px rgba(0, 0, 0, 0.5),
        inset 0 0 50px rgba(0, 0, 0, 0.3);
    pointer-events: none;
}

/* Brillo y contraste CRT */
.crt-glow {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(
        ellipse at center,
        rgba(255, 255, 255, 0.03) 0%,
        rgba(255, 255, 255, 0) 70%
    );
}

/* Efecto de píxeles muertos o atascados */
.dead-pixel {
    position: absolute;
    width: 2px;
    height: 2px;
    border-radius: 50%;
    z-index: 10000;
}

.dead-pixel.white {
    background: rgba(255, 255, 255, 0.8);
    box-shadow: 0 0 3px rgba(255, 255, 255, 0.5);
}

.dead-pixel.black {
    background: rgba(0, 0, 0, 0.8);
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
}

.dead-pixel.red {
    background: rgba(255, 0, 0, 0.8);
    box-shadow: 0 0 3px rgba(255, 0, 0, 0.5);
}

.dead-pixel.blue {
    background: rgba(0, 0, 255, 0.8);
    box-shadow: 0 0 3px rgba(0, 0, 255, 0.5);
}

/* Efecto de difuminado CRT */
.crt-blur {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    backdrop-filter: blur(0.3px);
    -webkit-backdrop-filter: blur(0.3px);
}

/* Efecto de sombra de texto CRT */
.crt-text-shadow {
    text-shadow: 
        1px 0 1px rgba(0, 255, 0, 0.1),
        0 1px 1px rgba(0, 255, 0, 0.1),
        2px 1px 1px rgba(0, 255, 0, 0.1),
        1px 2px 1px rgba(0, 255, 0, 0.1),
        3px 2px 1px rgba(0, 255, 0, 0.1);
}

/* Animación de parpadeo CRT */
@keyframes crt-flicker {
    0% { opacity: 0.97; }
    5% { opacity: 0.99; }
    10% { opacity: 0.97; }
    15% { opacity: 0.94; }
    20% { opacity: 1; }
    25% { opacity: 0.93; }
    30% { opacity: 0.99; }
    35% { opacity: 0.98; }
    40% { opacity: 0.99; }
    45% { opacity: 0.95; }
    50% { opacity: 0.96; }
    55% { opacity: 0.99; }
    60% { opacity: 0.97; }
    65% { opacity: 0.96; }
    70% { opacity: 0.99; }
    75% { opacity: 0.94; }
    80% { opacity: 1; }
    85% { opacity: 0.93; }
    90% { opacity: 0.99; }
    95% { opacity: 0.95; }
    100% { opacity: 0.97; }
}

.crt-flicker {
    animation: crt-flicker 0.15s infinite;
}

/* Efecto de resplandor verde (típico CRT) */
.crt-green-glow {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(
        ellipse at center,
        rgba(0, 255, 0, 0.02) 0%,
        rgba(0, 255, 0, 0) 70%
    );
    mix-blend-mode: screen;
}

/* Modo monocromático verde (opcional) */
.crt-monochrome {
    filter: sepia(1) hue-rotate(60deg) saturate(3);
    -webkit-filter: sepia(1) hue-rotate(60deg) saturate(3);
}

/* Patrón más denso para efecto screen door */
.screen-door {
    background-image: 
        radial-gradient(circle at 25% 25%, rgba(0, 0, 0, 0.2) 1px, transparent 1px),
        radial-gradient(circle at 75% 75%, rgba(0, 0, 0, 0.2) 1px, transparent 1px);
    background-size: 8px 8px;
    opacity: 0.2;
}

/* Variación del efecto screen door */
.screen-door-2 {
    background-image: 
        repeating-linear-gradient(0deg, 
            transparent, 
            transparent 1px, 
            rgba(0, 0, 0, 0.1) 1px, 
            rgba(0, 0, 0, 0.1) 2px
        ),
        repeating-linear-gradient(90deg, 
            transparent, 
            transparent 1px, 
            rgba(0, 0, 0, 0.1) 1px, 
            rgba(0, 0, 0, 0.1) 2px
        );
    background-size: 6px 6px;
    opacity: 0.25;
}

/* Efecto de pantalla con separación RGB (como píxeles individuales) */
.rgb-grid {
    background-image: 
        linear-gradient(90deg, 
            rgba(255, 0, 0, 0.05) 1px, 
            transparent 1px, 
            transparent 2px,
            rgba(0, 255, 0, 0.05) 2px,
            transparent 3px,
            transparent 4px,
            rgba(0, 0, 255, 0.05) 4px,
            transparent 5px
        ),
        linear-gradient(0deg, 
            rgba(255, 0, 0, 0.05) 1px, 
            transparent 1px, 
            transparent 2px,
            rgba(0, 255, 0, 0.05) 2px,
            transparent 3px,
            transparent 4px,
            rgba(0, 0, 255, 0.05) 4px,
            transparent 5px
        );
    background-size: 6px 6px;
    opacity: 0.15;
}

/* Clase para aplicar a todo el cuerpo */
body.crt-mode {
    background: #001100 !important;
    image-rendering: pixelated;
    -webkit-image-rendering: pixelated;
}

/* Ajustes para texto en modo CRT */
body.crt-mode .el,
body.crt-mode .frame__title,
body.crt-mode h1, 
body.crt-mode h2, 
body.crt-mode h3, 
body.crt-mode p {
    font-family: 'Courier New', monospace !important;
    color: #0f0 !important;
    text-shadow: 0 0 5px rgba(0, 255, 0, 0.5) !important;
}

/* Efecto de desenfoque de movimiento */
.motion-blur {
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    perspective: 1000;
}

/* Capa de overlay con patrón de máscara de sombra */
.shadow-mask {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg width='8' height='8' viewBox='0 0 8 8' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cmask id='shadowMask'%3E%3Crect width='100%25' height='100%25' fill='white'/%3E%3Ccircle cx='4' cy='4' r='1' fill='black' opacity='0.3'/%3E%3Ccircle cx='6' cy='6' r='0.5' fill='black' opacity='0.2'/%3E%3C/mask%3E%3C/defs%3E%3Crect width='100%25' height='100%25' mask='url(%23shadowMask)' fill='black' opacity='0.1'/%3E%3C/svg%3E");
    background-size: 8px 8px;
    pointer-events: none;
    z-index: 9998;
    mix-blend-mode: multiply;
}
/* Efecto Screen Door más pronunciado */
.intense-screen-door {
    position: absolute; /* Cambiado a absolute para que esté dentro del overlay */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    background-image: 
        repeating-linear-gradient(0deg, 
            rgba(0, 0, 0, 0.3) 0px, 
            rgba(0, 0, 0, 0.3) 1px, 
            transparent 1px, 
            transparent 2px
        ),
        repeating-linear-gradient(90deg, 
            rgba(0, 0, 0, 0.3) 0px, 
            rgba(0, 0, 0, 0.3) 1px, 
            transparent 1px, 
            transparent 2px
        );
    background-size: 8px 8px;
    opacity: 0.4;
    mix-blend-mode: multiply;
}

/* Patrón de puntos para efecto de máscara de sombra */
.dot-mask {
    background-image: radial-gradient(
        circle at center,
        rgba(0, 0, 0, 0.4) 1px,
        transparent 1px
    );
    background-size: 6px 6px;
}