//-------------
// End Keyframes
//-------------

@include keyframes(glitch-anim-1) {
    0% {
        @include transform(translate3d(var(--gap-horizontal), 0, 0));
        @include clip-path(polygon(0 2%, 100% 2%, 100% 5%, 0 5%));
        opacity: 1;
    }

    2%  { @include clip-path(polygon(0 15%, 100% 15%, 100% 15%, 0 15%)); }
    4%  { @include clip-path(polygon(0 10%, 100% 10%, 100% 20%, 0 20%)); }
    6%  { @include clip-path(polygon(0 1%, 100% 1%, 100% 2%, 0 2%)); }
    8%  { @include clip-path(polygon(0 33%, 100% 33%, 100% 33%, 0 33%)); }
    10% { @include clip-path(polygon(0 44%, 100% 44%, 100% 44%, 0 44%)); }
    12% { @include clip-path(polygon(0 50%, 100% 50%, 100% 20%, 0 20%)); }
    14% { @include clip-path(polygon(0 70%, 100% 70%, 100% 70%, 0 70%)); }
    16% { @include clip-path(polygon(0 80%, 100% 80%, 100% 80%, 0 80%)); }
    18% { @include clip-path(polygon(0 50%, 100% 50%, 100% 55%, 0 55%)); }
    20% { @include clip-path(polygon(0 70%, 100% 70%, 100% 80%, 0 80%)); }

    21.9% {
        @include transform(translate3d(var(--gap-horizontal), 0, 0));
        opacity: 1;
    }

    22%, 100% {
        @include transform(translate3d(0, 0, 0));
        @include clip-path(polygon(0 0, 0 0, 0 0, 0 0));
        opacity: 0;
    }
}

@include keyframes(glitch-anim-2) {
    0% {
        @include transform(translate3d(calc(-1 * var(--gap-horizontal)), 0, 0));
        @include clip-path(polygon(0 25%, 100% 25%, 100% 30%, 0 30%));
        opacity: 1;
    }

    3%  { @include clip-path(polygon(0 3%, 100% 3%, 100% 3%, 0 3%)); }
    5%  { @include clip-path(polygon(0 5%, 100% 5%, 100% 20%, 0 20%)); }
    7%  { @include clip-path(polygon(0 20%, 100% 20%, 100% 20%, 0 20%)); }
    9%  { @include clip-path(polygon(0 40%, 100% 40%, 100% 40%, 0 40%)); }
    11% { @include clip-path(polygon(0 52%, 100% 52%, 100% 59%, 0 59%)); }
    13% { @include clip-path(polygon(0 60%, 100% 60%, 100% 60%, 0 60%)); }
    15% { @include clip-path(polygon(0 75%, 100% 75%, 100% 75%, 0 75%)); }
    17% { @include clip-path(polygon(0 65%, 100% 65%, 100% 40%, 0 40%)); }
    19% { @include clip-path(polygon(0 45%, 100% 45%, 100% 50%, 0 50%)); }
    20% { @include clip-path(polygon(0 14%, 100% 14%, 100% 33%, 0 33%)); }

    21.9% {
        @include transform(translate3d(calc(-1 * var(--gap-horizontal)), 0, 0));
        opacity: 1;
    }

    22%, 100% {
        @include transform(translate3d(0, 0, 0));
        @include clip-path(polygon(0 0, 0 0, 0 0, 0 0));
        opacity: 0;
    }
}

@include keyframes(glitch-anim-3) {
    0% {
        @include transform(translate3d(0, calc(-1 * var(--gap-vertical)), 0) scale3d(-1, -1, 1));
        @include clip-path(polygon(0 1%, 100% 1%, 100% 3%, 0 3%));
        opacity: 1;
    }

    1.5%  { @include clip-path(polygon(0 10%, 100% 10%, 100% 9%, 0 9%)); }
    2%    { @include clip-path(polygon(0 5%, 100% 5%, 100% 6%, 0 6%)); }
    2.5%  { @include clip-path(polygon(0 20%, 100% 20%, 100% 20%, 0 20%)); }
    3%    { @include clip-path(polygon(0 10%, 100% 10%, 100% 10%, 0 10%)); }
    5%    { @include clip-path(polygon(0 30%, 100% 30%, 100% 25%, 0 25%)); }
    5.5%  { @include clip-path(polygon(0 15%, 100% 15%, 100% 16%, 0 16%)); }
    7%    { @include clip-path(polygon(0 40%, 100% 40%, 100% 39%, 0 39%)); }
    8%    { @include clip-path(polygon(0 20%, 100% 20%, 100% 21%, 0 21%)); }
    9%    { @include clip-path(polygon(0 60%, 100% 60%, 100% 55%, 0 55%)); }
    10.5% { @include clip-path(polygon(0 30%, 100% 30%, 100% 31%, 0 31%)); }
    11%   { @include clip-path(polygon(0 70%, 100% 70%, 100% 69%, 0 69%)); }
    13%   { @include clip-path(polygon(0 40%, 100% 40%, 100% 41%, 0 41%)); }
    14%   { @include clip-path(polygon(0 80%, 100% 80%, 100% 75%, 0 75%)); }
    14.5% { @include clip-path(polygon(0 50%, 100% 50%, 100% 51%, 0 51%)); }
    15%   { @include clip-path(polygon(0 90%, 100% 90%, 100% 90%, 0 90%)); }
    16%   { @include clip-path(polygon(0 60%, 100% 60%, 100% 60%, 0 60%)); }
    18%   { @include clip-path(polygon(0 100%, 100% 100%, 100% 99%, 0 99%)); }
    20%   { @include clip-path(polygon(0 70%, 100% 70%, 100% 71%, 0 71%)); }

    21.9% {
        @include transform(translate3d(0, calc(-1 * var(--gap-vertical)), 0) scale3d(-1, -1, 1));
        opacity: 1;
    }

    22%, 100% {
        @include transform(translate3d(0, 0, 0));
        @include clip-path(polygon(0 0, 0 0, 0 0, 0 0));
        opacity: 0;
    }
}

@include keyframes(glitch-anim-flash) {
    0%, 5% {
        @include transform(translate3d(var(--gap-horizontal), var(--gap-vertical), 0));
        opacity: 0.2;
    }

    5.5%, 100% {
        @include transform(translate3d(0, 0, 0));
        opacity: 0;
    }
}
//-------------
// End Keyframes
//-------------