@keyframes glitch {
    0% {
        transform: translate(0);
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    }

    5% {
        transform: translate(-2px, 2px);
        clip-path: polygon(0 15%, 100% 15%, 100% 16%, 0 16%);
    }

    10% {
        transform: translate(0) scale(1);
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    }

    15% {
        transform: translate(4px, -4px) scale(1.01);
        clip-path: polygon(0 30%, 100% 30%, 100% 32%, 0 32%);
    }

    20% {
        transform: translate(0) scale(1);
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    }

    25% {
        transform: translate(-6px, 6px) scale(0.99);
        clip-path: polygon(0 45%, 100% 45%, 100% 47%, 0 47%);
    }

    30% {
        transform: translate(0) scale(1);
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    }

    35% {
        transform: translate(5px, -5px) scale(1.02);
        clip-path: polygon(0 60%, 100% 60%, 100% 62%, 0 62%);
    }

    40% {
        transform: translate(0) scale(1);
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    }

    45% {
        transform: translate(-7px, 7px) scale(0.98);
        clip-path: polygon(0 75%, 100% 75%, 100% 77%, 0 77%);
    }

    50% {
        transform: translate(0) scale(1);
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    }

    55% {
        transform: translate(8px, -8px) scale(1.03);
        clip-path: polygon(0 20%, 100% 20%, 100% 23%, 0 23%);
    }

    60% {
        transform: translate(0) scale(1);
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    }

    65% {
        transform: translate(-9px, 9px) scale(0.97);
        clip-path: polygon(0 50%, 100% 50%, 100% 53%, 0 53%);
    }

    70% {
        transform: translate(0) scale(1);
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    }

    75% {
        transform: translate(10px, -10px) scale(1.04);
        clip-path: polygon(0 80%, 100% 80%, 100% 83%, 0 83%);
    }

    80% {
        transform: translate(0) scale(1);
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    }

    85% {
        transform: translate(-11px, 11px) scale(0.96);
        clip-path: polygon(0 35%, 100% 35%, 100% 38%, 0 38%);
    }

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

    95% {
        transform: translate(12px, -12px) scale(1.05);
        clip-path: polygon(0 65%, 100% 65%, 100% 68%, 0 68%);
    }

    100% {
        transform: translate(0) scale(1);
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    }
}

@keyframes glitch-color {
    0% {
        filter: hue-rotate(0deg) saturate(150%) contrast(120%);
    }

    5% {
        filter: hue-rotate(45deg) saturate(200%) contrast(150%);
    }

    10% {
        filter: hue-rotate(0deg) saturate(150%) contrast(120%);
    }

    15% {
        filter: hue-rotate(120deg) saturate(180%) contrast(180%);
    }

    20% {
        filter: hue-rotate(0deg) saturate(150%) contrast(120%);
    }

    25% {
        filter: hue-rotate(240deg) saturate(220%) contrast(200%);
    }

    30% {
        filter: hue-rotate(0deg) saturate(150%) contrast(120%);
    }

    35% {
        filter: hue-rotate(300deg) saturate(190%) contrast(160%);
    }

    40% {
        filter: hue-rotate(0deg) saturate(150%) contrast(120%);
    }

    45% {
        filter: hue-rotate(60deg) saturate(210%) contrast(190%);
    }

    50% {
        filter: hue-rotate(0deg) saturate(150%) contrast(120%);
    }

    55% {
        filter: hue-rotate(180deg) saturate(170%) contrast(140%);
    }

    60% {
        filter: hue-rotate(0deg) saturate(150%) contrast(120%);
    }

    65% {
        filter: hue-rotate(340deg) saturate(230%) contrast(210%);
    }

    70% {
        filter: hue-rotate(0deg) saturate(150%) contrast(120%);
    }

    75% {
        filter: hue-rotate(90deg) saturate(160%) contrast(130%);
    }

    80% {
        filter: hue-rotate(0deg) saturate(150%) contrast(120%);
    }

    85% {
        filter: hue-rotate(270deg) saturate(240%) contrast(220%);
    }

    90% {
        filter: hue-rotate(0deg) saturate(150%) contrast(120%);
    }

    95% {
        filter: hue-rotate(150deg) saturate(180%) contrast(170%);
    }

    100% {
        filter: hue-rotate(0deg) saturate(150%) contrast(120%);
    }
}

