/* ============================================================
   GLITCH EFFECTS - Cyberpunk Visual Distortions
   ============================================================ */

/* RGB Split Glitch */
.glitch-rgb {
    position: relative;
    display: inline-block;
}

.glitch-rgb::before,
.glitch-rgb::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.glitch-rgb::before {
    color: #0ea5e9;
    z-index: -1;
    animation: glitch-rgb-1 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite alternate;
}

.glitch-rgb::after {
    color: #60a5fa;
    z-index: -2;
    animation: glitch-rgb-2 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite alternate-reverse;
}

@keyframes glitch-rgb-1 {
    0% {
        transform: translate(0);
    }

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

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

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

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

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

@keyframes glitch-rgb-2 {
    0% {
        transform: translate(0);
    }

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

    40% {
        transform: translate(2px, 2px);
    }

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

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

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

/* Intense Glitch on Hover */
.glitch-hover:hover {
    animation: glitch-intense 0.3s infinite;
}

@keyframes glitch-intense {

    0%,
    100% {
        transform: translate(0);
        filter: hue-rotate(0deg);
    }

    25% {
        transform: translate(-3px, 3px);
        filter: hue-rotate(90deg);
    }

    50% {
        transform: translate(3px, -3px);
        filter: hue-rotate(180deg);
    }

    75% {
        transform: translate(-3px, -3px);
        filter: hue-rotate(270deg);
    }
}

/* Skew Glitch */
.glitch-skew {
    animation: glitch-skew 5s infinite;
}

@keyframes glitch-skew {

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

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

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

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

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

/* Clip Path Glitch */
.glitch-clip {
    position: relative;
}

.glitch-clip::before,
.glitch-clip::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: inherit;
}

.glitch-clip::before {
    color: #3b82f6;
    animation: glitch-clip-top 2s infinite;
    clip-path: polygon(0 0, 100% 0, 100% 33%, 0 33%);
}

.glitch-clip::after {
    color: #0ea5e9;
    animation: glitch-clip-bottom 3s infinite;
    clip-path: polygon(0 67%, 100% 67%, 100% 100%, 0 100%);
}

@keyframes glitch-clip-top {

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

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

    75% {
        transform: translateX(5px);
    }
}

@keyframes glitch-clip-bottom {

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

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

    66% {
        transform: translateX(-5px);
    }
}

/* Digital Corruption Effect */
.glitch-corrupt {
    animation: glitch-corrupt 8s infinite;
}

@keyframes glitch-corrupt {

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

    91% {
        clip-path: inset(10% 0 85% 0);
        transform: translate(-10px, -5px);
    }

    92% {
        clip-path: inset(80% 0 10% 0);
        transform: translate(10px, 5px);
    }

    93% {
        clip-path: inset(40% 0 50% 0);
        transform: translate(-5px, 3px);
    }

    94% {
        clip-path: inset(0 0 0 0);
        transform: translate(0);
    }
}

/* Scanline Interference */
.glitch-scanline {
    position: relative;
    overflow: hidden;
}

.glitch-scanline::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: repeating-linear-gradient(0deg,
            rgba(0, 0, 0, 0.15),
            rgba(0, 0, 0, 0.15) 1px,
            transparent 1px,
            transparent 2px);
    pointer-events: none;
    animation: scanline-interference 0.2s linear infinite;
}

@keyframes scanline-interference {
    0% {
        transform: translateY(0);
        opacity: 0.8;
    }

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

/* Static Noise */
.glitch-static {
    position: relative;
}

.glitch-static::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><filter id="noise"><feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="4" /></filter><rect width="100%" height="100%" filter="url(%23noise)" opacity="0.05"/></svg>');
    opacity: 0;
    pointer-events: none;
    animation: static-noise 0.1s infinite;
    mix-blend-mode: overlay;
}

@keyframes static-noise {

    0%,
    100% {
        opacity: 0;
    }

    50% {
        opacity: 0.1;
    }
}

/* Flash Effect */
.glitch-flash {
    animation: glitch-flash 0.01s infinite;
}

@keyframes glitch-flash {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.95;
    }
}

/* Color Shift */
.glitch-colorshift {
    animation: glitch-colorshift 3s infinite;
}

@keyframes glitch-colorshift {

    0%,
    100% {
        filter: hue-rotate(0deg) saturate(1);
    }

    25% {
        filter: hue-rotate(20deg) saturate(1.2);
    }

    50% {
        filter: hue-rotate(-20deg) saturate(0.8);
    }

    75% {
        filter: hue-rotate(10deg) saturate(1.1);
    }
}

/* Subtle Shake */
.glitch-shake {
    animation: glitch-shake 0.5s infinite;
}

@keyframes glitch-shake {

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

    10%,
    30%,
    50%,
    70%,
    90% {
        transform: translate(-1px, 1px);
    }

    20%,
    40%,
    60%,
    80% {
        transform: translate(1px, -1px);
    }
}

/* Pixelation Effect */
.glitch-pixel {
    animation: glitch-pixel 4s infinite;
    image-rendering: pixelated;
}

@keyframes glitch-pixel {

    0%,
    95%,
    100% {
        filter: blur(0);
    }

    96% {
        filter: blur(2px);
    }

    97% {
        filter: blur(0);
    }

    98% {
        filter: blur(1px);
    }
}

/* Combo: Hero Title Glitch */
.glitch-hero {
    position: relative;
    display: inline-block;
}

.glitch-hero::before,
.glitch-hero::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.8;
}

.glitch-hero::before {
    color: #60a5fa;
    z-index: -1;
    animation: glitch-hero-1 2s infinite;
}

.glitch-hero::after {
    color: #0ea5e9;
    z-index: -2;
    animation: glitch-hero-2 2.5s infinite;
}

@keyframes glitch-hero-1 {

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

    91%,
    93% {
        transform: translate(-3px, 2px);
        opacity: 0.8;
    }

    92%,
    94% {
        transform: translate(3px, -2px);
        opacity: 0.8;
    }
}

@keyframes glitch-hero-2 {

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

    86%,
    88% {
        transform: translate(2px, -3px);
        opacity: 0.8;
    }

    87%,
    89% {
        transform: translate(-2px, 3px);
        opacity: 0.8;
    }
}

/* Utility: Disable glitch on user preference */
@media (prefers-reduced-motion: reduce) {

    .glitch-rgb::before,
    .glitch-rgb::after,
    .glitch-hover,
    .glitch-skew,
    .glitch-clip::before,
    .glitch-clip::after,
    .glitch-corrupt,
    .glitch-scanline::before,
    .glitch-static::after,
    .glitch-flash,
    .glitch-colorshift,
    .glitch-shake,
    .glitch-pixel,
    .glitch-hero::before,
    .glitch-hero::after {
        animation: none !important;
    }
}