.glitchLayer {
    pointer-events: none;
}

.blueShift {
    filter: hue-rotate(260deg);
    animation: glitch-blue 2.5s infinite;
    z-index: 1;
}

.redShift {
    filter: hue-rotate(120deg);
    animation: glitch-red 2.5s infinite;
    z-index: 1;
}

@keyframes glitch-blue {
    6%, 14%, 70%, 78% {
        transform: none;
        opacity: 0.25;
        clip-path: inset(0 0 0 0);
    }
    10%, 12% {
        transform: translate(-5px, -3px) skew(1deg, -2deg);
        opacity: 0.5;
        clip-path: inset(50% 0 25% 0);
    }
    11%, 13% {
        transform: translate(4px, -7px) skew(-1deg) scaleX(1.5) scaleY(1.25);
        opacity: 0.7;
        clip-path: inset(0 35% 40% 0);
    }
    14%, 82% {
        transform: translate(-5px, -3px) skew(1deg, -1deg);
        opacity: 0.3;
        clip-path: inset(30% 5% 25% 40%);
    }
    75%, 83% {
        transform: translate(-9px, 2px) skew(-1deg, 0);
        opacity: 0.2;
        clip-path: inset(0 35% 45% 10%);
    }
}

@keyframes glitch-red {
    6%, 14%, 70%, 78% {
        transform: none;
        opacity: 0;
        clip-path: inset(0 0 0 0);
    }
    10%, 12% {
        transform: translate(6px, 4px) skew(1deg);
        opacity: 0.5;
        clip-path: inset(5% 0 10% 0);
    }
    11%, 13% {
        transform: translate(-4px, 5px) skew(0, -1deg);
        opacity: 0.7;
        clip-path: inset(5% 0 10% 0);
    }
    14%, 82% {
        transform: translate(-7px, -4px) skew(1deg, -1deg);
        opacity: 0.2;
        clip-path: inset(50% 25% 25% 0);
    }
    75%, 80% {
        transform: translate(4px, -6px) skew(-1deg) scaleX(2) scaleY(1.25);
        opacity: 0.3;
        clip-path: inset(0 0 20% 50%);
    }
}

.slow {
    animation-duration: 3.5s;
}

.medium {
    animation-duration: 2.5s;
}

.fast {
    animation-duration: 1.5s;
}

.active .blueShift, .active .redShift {
    animation-play-state: running;
}

.glitchFx:not(.active) .blueShift,
.glitchFx:not(.active) .redShift {
    animation-play-state: paused;
}