@keyframes glitch-chaos {
    0% {
        transform: translate(0);
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        opacity: 1;
    }

    2% {
        transform: translate(-12px, 8px) scale(1.08);
        clip-path: polygon(0 3%, 100% 3%, 100% 5%, 0 5%);
        opacity: 0.8;
    }

    4% {
        transform: translate(0);
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        opacity: 1;
    }

    6% {
        transform: translate(15px, -10px) scale(0.92);
        clip-path: polygon(0 12%, 100% 12%, 100% 14%, 0 14%);
        opacity: 0.7;
    }

    8% {
        transform: translate(0);
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        opacity: 1;
    }

    10% {
        transform: translate(-18px, 12px) scale(1.15);
        clip-path: polygon(0 22%, 100% 22%, 100% 25%, 0 25%);
        opacity: 0.6;
    }

    12% {
        transform: translate(0);
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        opacity: 1;
    }

    14% {
        transform: translate(20px, -15px) scale(0.85);
        clip-path: polygon(0 32%, 100% 32%, 100% 35%, 0 35%);
        opacity: 0.5;
    }

    16% {
        transform: translate(0);
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        opacity: 1;
    }

    18% {
        transform: translate(-22px, 18px) scale(1.2);
        clip-path: polygon(0 42%, 100% 42%, 100% 45%, 0 45%);
        opacity: 0.4;
    }

    20% {
        transform: translate(0);
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        opacity: 1;
    }

    22% {
        transform: translate(25px, -20px) scale(0.8);
        clip-path: polygon(0 52%, 100% 52%, 100% 55%, 0 55%);
        opacity: 0.3;
    }

    24% {
        transform: translate(0);
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        opacity: 1;
    }

    26% {
        transform: translate(-28px, 22px) scale(1.25);
        clip-path: polygon(0 62%, 100% 62%, 100% 65%, 0 65%);
        opacity: 0.2;
    }

    28% {
        transform: translate(0);
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        opacity: 1;
    }

    30% {
        transform: translate(30px, -25px) scale(0.75);
        clip-path: polygon(0 72%, 100% 72%, 100% 75%, 0 75%);
        opacity: 0.1;
    }

    32% {
        transform: translate(0);
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        opacity: 1;
    }

    34% {
        transform: translate(-32px, 28px) scale(1.3);
        clip-path: polygon(0 82%, 100% 82%, 100% 85%, 0 85%);
        opacity: 0.15;
    }

    36% {
        transform: translate(0);
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        opacity: 1;
    }

    38% {
        transform: translate(35px, -30px) scale(0.7);
        clip-path: polygon(0 92%, 100% 92%, 100% 95%, 0 95%);
        opacity: 0.25;
    }

    40% {
        transform: translate(0);
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        opacity: 1;
    }

    42% {
        transform: translate(-15px, 32px) scale(1.18);
        clip-path: polygon(0 15%, 100% 15%, 100% 18%, 0 18%);
        opacity: 0.35;
    }

    44% {
        transform: translate(0);
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        opacity: 1;
    }

    46% {
        transform: translate(18px, -35px) scale(0.82);
        clip-path: polygon(0 25%, 100% 25%, 100% 28%, 0 28%);
        opacity: 0.45;
    }

    48% {
        transform: translate(0);
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        opacity: 1;
    }

    50% {
        transform: translate(-20px, 38px) scale(1.15);
        clip-path: polygon(0 35%, 100% 35%, 100% 38%, 0 38%);
        opacity: 0.55;
    }

    52% {
        transform: translate(0);
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        opacity: 1;
    }

    54% {
        transform: translate(22px, -40px) scale(0.85);
        clip-path: polygon(0 45%, 100% 45%, 100% 48%, 0 48%);
        opacity: 0.65;
    }

    56% {
        transform: translate(0);
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        opacity: 1;
    }

    58% {
        transform: translate(-25px, 42px) scale(1.12);
        clip-path: polygon(0 55%, 100% 55%, 100% 58%, 0 58%);
        opacity: 0.75;
    }

    60% {
        transform: translate(0);
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        opacity: 1;
    }

    62% {
        transform: translate(28px, -45px) scale(0.88);
        clip-path: polygon(0 65%, 100% 65%, 100% 68%, 0 68%);
        opacity: 0.85;
    }

    64% {
        transform: translate(0);
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        opacity: 1;
    }

    66% {
        transform: translate(-30px, 48px) scale(1.09);
        clip-path: polygon(0 75%, 100% 75%, 100% 78%, 0 78%);
        opacity: 0.95;
    }

    68% {
        transform: translate(0);
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        opacity: 1;
    }

    70% {
        transform: translate(32px, -50px) scale(0.91);
        clip-path: polygon(0 85%, 100% 85%, 100% 88%, 0 88%);
        opacity: 0.88;
    }

    72% {
        transform: translate(0);
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        opacity: 1;
    }

    74% {
        transform: translate(-35px, 52px) scale(1.05);
        clip-path: polygon(0 5%, 100% 5%, 100% 8%, 0 8%);
        opacity: 0.77;
    }

    76% {
        transform: translate(0);
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        opacity: 1;
    }

    78% {
        transform: translate(38px, -55px) scale(0.95);
        clip-path: polygon(0 25%, 100% 25%, 100% 28%, 0 28%);
        opacity: 0.66;
    }

    80% {
        transform: translate(0);
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        opacity: 1;
    }

    82% {
        transform: translate(-40px, 58px) scale(1.02);
        clip-path: polygon(0 45%, 100% 45%, 100% 48%, 0 48%);
        opacity: 0.55;
    }

    84% {
        transform: translate(0);
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        opacity: 1;
    }

    86% {
        transform: translate(42px, -60px) scale(0.98);
        clip-path: polygon(0 65%, 100% 65%, 100% 68%, 0 68%);
        opacity: 0.44;
    }

    88% {
        transform: translate(0);
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        opacity: 1;
    }

    90% {
        transform: translate(-45px, 62px) scale(1.01);
        clip-path: polygon(0 85%, 100% 85%, 100% 88%, 0 88%);
        opacity: 0.33;
    }

    92% {
        transform: translate(0);
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        opacity: 1;
    }

    94% {
        transform: translate(48px, -65px) scale(0.99);
        clip-path: polygon(0 15%, 100% 15%, 100% 18%, 0 18%);
        opacity: 0.22;
    }

    96% {
        transform: translate(0);
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        opacity: 1;
    }

    98% {
        transform: translate(-50px, 68px) scale(1.005);
        clip-path: polygon(0 35%, 100% 35%, 100% 38%, 0 38%);
        opacity: 0.11;
    }

    100% {
        transform: translate(0);
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        opacity: 1;
    }
}

.glitch {
    animation:
        glitch 0.7s steps(15, end) infinite,
        glitch-chaos 0.6s steps(20, end) infinite,
        glitch-color 1.3s linear infinite;
    position: relative;
    z-index: 100;
    cursor: none;
}

@keyframes shake {

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

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

    20%,
    40%,
    60%,
    80% {
        transform: translate(50px, 0);
    }
}

.shake {
    animation: shake 0.5s cubic-bezier(.36, .07, .19, .97) both;
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    perspective: 1000px;
}