﻿.glitch {
    color: #5a5c69;
    font-size: 7rem;
    position: relative;
    line-height: 1;
    width: 12.5rem;
    margin: 0 auto;
}

@keyframes noise-anim {
    0% {
        clip-path: inset(51% 0 33% 0);
    }

    5% {
        clip-path: inset(71% 0 5% 0);
    }

    10% {
        clip-path: inset(100% 0 1% 0);
    }

    15% {
        clip-path: inset(27% 0 14% 0);
    }

    20% {
        clip-path: inset(55% 0 21% 0);
    }

    25% {
        clip-path: inset(93% 0 2% 0);
    }

    30% {
        clip-path: inset(85% 0 8% 0);
    }

    35% {
        clip-path: inset(99% 0 1% 0);
    }

    40% {
        clip-path: inset(63% 0 4% 0);
    }

    45% {
        clip-path: inset(92% 0 4% 0);
    }

    50% {
        clip-path: inset(39% 0 34% 0);
    }

    55% {
        clip-path: inset(37% 0 60% 0);
    }

    60% {
        clip-path: inset(80% 0 7% 0);
    }

    65% {
        clip-path: inset(15% 0 42% 0);
    }

    70% {
        clip-path: inset(19% 0 35% 0);
    }

    75% {
        clip-path: inset(69% 0 15% 0);
    }

    80% {
        clip-path: inset(58% 0 6% 0);
    }

    85% {
        clip-path: inset(40% 0 22% 0);
    }

    90% {
        clip-path: inset(61% 0 11% 0);
    }

    95% {
        clip-path: inset(84% 0 13% 0);
    }

    100% {
        clip-path: inset(96% 0 2% 0);
    }
}

.glitch::after {
    content: attr(data-text);
    position: absolute;
    left: 2px;
    text-shadow: -1px 0 #e74a3b;
    top: 0;
    color: #5a5c69;
    background: #f8f9fc;
    overflow: hidden;
    animation: noise-anim 2s infinite linear alternate-reverse;
}

@keyframes noise-anim-2 {
    0% {
        clip-path: inset(27% 0 72% 0);
    }

    5% {
        clip-path: inset(98% 0 2% 0);
    }

    10% {
        clip-path: inset(7% 0 39% 0);
    }

    15% {
        clip-path: inset(11% 0 63% 0);
    }

    20% {
        clip-path: inset(23% 0 50% 0);
    }

    25% {
        clip-path: inset(58% 0 8% 0);
    }

    30% {
        clip-path: inset(64% 0 12% 0);
    }

    35% {
        clip-path: inset(99% 0 1% 0);
    }

    40% {
        clip-path: inset(38% 0 44% 0);
    }

    45% {
        clip-path: inset(66% 0 34% 0);
    }

    50% {
        clip-path: inset(42% 0 19% 0);
    }

    55% {
        clip-path: inset(15% 0 37% 0);
    }

    60% {
        clip-path: inset(96% 0 4% 0);
    }

    65% {
        clip-path: inset(45% 0 2% 0);
    }

    70% {
        clip-path: inset(4% 0 11% 0);
    }

    75% {
        clip-path: inset(17% 0 68% 0);
    }

    80% {
        clip-path: inset(27% 0 65% 0);
    }

    85% {
        clip-path: inset(26% 0 42% 0);
    }

    90% {
        clip-path: inset(65% 0 33% 0);
    }

    95% {
        clip-path: inset(33% 0 35% 0);
    }

    100% {
        clip-path: inset(4% 0 87% 0);
    }
}

.glitch::before {
    content: attr(data-text);
    position: absolute;
    left: -2px;
    text-shadow: 1px 0 #4e73df;
    top: 0;
    color: #5a5c69;
    background: #f8f9fc;
    overflow: hidden;
    clip: rect(0,900px,0,0);
    animation: noise-anim-2 3s infinite linear alternate-reverse;
}
