/* ═══════════════════════════════
   GLITCH KEYFRAMES
═══════════════════════════════ */
@keyframes glitch-invert {
    0%, 100% { filter: invert(0); }
    10%, 90% { filter: invert(1); }
}

@keyframes glitch-hue-30 {
    0%, 100% { filter: hue-rotate(0deg); }
    50% { filter: hue-rotate(30deg); }
}
@keyframes glitch-hue-90 {
    0%, 100% { filter: hue-rotate(0deg); }
    50% { filter: hue-rotate(90deg); }
}
@keyframes glitch-hue-180 {
    0%, 100% { filter: hue-rotate(0deg); }
    50% { filter: hue-rotate(180deg); }
}

@keyframes glitch-skew {
    0%, 100% { transform: skewX(0deg); }
    20% { transform: skewX(-2deg); }
    40% { transform: skewX(3deg); }
    60% { transform: skewX(-1.5deg); }
    80% { transform: skewX(2deg); }
}

@keyframes glitch-flicker {
    0%, 100% { opacity: 1; }
    10% { opacity: 0; }
    20% { opacity: 1; }
    30% { opacity: 0; }
    40% { opacity: 1; }
    50% { opacity: 0; }
    60% { opacity: 1; }
}

/* ═══════════════════════════════
   GLITCH UTILITY CLASSES
═══════════════════════════════ */
.glitch-invert {
    animation: glitch-invert 400ms linear 1 forwards;
}

.glitch-hue-30 {
    animation: glitch-hue-30 1000ms ease-in-out 1 forwards;
}
.glitch-hue-90 {
    animation: glitch-hue-90 800ms ease-in-out 1 forwards;
}
.glitch-hue-180 {
    animation: glitch-hue-180 700ms ease-in-out 1 forwards;
}

.glitch-chromatic {
    text-shadow: -2px 0 #FF3B30, 2px 0 #2D5BFF !important;
}
.glitch-chromatic-strong {
    text-shadow: -4px 0 #FF3B30, 4px 0 #2D5BFF, 0 2px #C8FF00 !important;
}

.glitch-skew {
    animation: glitch-skew 500ms linear 1 forwards;
}

.glitch-shift-r { transform: translateX(5px) !important; }
.glitch-shift-l { transform: translateX(-5px) !important; }
.glitch-shift-u { transform: translateY(-4px) !important; }
.glitch-shift-d { transform: translateY(4px) !important; }

.glitch-flicker {
    animation: glitch-flicker 600ms linear 1 forwards;
}

/* ═══════════════════════════════
   SCANLINE OVERLAY
═══════════════════════════════ */
#glitch-scanline-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    pointer-events: none;
    opacity: 0;
    background: repeating-linear-gradient(
        to bottom,
        transparent 0px,
        transparent 2px,
        rgba(0, 0, 0, 0.03) 2px,
        rgba(0, 0, 0, 0.03) 4px
    );
    transition: opacity 0.1s;
}
#glitch-scanline-overlay.active {
    opacity: 1;
}