/* Base Glitch effect by Tee Diang https://codepen.io/elisabethdiang/pen/WNbBxXq*/

.glitch {position: relative;animation: glitch 5s 5s infinite;}

.glitch::before {content: attr(data-text);position: absolute;left: -2px;text-shadow: -5px 0 magenta;background: black;overflow: hidden;top: 0;animation: noise-1 3s linear infinite alternate-reverse, glitch 5s 5.05s infinite;}

.glitch::after {content: attr(data-text);position: absolute;left: 2px;text-shadow: -5px 0 lightgreen;background: black;overflow: hidden;top: 0;animation: noise-2 3s linear infinite alternate-reverse, glitch 5s 5s infinite;}

@media (prefers-color-scheme: light) {
    .glitch::before {
        background-color: white;
        text-shadow: darkmagenta;
    }

    .glitch::after {
        background-color: white;
        text-shadow: darkgreen;
    }
}

@media (prefers-color-scheme: dark) {
    .glitch::before {
        background-color: black;
        text-shadow: magenta;
    }

    .glitch::after {
        background-color: black;
        text-shadow: lightgreen;
    }
}

@keyframes glitch {
    1% {transform: rotateX(10deg) skewX(90deg);}
    2% {transform: rotateX(0deg) skewX(0deg);}
}

@keyframes noise-1 {
    3.33333% {clip-path: inset(13px 0 2px 0);}
    6.66667% {clip-path: inset(81px 0 16px 0);}
    10% {clip-path: inset(60px 0 41px 0);}
    13.33333% {clip-path: inset(73px 0 28px 0);}
    16.66667% {clip-path: inset(29px 0 37px 0);}
    20% {clip-path: inset(43px 0 29px 0);}
    23.33333% {clip-path: inset(33px 0 18px 0);}
    26.66667% {clip-path: inset(45px 0 48px 0);}
    30% {clip-path: inset(89px 0 4px 0);}
    33.33333% {clip-path: inset(22px 0 16px 0);}
    36.66667% {clip-path: inset(74px 0 13px 0);}
    40% {clip-path: inset(76px 0 1px 0);}
    43.33333% {clip-path: inset(52px 0 7px 0);}
    46.66667% {clip-path: inset(84px 0 1px 0);}
    50% {clip-path: inset(49px 0 46px 0);}
    53.33333% {clip-path: inset(7px 0 17px 0);}
    56.66667% {clip-path: inset(44px 0 5px 0);}
    60% {clip-path: inset(72px 0 6px 0);}
    63.33333% {clip-path: inset(62px 0 12px 0);}
    66.66667% {clip-path: inset(77px 0 17px 0);}
    70% {clip-path: inset(87px 0 6px 0);}
    73.33333% {clip-path: inset(64px 0 25px 0);}
    76.66667% {clip-path: inset(89px 0 2px 0);}
    80% {clip-path: inset(76px 0 15px 0);}
    83.33333% {clip-path: inset(43px 0 2px 0);}
    86.66667% {clip-path: inset(42px 0 36px 0);}
    90% {clip-path: inset(39px 0 25px 0);}
    93.33333% {clip-path: inset(48px 0 5px 0);}
    96.66667% {clip-path: inset(1px 0 14px 0);}
    100% {clip-path: inset(19px 0 24px 0);}
}

@keyframes noise-2 {
    0% {clip-path: inset(93px 0 5px 0);}
    3.33333% {clip-path: inset(24px 0 10px 0);}
    6.66667% {clip-path: inset(21px 0 32px 0);}
    10% {clip-path: inset(79px 0 10px 0);}
    13.33333% {clip-path: inset(65px 0 1px 0);}
    16.66667% {clip-path: inset(40px 0 15px 0);}
    20% {clip-path: inset(55px 0 40px 0);}
    23.33333% {clip-path: inset(30px 0 68px 0);}
    26.66667% {clip-path: inset(46px 0 33px 0);}
    30% {clip-path: inset(44px 0 48px 0);}
    33.33333% {clip-path: inset(24px 0 65px 0);}
    36.66667% {clip-path: inset(99px 0 1px 0);}
    40% {clip-path: inset(82px 0 1px 0);}
    43.33333% {clip-path: inset(58px 0 5px 0);}
    46.66667% {clip-path: inset(1px 0 71px 0);}
    50% {clip-path: inset(83px 0 15px 0);}
    53.33333% {clip-path: inset(82px 0 3px 0);}
    56.66667% {clip-path: inset(39px 0 6px 0);}
    60% {clip-path: inset(36px 0 31px 0);}
    63.33333% {clip-path: inset(82px 0 1px 0);}
    66.66667% {clip-path: inset(42px 0 16px 0);}
    70% {clip-path: inset(48px 0 35px 0);}
    73.33333% {clip-path: inset(43px 0 31px 0);}
    76.66667% {clip-path: inset(66px 0 13px 0);}
    80% {clip-path: inset(45px 0 43px 0);}
    83.33333% {clip-path: inset(81px 0 8px 0);}
    86.66667% {clip-path: inset(69px 0 16px 0);}
    90% {clip-path: inset(85px 0 9px 0);}
    93.33333% {clip-path: inset(48px 0 45px 0);}
    96.66667% {clip-path: inset(86px 0 9px 0);}
    100% {clip-path: inset(90px 0 5px 0);}
}