/* ============================================
   BINARY ROT VISUAL EFFECTS
   CRT, Scanlines, Glitch, VHS Effects
   ============================================ */

/* ========== SCANLINE EFFECT ========== */
.rot-scanlines {
    position: relative;
}

.rot-scanlines::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    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);
    z-index: var(--z-above, 1);
}

/* ========== CRT FLICKER EFFECT ========== */
@keyframes crt-flicker {

    0%,
    100% {
        opacity: 1;
    }

    3% {
        opacity: 0.97;
    }

    6% {
        opacity: 1;
    }

    7% {
        opacity: 0.95;
    }

    8% {
        opacity: 1;
    }

    47% {
        opacity: 1;
    }

    48% {
        opacity: 0.98;
    }

    49% {
        opacity: 1;
    }

    97% {
        opacity: 1;
    }

    98% {
        opacity: 0.96;
    }

    99% {
        opacity: 1;
    }
}

.rot-crt-flicker {
    animation: crt-flicker 4s infinite;
}

/* ========== CHROMATIC ABERRATION ========== */
.rot-chromatic {
    position: relative;
}

.rot-chromatic::before,
.rot-chromatic::after {
    content: attr(data-text);
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0;
}

.rot-chromatic:hover::before {
    left: var(--chromatic-offset, 2px);
    text-shadow: -2px 0 var(--rot-aqua);
    opacity: 0.7;
    animation: chromatic-shift 0.3s steps(2) infinite;
}

.rot-chromatic:hover::after {
    left: calc(var(--chromatic-offset, 2px) * -1);
    text-shadow: 2px 0 var(--rot-magenta);
    opacity: 0.7;
    animation: chromatic-shift 0.3s steps(2) infinite reverse;
}

@keyframes glitch-skew {
    0% {
        transform: skew(0deg);
    }

    20% {
        transform: skew(-2deg);
    }

    40% {
        transform: skew(2deg);
    }

    60% {
        transform: skew(-1deg);
    }

    80% {
        transform: skew(1deg);
    }

    100% {
        transform: skew(0deg);
    }
}

@keyframes text-scramble {
    0% {
        content: "DATA_ROT";
    }

    20% {
        content: "NULL_PTR";
    }

    40% {
        content: "SYS_FAIL";
    }

    60% {
        content: "SEG_FAULT";
    }

    80% {
        content: "OVERFLOW";
    }

    100% {
        content: "DATA_ROT";
    }
}

@keyframes chromatic-shift {

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

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

    50% {
        transform: translateX(1px);
    }

    75% {
        transform: translateX(-0.5px);
    }
}

/* ========== VHS TRACKING LINES ========== */
@keyframes vhs-tracking {
    0% {
        transform: translateY(-100%);
    }

    100% {
        transform: translateY(100vh);
    }
}

.rot-vhs-tracking::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 10px;
    background: linear-gradient(to bottom,
            transparent,
            rgba(255, 255, 255, 0.1) 50%,
            transparent);
    animation: vhs-tracking 8s linear infinite;
    pointer-events: none;
    z-index: var(--z-overlay, 9998);
}

/* ========== BINARY RAIN EFFECT ========== */
@keyframes binary-fall {
    0% {
        transform: translateY(-100%);
        opacity: 1;
    }

    70% {
        opacity: 1;
    }

    100% {
        transform: translateY(100vh);
        opacity: 0;
    }
}

.rot-binary-rain {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: var(--z-base, 0);
    overflow: hidden;
    opacity: 0.1;
}

.rot-binary-rain span {
    position: absolute;
    top: -20px;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--rot-slime);
    animation: binary-fall linear infinite;
    text-shadow: 0 0 5px var(--rot-slime);
}

/* ========== PIXEL BLOOM / GLOW ========== */
.rot-bloom {
    filter: brightness(1.1) contrast(1.05);
    text-shadow:
        0 0 10px currentColor,
        0 0 20px currentColor,
        0 0 40px currentColor;
}

.rot-bloom-subtle {
    filter: brightness(1.05);
    text-shadow: 0 0 15px currentColor;
}

/* ========== GLITCH TEXT EFFECT ========== */
@keyframes glitch-text {

    0%,
    100% {
        transform: translate(0);
        text-shadow:
            2px 0 var(--rot-aqua),
            -2px 0 var(--rot-magenta);
    }

    20% {
        transform: translate(-2px, 2px);
        text-shadow:
            -3px 0 var(--rot-aqua),
            3px 0 var(--rot-magenta);
    }

    40% {
        transform: translate(2px, -2px);
        text-shadow:
            3px 0 var(--rot-aqua),
            -3px 0 var(--rot-magenta);
    }

    60% {
        transform: translate(-1px, 1px);
        text-shadow:
            -2px 0 var(--rot-aqua),
            2px 0 var(--rot-magenta);
    }

    80% {
        transform: translate(1px, -1px);
        text-shadow:
            2px 0 var(--rot-aqua),
            -2px 0 var(--rot-magenta);
    }
}

.rot-glitch-text:hover {
    animation: glitch-text 0.4s steps(2) infinite;
}

/* ========== SCREEN TEAR EFFECT ========== */
@keyframes screen-tear {

    0%,
    100% {
        clip-path: inset(0 0 0 0);
    }

    10% {
        clip-path: inset(20% 0 60% 0);
    }

    20% {
        clip-path: inset(70% 0 10% 0);
    }

    30% {
        clip-path: inset(40% 0 30% 0);
    }

    40% {
        clip-path: inset(10% 0 80% 0);
    }

    50% {
        clip-path: inset(50% 0 20% 0);
    }

    60% {
        clip-path: inset(30% 0 50% 0);
    }

    70% {
        clip-path: inset(80% 0 5% 0);
    }

    80% {
        clip-path: inset(15% 0 70% 0);
    }

    90% {
        clip-path: inset(60% 0 25% 0);
    }
}

.rot-screen-tear {
    animation: screen-tear 0.5s steps(1) infinite;
}

/* ========== NOISE OVERLAY ========== */
@keyframes noise-shift {

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

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

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

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

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

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

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

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

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

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

.rot-noise::before {
    content: '';
    position: absolute;
    inset: -50%;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
    opacity: var(--noise-intensity, 0.1);
    pointer-events: none;
    animation: noise-shift 0.2s steps(10) infinite;
    mix-blend-mode: overlay;
    z-index: var(--z-above, 1);
}

/* ========== STATIC FLASH ========== */
@keyframes static-flash {

    0%,
    9%,
    11%,
    100% {
        opacity: 0;
    }

    10% {
        opacity: 1;
    }
}

.rot-static-flash::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(transparent 0%,
            rgba(255, 255, 255, 0.1) 50%,
            transparent 100%);
    animation: static-flash 5s infinite;
    pointer-events: none;
}

/* ========== UTILITY CLASSES ========== */
.rot-effect-container {
    position: relative;
    overflow: hidden;
}

/* Apply multiple effects */
.rot-full-effect {
    position: relative;
}

.rot-full-effect::before {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(0deg,
            transparent 0px,
            transparent 1px,
            rgba(0, 255, 204, 0.03) 1px,
            rgba(0, 255, 204, 0.03) 2px);
    pointer-events: none;
    z-index: var(--z-overlay, 9998);
    animation: crt-flicker 4s infinite;
}