.hero {
    font-size: clamp(40px, 10vw, 100px);
    line-height: 1;
    display: inline-block;
    color: #fff;
    z-index: 2;
    letter-spacing: 10px;

    /* Bright things in dark environments usually cast that light, giving off a glow */
    filter: drop-shadow(0 1px 3px);
}

.layers {
    position: relative;
}

.layers::before,
.layers::after {
    content: attr(data-text);
    position: absolute;
    width: 110%;
    z-index: -1;
}

.layers::before {
    top: 10px;
    left: 15px;
    color: #e0287d;
}

.layers::after {
    top: 5px;
    left: -10px;
    color: #1bc7fb;
}

.paths {
    animation: paths 5s step-end infinite;
}

@keyframes paths {
    0% {
        clip-path: polygon(0% 92%, 67% 92%, 67% 90%, 34% 90%, 34% 44%, 94% 44%, 94% 18%, 70% 18%, 70% 14%, 60% 14%, 60% 40%, 71% 40%, 71% 77%, 98% 77%, 98% 59%, 43% 59%, 43% 37%, 70% 37%, 70% 31%, 78% 31%, 78% 29%, 9% 29%, 9% 23%, 57% 23%, 57% 47%, 18% 47%, 18% 47%, 86% 47%, 86% 50%, 54% 50%, 54% 94%, 96% 94%, 96% 91%);
    }

    5% {
        clip-path: polygon(0% 23%, 99% 23%, 99% 89%, 1% 89%, 1% 86%, 64% 86%, 64% 74%, 10% 74%, 10% 33%, 48% 33%, 48% 69%, 97% 69%, 97% 76%, 18% 76%, 18% 21%, 56% 21%, 56% 77%, 99% 77%, 99% 71%, 96% 71%, 96% 15%, 44% 15%, 44% 54%, 34% 54%, 34% 6%, 43% 6%, 43% 82%, 72% 82%, 72% 92%, 87% 92%, 87% 84%, 22% 84%, 22% 35%, 55% 35%, 55% 43%, 84% 43%, 84% 92%, 94% 92%, 94% 3%, 81% 3%, 81% 93%, 38% 93%, 38% 20%, 28% 20%, 28% 68%);
    }

    30% {
        clip-path: polygon(0% 32%, 33% 32%, 33% 66%, 90% 66%, 90% 28%, 93% 28%, 93% 72%, 45% 72%, 45% 12%, 54% 12%, 54% 48%, 44% 48%, 44% 65%, 52% 65%, 52% 28%, 74% 28%, 74% 90%, 8% 90%, 8% 53%, 64% 53%, 64% 91%, 36% 91%, 36% 54%, 81% 54%, 81% 34%, 62% 34%, 62% 69%, 8% 69%, 8% 52%, 14% 52%, 14% 50%, 43% 50%, 43% 55%, 34% 55%, 34% 41%, 33% 41%, 33% 49%, 78% 49%);
    }

    45% {
        clip-path: polygon(0% 65%, 26% 65%, 26% 50%, 94% 50%, 94% 49%, 53% 49%, 53% 36%, 73% 36%, 73% 0%, 46% 0%, 46% 55%, 28% 55%, 28% 52%, 14% 52%, 14% 59%, 93% 59%, 93% 2%, 54% 2%, 54% 5%, 96% 5%, 96% 67%, 21% 67%, 21% 31%, 26% 31%, 26% 98%, 10% 98%, 10% 28%, 11% 28%, 11% 33%, 30% 33%, 30% 82%, 66% 82%, 66% 92%, 68% 92%, 68% 64%);
    }

    76% {
        clip-path: polygon(0% 42%, 6% 42%, 6% 0%, 80% 0%, 80% 59%, 83% 59%, 83% 49%, 50% 49%, 50% 35%, 41% 35%, 41% 28%, 47% 28%, 47% 22%, 93% 22%);
    }

    90% {
        clip-path: polygon(0% 39%, 34% 39%, 34% 65%, 58% 65%, 58% 30%, 62% 30%, 62% 94%, 5% 94%, 5% 77%, 98% 77%, 98% 61%, 6% 61%, 6% 12%, 44% 12%, 44% 72%, 26% 72%);
    }

    1%,
    7%,
    33%,
    47%,
    78%,
    93% {
        clip-path: none;
    }
}

.movement {
    /* Normally this position would be absolute & on the layers, set to relative here so we can see it on the div */
    position: relative;
    animation: movement 8s step-end infinite;
}

@keyframes movement {
    0% {
        top: 0px;
        left: -20px;
    }

    15% {
        top: 10px;
        left: 10px;
    }

    60% {
        top: 5px;
        left: -10px;
    }

    75% {
        top: -5px;
        left: 20px;
    }

    100% {
        top: 10px;
        left: 5px;
    }
}

.opacity {
    animation: opacity 5s step-end infinite;
}

@keyframes opacity {
    0% {
        opacity: 0.1;
    }

    5% {
        opacity: 0.7;
    }

    30% {
        opacity: 0.4;
    }

    45% {
        opacity: 0.6;
    }

    76% {
        opacity: 0.4;
    }

    90% {
        opacity: 0.8;
    }

    1%,
    7%,
    33%,
    47%,
    78%,
    93% {
        opacity: 0;
    }
}

.font {
    animation: font 7s step-end infinite;
}

@keyframes font {
    0% {
        font-weight: 100;
        color: #e0287d;
        filter: blur(3px);
    }

    20% {
        font-weight: 500;
        color: #fff;
        filter: blur(0);
    }

    50% {
        font-weight: 300;
        color: #1bc7fb;
        filter: blur(2px);
    }

    60% {
        font-weight: 700;
        color: #fff;
        filter: blur(0);
    }

    90% {
        font-weight: 500;
        color: #e0287d;
        filter: blur(6px);
    }
}

.glitch span {
    animation: paths 5s step-end infinite;
}

.glitch::before {
    animation: paths 5s step-end infinite, opacity 5s step-end infinite,
        font 8s step-end infinite, movement 10s step-end infinite;
}

.glitch::after {
    animation: paths 5s step-end infinite, opacity 5s step-end infinite,
        font 7s step-end infinite, movement 8s step-end infinite;
}

.hero-container {
    position: relative;
    padding: 200px 0;
    text-align: center;
}