// glitch
.noting {
    a {
        padding: 14px 34px;
        background-color: $body-bg;
        border-radius: 100px;
        color: #fff;
        white-space: nowrap;
        font-weight: 500;
        margin-top: 20px;
        position: relative;

        &:hover {
            border-color: $primary;
            background-color: $primary;
        }
    }

    .glitch {
        color: #fff;
        margin: 0;
        text-transform: uppercase;
        letter-spacing: 2px;
        font-size: 2rem;
        position: relative;
        white-space: nowrap;
        font-weight: 900;

        &.glitch-text-lg {
            font-size: 4rem;
            font-weight: 900;
        }
        &.glitch-text {
            font-size: 1rem;
            font-weight: 900;
        }

        &:after,
        &:before {
            content: attr(data-text);
            position: absolute;
            top: 0;
            color: #fff;
            background-color: $body-bg;
            overflow: hidden;
        }

        &:after {
            left: 2px;
            text-shadow: -1px 0 #ff1b1b;
            animation: glitch1 5s infinite ease;
        }

        &:before {
            left: -2px;
            text-shadow: 1px 0 #2124ff;
            animation: glitch2 15s infinite ease;
        }
    }
}

@include media-breakpoint-down(sm) {
    .noting {


        .glitch {
            font-size: 4rem;

            &.glitch-text {
                font-size: 1.5rem;
                font-weight: 900;
            }
        }
    }
}

@keyframes glitch1 {
    $steps: 25;

    @for $i from 0 through $steps {
        #{percentage($i*(1/$steps))} {
            $top: random(100) * 1%;
            $bottom: random(101-$top) * 1%;
            clip-path: inset(#{$top} 0 #{$bottom} 0);
        }
    }
}

@keyframes glitch2 {
    $steps: 25;

    @for $i from 0 through $steps {
        #{percentage($i*(1/$steps))} {
            $top: random(100) * 1%;
            $bottom: random(101-$top) * 1%;
            clip-path: inset(#{$top} 0 #{$bottom} 0);
        }
    }
}