/* ============================================
   GLITCH OVERLAY SYSTEM
   Persistent visual overlays using advanced CSS
   ============================================ */

/* ========== MAIN OVERLAY CONTAINER ========== */
.rot-overlay {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: var(--z-overlay, 9998);
    mix-blend-mode: screen;
}

/* ========== SCANLINE LAYER ========== */
.rot-overlay__scanlines {
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(0deg,
            transparent 0px,
            transparent 1px,
            rgba(0, 255, 204, var(--scanline-opacity, 0.05)) 1px,
            rgba(0, 255, 204, var(--scanline-opacity, 0.05)) 2px);
    animation: scanline-drift 10s linear infinite;
}

@keyframes scanline-drift {
    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(10px);
    }
}

/* ========== CRT VIGNETTE ========== */
.rot-overlay__vignette {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center,
            transparent 0%,
            transparent 60%,
            rgba(0, 0, 0, 0.4) 100%);
}

/* ========== RGB SPLIT LAYER ========== */
.rot-overlay__rgb {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity var(--duration-fast, 0.2s);
}

/* Activate on body interaction */
body:active .rot-overlay__rgb {
    opacity: 0.3;
    background: linear-gradient(90deg,
            rgba(255, 0, 0, 0.1) 0%,
            rgba(0, 255, 0, 0.1) 50%,
            rgba(0, 0, 255, 0.1) 100%);
    animation: rgb-shift 0.1s steps(3) infinite;
}

@keyframes rgb-shift {
    0% {
        transform: translateX(-2px);
    }

    33% {
        transform: translateX(2px);
    }

    66% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-1px);
    }
}

/* ========== FLICKER LAYER ========== */
.rot-overlay__flicker {
    position: absolute;
    inset: 0;
    background: transparent;
    animation: overlay-flicker 0.15s infinite;
}

@keyframes overlay-flicker {

    0%,
    100% {
        background: transparent;
    }

    50% {
        background: rgba(255, 255, 255, 0.01);
    }
}

/* ========== GRAIN LAYER ========== */
.rot-overlay__grain {
    position: absolute;
    inset: -100%;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
    opacity: var(--noise-intensity, 0.1);
    animation: grain-shift 0.5s steps(10) infinite;
    mix-blend-mode: overlay;
}

@keyframes grain-shift {

    0%,
    100% {
        transform: translate(0, 0);
    }

    10% {
        transform: translate(-2%, -2%);
    }

    20% {
        transform: translate(2%, 2%);
    }

    30% {
        transform: translate(-1%, 1%);
    }

    40% {
        transform: translate(1%, -1%);
    }

    50% {
        transform: translate(-2%, 2%);
    }

    60% {
        transform: translate(2%, -2%);
    }

    70% {
        transform: translate(-1%, 1%);
    }

    80% {
        transform: translate(1%, -1%);
    }

    90% {
        transform: translate(-2%, -1%);
    }
}

/* ========== GLITCH LINE ========== */
.rot-overlay__glitch-line {
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg,
            transparent 0%,
            var(--rot-aqua) 20%,
            var(--rot-magenta) 50%,
            var(--rot-aqua) 80%,
            transparent 100%);
    opacity: 0;
    animation: glitch-line-scan 8s linear infinite;
}

@keyframes glitch-line-scan {

    0%,
    90%,
    100% {
        opacity: 0;
        top: -2px;
    }

    91% {
        opacity: 0.8;
        top: 0;
    }

    99% {
        opacity: 0.3;
        top: 100%;
    }
}

/* ========== HOVER GLITCH REVEAL ========== */
.rot-hover-glitch {
    position: relative;
    overflow: hidden;
}

.rot-hover-glitch::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,
            transparent 0%,
            rgba(255, 0, 255, 0.2) 45%,
            rgba(0, 255, 204, 0.2) 55%,
            transparent 100%);
    transition: left var(--duration-normal, 0.3s) var(--ease-smooth);
}

.rot-hover-glitch:hover::before {
    left: 100%;
}

/* ========== BACKDROP BLUR VARIANTS ========== */
.rot-glass {
    backdrop-filter: blur(10px) saturate(1.2);
    -webkit-backdrop-filter: blur(10px) saturate(1.2);
    background: rgba(20, 20, 42, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.rot-glass-dark {
    backdrop-filter: blur(20px) brightness(0.8);
    -webkit-backdrop-filter: blur(20px) brightness(0.8);
    background: rgba(1, 1, 12, 0.8);
}

.rot-glass-glow {
    backdrop-filter: blur(15px) saturate(1.5) brightness(1.1);
    -webkit-backdrop-filter: blur(15px) saturate(1.5) brightness(1.1);
    background: rgba(20, 20, 42, 0.6);
    box-shadow:
        inset 0 0 20px rgba(255, 0, 255, 0.1),
        0 0 40px rgba(255, 0, 255, 0.1);
}

/* ========== MODE-SPECIFIC OVERLAYS ========== */
/* Rot Mode - Full effects */
[data-mode="rot"] .rot-overlay {
    opacity: 1;
}

/* Corporate Mode - Clean, no effects */
[data-mode="corporate"] .rot-overlay {
    opacity: 0;
}

/* Cinematic Mode - Subtle grain only */
[data-mode="cinematic"] .rot-overlay__scanlines,
[data-mode="cinematic"] .rot-overlay__flicker,
[data-mode="cinematic"] .rot-overlay__glitch-line {
    opacity: 0;
}

[data-mode="cinematic"] .rot-overlay__grain {
    opacity: 0.03;
}

/* Surreal Mode - Extra intense */
[data-mode="surreal"] .rot-overlay__scanlines {
    opacity: 1;
    animation-duration: 5s;
}

[data-mode="surreal"] .rot-overlay__grain {
    opacity: 0.15;
}

/* ========== REDUCED MOTION ========== */
@media (prefers-reduced-motion: reduce) {

    .rot-overlay,
    .rot-overlay * {
        animation: none !important;
    }

    .rot-overlay__grain,
    .rot-overlay__scanlines,
    .rot-overlay__flicker,
    .rot-overlay__glitch-line {
        display: none;
    }
}