anim.scss

@import 'common';

$emote-prefix: '.chat-emote-';
$css-animated-emote-animations: ();
$css-animated-emote-can-animate-forever: false;
$context-css-animated-emote-mixin: false;

// Mixin for defining an emote with a css animation.
// Should be used in combination with emote-animation mixin.
@mixin css-animated-emote($name, $can-animate-forever: false) {
    $context-css-animated-emote-mixin: true !global;
    $css-animated-emote-can-animate-forever: $can-animate-forever !global;
    #{$emote-prefix + $name} {
        @content;
        animation: $css-animated-emote-animations;
        $css-animated-emote-animations: () !global;

        &:hover {
            animation-iteration-count: infinite;
        }

        @if $can-animate-forever {
            &-animate-forever {
                animation-iteration-count: infinite;
            }
        }
    }

    $context-css-animated-emote-mixin: false !global;
}

// Mixin for defining an animation within a css-animated-emote mixin.
// $animation-properties takes the same properties as the `animation` property.
// The mixin body takes the `@keyframes` definition.
@mixin emote-animation($animation-duration, $iteration-count){
    @if not $context-css-animated-emote-mixin {
        @error '`emote-animation` should be used inside `css-animated-emote` mixin!';
    }

    $index: length($css-animated-emote-animations);
    $suffix: if($index != 0, -#{$index}, '');
    $emote-name: str_slice( inspect(&), 2 + str_length($emote-prefix), -3 );
    $animation-name: #{$emote-name}-anim#{$suffix};

    @at-root {
        @keyframes #{$animation-name} {
            @content;
        }
    }

    $css-animated-emote-animations:
        append(
            $css-animated-emote-animations,
            $animation-duration $iteration-count $animation-name,
            comma
        ) !global;

    .generify-container.fast & {
        animation-duration: $animation-duration * 0.5;
        animation-iteration-count: $iteration-count * 2;

        &:hover {
            animation-iteration-count: infinite;
        }

        @if $css-animated-emote-can-animate-forever {
            &-animate-forever {
                animation-iteration-count: infinite;
            }
        }
    }

    .generify-container.slow & {
        animation-duration: $animation-duration * 2;
    }
}

@include css-animated-emote(OverRustle) {
    @include emote-animation(100ms, 7) {
        0% { transform: translateX(0); }
        100% { transform: translateX(3px); }
    }
}

@include css-animated-emote(MLADY) {
    transform-origin: 4px bottom;

    @include emote-animation(250ms, 3) {
        0% {
            transform: rotate(0deg);
        }
        30% {
            transform: rotate(20deg);
        }
        80% {
            transform: rotate(-10deg);
        }
        100% {
            transform: rotate(0deg);
        }
    }
}

@include css-animated-emote(SpookerZ) {
    @include emote-animation(250ms, 3) {
        0% {
            transform: translate(0px 0px);
        }
        25% {
            transform: translate(0px, 4px);
        }
        75% {
            transform: rotate(-10deg);
        }
        100% {
            transform: rotate(0deg);
            transform-origin: 4px bottom;
        }
    }
}

@include css-animated-emote(DANKMEMES) {
    @include emote-animation(1s, 2) {
        0%, 100% {
            filter: hue-rotate(0deg);
        }
        50% {
            filter: hue-rotate(360deg);
        }
    }
}

@include css-animated-emote(WEEWOO) {
    @include emote-animation(1.5s, 1) {
        0%, 100% {
            opacity: 1;
        }
        10% {
            opacity: 0.5;
            filter: hue-rotate(0deg);
        }
        11% {
            filter: hue-rotate(170deg);
        }
        35% {
            opacity: 1;
        }
        50% {
            opacity: 0.2;
            filter: hue-rotate(170deg);
        }
        51% {
            filter: hue-rotate(310deg);
        }
        65% {
            opacity: 1;
        }
        90%{
            opacity: 0.2;
            filter: hue-rotate(310deg);
        }
        91% {
            filter: hue-rotate(0deg);
        }
    }
}

@include css-animated-emote(Hhhehhehe) {
    @include emote-animation(500ms, 1) {
        0% {
            transform: translate(0px, 0px) rotate(-0deg);
        }
        20% {
            transform: translate(0px, 3px) rotate(-6deg);
        }
        40% {
            transform: translate(0px, 0px) rotate(-0deg);
        }
        60% {
            transform: translate(0px, 3px) rotate(-6deg);
        }
        80% {
            transform: translate(0px, 0px) rotate(-0deg);
        }
        100% {
            transform: translate(0px, 3px) rotate(-6deg);
        }
    }
}

@include css-animated-emote(ITSRAWWW) {
    @include emote-animation(100ms, 7) {
        0% { transform: translateX(0); }
        100% { transform: translateX(3px); }
    }
}

@include css-animated-emote(DJPepo, true) {
    @include emote-animation(500ms, 7) {
        0% { transform: translateY(0); }
        100% { transform: translateY(2px); }
    }
}

@include css-animated-emote(PepeLaugh, true) {
    @include emote-animation(200ms, 5) {
        0% { transform: translate(0px, 0px); }
        50% { transform: translate(0px, 3px); }
        100% { transform: translate(0px, 0px); }
    }
}

@include css-animated-emote(NeneLaugh, true) {
    @include emote-animation(200ms, 5) {
        0% { transform: translate(0px, 0px); }
        50% { transform: translate(0px, 3px); }
        100% { transform: translate(0px, 0px); }
    }
}

@mixin Gigachad() {
    .text > .generify-container:has(+ .generify-container.generify-emote-Gigachad[data-modifiers~="mirror"]) {
        @content;
    }
    .text > .generify-container.generify-emote-Gigachad:not([data-modifiers~="mirror"]) + .generify-container {
        @content;
    }
}

@include Gigachad() {
    animation: Gigachad-shake-anim 6s 375ms linear;
    transform-origin: 50% 100%;

    &::before, &::after {
        content: "";
        pointer-events: none;
        position: absolute;
        top: 50%;
        left: 50%;
        margin: -8px -6px;
        width: 16px;
        height: 12px;
        background-image: url("/assets/emotes/modifiers/fireball.png");
        background-size: 240px 12px;
        background-position: 16px 0px;
        background-repeat: no-repeat;
        animation: Gigachad-fireball-anim 750ms 8 step-start, Gigachad-fireball-fly-anim 6s linear;
        animation-fill-mode: none, forwards;
        z-index: 2;
    }

    &::before {
        @for $i from 0 to 8 {
            #{"--offset-x-" + $i}: (random(60) + 20) * 1%;
            #{"--offset-y-" + $i}: (random(40) + 20) * 1%;
            #{"--scale-" + $i}: (random(50) + 100) * 1%;
        }
        animation-delay: 0.5s;
    }

    &::after {
        @for $i from 0 to 8 {
            #{"--offset-x-" + $i}: (random(60) + 20) * 1%;
            #{"--offset-y-" + $i}: (random(40) + 20) * 1%;
            #{"--scale-" + $i}: (random(100) + 100) * 1%;
        }
    }

    @at-root .pref-animateforever &, &:hover {
        animation-iteration-count: infinite;
    }

    @at-root .pref-animateforever &::before, &:hover::before {
        animation-iteration-count: infinite;
    }

    @at-root .pref-animateforever &::after, &:hover::after {
        animation-iteration-count: infinite;
    }
}

@keyframes Gigachad-shake-anim {
    $cycles: 16;
    @for $i from 0 to $cycles {
        #{100 / $cycles * ($i) * 1%} {
            transform: scaleY(1);
            filter: brightness(1);
        }
        #{100 / $cycles * ($i + 2/15) * 1%} {
            transform: scaleY(1);
            filter: brightness(1.3);
        }
        #{100 / $cycles * ($i + 6/15) * 1%} {
            transform: scaleY((random(30) + 60) * 1%);
            filter: brightness(1.2);
        }
        #{100 / $cycles * ($i + 1) * 1% - 1%} {
            transform: scaleY(1);
            filter: brightness(1);
        }
    }
}

@keyframes Gigachad-fireball-anim {
    $frames: 15;
    $width: 240px;
    @for $i from 0 to $frames {
        #{100 / $frames * $i * 1%} {
            background-position-x: -$width / $frames * $i;
        }
    }
    100% {
        background-position-x: 240px;
    }
}

@keyframes Gigachad-fireball-fly-anim {
    $cycles: 8;
    @for $i from 0 to $cycles {
        #{100 / $cycles * $i * 1%} {
            transform: translateY(-30px) rotate(90deg) scale(var(#{"--scale-" + $i}));
            left: var(#{"--offset-x-" + $i});
            top: var(#{"--offset-y-" + $i});
        }
        #{100 / $cycles * ($i + 7/15) * 1%} {
            transform: translateY(0) rotate(90deg) scale(var(#{"--scale-" + $i}));
        }
        #{100 / $cycles * ($i + 1) * 1% - 1%} {
            transform: translateY(0) rotate(90deg) scale(var(#{"--scale-" + $i}));
            left: var(#{"--offset-x-" + $i});
            top: var(#{"--offset-y-" + $i});
        }
    }
}

@keyframes emote-hit {
    0% { color: #B91010; font-size:200%; }
    1% { color: $color-light; font-size:190%; }
    2% { color: #B91010; font-size:200%; }
    3% { color: $color-light; font-size:190%; }
    4% { color: #B91010; font-size:200%; }
    100% { color: $color-light; font-size:120%; }
}

@keyframes rustle {
    from { transform: translateX(0); }
    to { transform: translateX(3px); }
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

@keyframes dankmemes-anim {
    0%, 100% {
        filter: hue-rotate(0deg);
    }
    50% {
        filter: hue-rotate(360deg);
    }
}

@keyframes Shekels-anim {
    0% {
        top: -25px;
    }
    99% {
        top: 30px;
    }
    100%{
        top: -25px;
    }
}

.chat-emote.chat-emote-NOBULLY:hover {
    filter: invert(100%);
}

$spritesDir : '/assets/emotes/emoticons-animated/';

@mixin sprite-animation(
        $file-name,
        $frame-count,
        $sprite-width,
        $sprite-height,
        $animation-duration,
        $animation-direction: normal,
        $iteration-count: 1,
        $end-on-frame: 0,
        $end-on-last-frame: false,
        $can-animate-forever: true,
        $hold-start-frames: 0,
        $hold-end-frames: 0,
        $extra-animation: false,
        $extra-animation-duration: 0s,
        $extra-animation-timing-function: ease,
        $extra-animation-delay: 0s,
        $extra-animation-iteration-count: 1,
        $extra-animation-direction: normal,
        $extra-animation-fill-mode: none,
        $extra-animation-play-state: running,
        $file-ext: '.png') {

    $path: $spritesDir + $file-name + $file-ext;
    $frame-width: $sprite-width / $frame-count;
    $total-frame-count: $frame-count + $hold-start-frames + $hold-end-frames;
    $animation-duration: $animation-duration / $frame-count * $total-frame-count;
    $steps: $frame-count;
    @if $hold-start-frames != 0 or $hold-end-frames != 0 {
        $steps: $frame-count - 1;
    }

    @if $frame-width != round($frame-width) {
        @error
            "$sprite-width should be divisible by $frame-count to prevent blurry rendering
            Error on sprite-animation \"#{$file-name}\"";
    }

    @if $extra-animation {
        @keyframes #{$file-name}-extra-anim {
            @content
        }
    }

    @keyframes #{$file-name}-anim {
        0% {
            background-position-x: 0px;
        }

        @if $hold-start-frames != 0 {
            #{100% / $total-frame-count * $hold-start-frames} {
                background-position-x: 0px;
            }
        }

        @if $hold-end-frames != 0 {
            #{100% - 100% / $total-frame-count * $hold-end-frames} {
                background-position-x: -#{$sprite-width - $frame-width};
            }
        }

        100% {
            @if $hold-start-frames != 0 or $hold-end-frames != 0 {
                background-position-x: -#{$sprite-width - $frame-width};
            }
            @else {
                background-position-x: -#{$sprite-width};
            }
        }
    }

    .chat-emote-#{$file-name} {
        width: $frame-width;
        height: $sprite-height;
        margin-top: -$sprite-height;
        background-position-y: center;
        transform: translateZ(1px);

        @if $extra-animation {
            animation: #{$file-name}-anim $animation-duration steps($steps) $iteration-count none $animation-direction, #{$file-name}-extra-anim $extra-animation-duration $extra-animation-timing-function $extra-animation-delay $extra-animation-iteration-count $extra-animation-direction $extra-animation-fill-mode $extra-animation-play-state;
            &:hover,
            &-animate-forever {
                animation: #{$file-name}-anim $animation-duration steps($steps) infinite $animation-direction, #{$file-name}-extra-anim $extra-animation-duration $extra-animation-timing-function $extra-animation-delay infinite $extra-animation-direction $extra-animation-fill-mode $extra-animation-play-state;
            }
        }
        @else {
            animation: #{$file-name}-anim $animation-duration steps($steps) $iteration-count none $animation-direction;
            &:hover,
            &-animate-forever {
                animation: #{$file-name}-anim $animation-duration steps($steps) infinite $animation-direction;
            }
        }

        $frame-width: $sprite-width / $frame-count;
        @if $end-on-last-frame {
            background-position-x: -#{$sprite-width - $frame-width};
        }
        @else if $end-on-frame != 0 {
            background-position-x: -#{$end-on-frame * $frame-width};
        }
        @else {
            background-position-x: left;
        }
    }

    .generify-emote-#{$file-name} {
        @include dank-animation(
            $file-name: $file-name,
            $animation-duration: $animation-duration,
            $iteration-count: $iteration-count,
        )
    }

    .generify-emote-#{$file-name} .fast {
        .chat-emote-#{$file-name} {
            @if $extra-animation {
                animation-duration: $animation-duration * 0.5, $extra-animation-duration * 0.5;
                animation-iteration-count: $iteration-count * 2, $extra-animation-iteration-count * 2;
            }
            @else {
                animation-duration: $animation-duration * 0.5;
                animation-iteration-count: $iteration-count * 2;
            }

            &:hover {
                animation-iteration-count: infinite;
            }

            @if $can-animate-forever {
                &-animate-forever {
                    animation-iteration-count: infinite;
                }
            }
        }
    }
    .generify-emote-#{$file-name} .reverse {
        .chat-emote-#{$file-name} {
          animation-direction:reverse;

            &:hover {
                animation-iteration-count: infinite;
            }

            @if $can-animate-forever {
                &-animate-forever {
                    animation-iteration-count: infinite;
                }
            }
        }
    }

    .generify-emote-#{$file-name} .slow {
        .chat-emote-#{$file-name} {
            @if $extra-animation {
                animation-duration: $animation-duration * 2, $extra-animation-duration * 2;
            }
            @else {
                animation-duration: $animation-duration * 2;
            }
        }

        @include dank-animation(
            $file-name: $file-name,
            $animation-duration: $animation-duration * 2,
            $iteration-count: $iteration-count,
            $dank-animation-duration: 2s
        )
    }
}

@mixin dank-animation(
        $file-name,
        $animation-duration,
        $iteration-count,
        $dank-animation-duration: 1s) {
    .generify-dank {
        animation: dankmemes-anim $dank-animation-duration #{$animation-duration / $dank-animation-duration * $iteration-count};
    }

    .generify-dank:hover {
        animation: dankmemes-anim $dank-animation-duration infinite;
    }
}

@include sprite-animation(
    $file-name: MiyanoHype,
    $frame-count: 10,
    $sprite-width: 320px,
    $sprite-height: 32px,
    $animation-duration: 800ms,
    $iteration-count: 3
);

@include sprite-animation(
    $file-name: Clap,
    $frame-count: 2,
    $sprite-width: 64px,
    $sprite-height: 32px,
    $animation-duration: 400ms,
    $iteration-count: 5
);

@include sprite-animation(
    $file-name: CuckCrab,
    $frame-count: 20,
    $sprite-width: 640px,
    $sprite-height: 32px,
    $animation-duration: 600ms,
    $iteration-count: 5
);

@include sprite-animation(
    $file-name: RaveDoge,
    $frame-count: 29,
    $sprite-width: 1276px,
    $sprite-height: 30px,
    $animation-duration: 2000ms,
    $iteration-count: 3
);

@include sprite-animation(
    $file-name: PepeJam,
    $frame-count: 4,
    $sprite-width: 132px,
    $sprite-height: 32px,
    $animation-duration: 250ms,
    $iteration-count: 8
);

@include sprite-animation(
    $file-name: SNAP,
    $frame-count: 15,
    $sprite-width: 750px,
    $sprite-height: 32px,
    $animation-duration: 1000ms,
    $iteration-count: 2
);

@include sprite-animation(
    $file-name: BONK,
    $frame-count: 2,
    $sprite-width: 110px,
    $sprite-height: 32px,
    $animation-duration: 500ms,
    $iteration-count: 10
);

@include sprite-animation(
    $file-name: ComfyWAG,
    $frame-count: 2,
    $sprite-width: 76px,
    $sprite-height: 32px,
    $animation-duration: 500ms,
    $iteration-count: 10
);


@include sprite-animation(
    $file-name: illyaTriggered,
    $frame-count: 8,
    $sprite-width: 256px,
    $sprite-height: 32px,
    $animation-duration: 400ms,
    $iteration-count: 4,
    $can-animate-forever: true
);

@include sprite-animation(
    $file-name: OhISee,
    $frame-count: 20,
    $sprite-width: 640px,
    $sprite-height: 32px,
    $animation-duration: 1200ms,
    $iteration-count: 2,
    $can-animate-forever: false
);

@include sprite-animation(
    $file-name: FeelsCountryMan,
    $frame-count: 15,
    $sprite-width: 480px,
    $sprite-height: 32px,
    $animation-duration: 850ms,
    $iteration-count: 4,
    $can-animate-forever: true
);

@include sprite-animation(
    $file-name: SNAP,
    $frame-count: 6,
    $sprite-width: 180px,
    $sprite-height: 30px,
    $animation-duration: 360ms,
    $iteration-count: 2,
    $can-animate-forever: false
);

@include sprite-animation(
    $file-name: HiHi,
    $frame-count: 19,
    $sprite-width: 570px,
    $sprite-height: 30px,
    $animation-duration: 1900ms,
    $iteration-count: 2,
    $can-animate-forever: true
);

@include sprite-animation(
    $file-name: HACKER,
    $frame-count: 16,
    $sprite-width: 816px,
    $sprite-height: 32px,
    $animation-duration: 1600ms,
    $iteration-count: 2,
    $can-animate-forever: true
);

@include sprite-animation(
    $file-name: KEKW,
    $frame-count: 16,
    $sprite-width: 1024px,
    $sprite-height: 32px,
    $animation-duration: 400ms,
    $iteration-count: 7,
    $can-animate-forever: true
);

@include sprite-animation(
    $file-name: catJAM,
    $frame-count: 158,
    $sprite-width: 4424px,
    $sprite-height: 28px,
    $animation-duration: 6500ms,
    $iteration-count: 2,
    $can-animate-forever: true
);

@include sprite-animation(
    $file-name: WAYTOODANK,
    $frame-count: 90,
    $sprite-width: 2520px,
    $sprite-height: 28px,
    $animation-duration: 1800ms,
    $iteration-count: 2,
    $end-on-frame: 45,
    $can-animate-forever: true
);

@include sprite-animation(
    $file-name: REE,
    $frame-count: 39,
    $sprite-width: 1248px,
    $sprite-height: 32px,
    $animation-duration: 3900ms,
    $animation-direction: alternate,
    $iteration-count: 2,
    $can-animate-forever: true,
    $extra-animation: true,
    $extra-animation-duration: 100ms,
    $extra-animation-iteration-count: 64
) {
    0% { transform: translateX(0); }
    100% { transform: translateX(3px); }
}

@include sprite-animation(
    $file-name: RIDIN,
    $frame-count: 8,
    $sprite-width: 640px,
    $sprite-height: 32px,
    $animation-duration: 2000ms,
    $iteration-count: 7,
    $can-animate-forever: true
);

@include sprite-animation(
    $file-name: Cinnabunny,
    $frame-count: 5,
    $sprite-width: 140px,
    $sprite-height: 28px,
    $animation-duration: 500ms,
    $iteration-count: 7,
    $can-animate-forever: true
);

@include sprite-animation(
    $file-name: monkaSteer,
    $frame-count: 24,
    $sprite-width: 648px,
    $sprite-height: 25px,
    $animation-duration: 1680ms,
    $iteration-count: 3,
    $can-animate-forever: true
);

@include sprite-animation(
    $file-name: NODDERS,
    $frame-count: 4,
    $sprite-width: 112px,
    $sprite-height: 28px,
    $animation-duration: 320ms,
    $iteration-count: 16,
    $can-animate-forever: true
);

@include sprite-animation(
    $file-name: NOPERS,
    $frame-count: 8,
    $sprite-width: 224px,
    $sprite-height: 28px,
    $animation-duration: 640ms,
    $iteration-count: 16,
    $can-animate-forever: true,
);

@include sprite-animation(
    $file-name: PeepoRun,
    $frame-count: 6,
    $sprite-width: 168px,
    $sprite-height: 28px,
    $animation-duration: 420ms,
    $iteration-count: 12,
    $can-animate-forever: true
);

@include sprite-animation(
    $file-name: DuckJAM,
    $frame-count: 55,
    $sprite-width: 1540px,
    $sprite-height: 28px,
    $animation-duration: 5500ms,
    $iteration-count: 1,
    $can-animate-forever: true
);

@include sprite-animation(
    $file-name: TANTIES,
    $frame-count: 10,
    $sprite-width: 280px,
    $sprite-height: 28px,
    $animation-duration: 1400ms,
    $iteration-count: 5,
    $can-animate-forever: true
);

@include sprite-animation(
    $file-name: modCheck,
    $frame-count: 28,
    $sprite-width: 784px,
    $sprite-height: 28px,
    $animation-duration: 3.6s,
    $iteration-count: 2,
    $end-on-last-frame: true,
    $can-animate-forever: true
);

@include sprite-animation(
    $file-name: WICKEDSTEER,
    $frame-count: 24,
    $sprite-width: 672px,
    $sprite-height: 28px,
    $animation-duration: 1.5s,
    $iteration-count: 5,
    $can-animate-forever: true
);

@include sprite-animation(
    $file-name: PaPaTuTuWaWa,
    $frame-count: 104,
    $sprite-width: 3328px,
    $sprite-height: 32px,
    $animation-duration: 5.2s,
    $iteration-count: 2,
    $can-animate-forever: true
);

@include sprite-animation(
    $file-name: Gigachad,
    $frame-count: 60,
    $sprite-width: 3120px,
    $sprite-height: 32px,
    $animation-duration: 2s,
    $animation-direction: alternate,
    $iteration-count: 2,
    $can-animate-forever: true
);

.PeepoRunCombo span:not(:first-child){
    margin-left: -10px;
}
.AlienPlsCombo span:not(:first-child){
    margin-left: -5px;
}

@include sprite-animation(
    $file-name: PepoCopter,
    $frame-count: 3,
    $sprite-width: 174px,
    $sprite-height: 32px,
    $animation-duration: 240ms,
    $iteration-count: 37.5,
    $can-animate-forever: true,
    $extra-animation: true,
    $extra-animation-duration: 480ms,
    $extra-animation-iteration-count: 18.75,
    $extra-animation-timing-function: ease-in-out,
    $extra-animation-direction: alternate
) {
    0% { transform: translateY(0); }
    100% { transform: translateY(3px); }
};

@include sprite-animation(
    $file-name: OHTTER,
    $frame-count: 42,
    $sprite-width: 1386px,
    $sprite-height: 32px,
    $animation-duration: 1.4s,
    $animation-direction: alternate,
    $iteration-count: 1,
    $can-animate-forever: true,
    $end-on-last-frame: true,
    $extra-animation: true,
    $extra-animation-duration: 1.4s,
    $extra-animation-iteration-count: 1,
    $extra-animation-timing-function: ease-out,
    $extra-animation-direction: alternate
) {
    0% {
        transform: scale(1) translate(0, 0);
        clip-path: inset(0);
    }
    30% {
        transform: scale(1.2) translate(-5%, 10%);
        clip-path: inset(0 5% 20% 15%);
    }
    100% {
        transform: scale(1.2) translate(-5%, 10%);
        clip-path: inset(0 5% 20% 15%);
    }
};

.chat-emote.chat-emote-OHTTER {
    transform: scale(1.2) translate(-5%, 10%);
    clip-path: inset(0 5% 20% 15%);
}

@include sprite-animation(
    $file-name: SHUSH,
    $frame-count: 4,
    $sprite-width: 112px,
    $sprite-height: 28px,
    $animation-duration: 4s,
    $iteration-count: 2,
    $can-animate-forever: true,
    $end-on-last-frame: true
);

@include sprite-animation(
    $file-name: AlienPls,
    $frame-count: 148,
    $sprite-width: 2812px,
    $sprite-height: 32px,
    $animation-duration: 7.4s,
    $iteration-count: 1,
    $can-animate-forever: true,
    $end-on-last-frame: true
);

@include sprite-animation(
    $file-name: Aware,
    $frame-count: 60,
    $sprite-width: 1680px,
    $sprite-height: 28px,
    $animation-duration: 4.2s,
    $iteration-count: 1,
    $can-animate-forever: true,
    $end-on-last-frame: true
);

@include sprite-animation(
    $file-name: STIR,
    $frame-count: 17,
    $sprite-width: 663px,
    $sprite-height: 32px,
    $animation-duration: 1.8s,
    $iteration-count: 3,
    $can-animate-forever: true,
);

@include sprite-animation(
    $file-name: CLASSIC,
    $frame-count: 51,
    $sprite-width: 1836px,
    $sprite-height: 32px,
    $animation-duration: 2.55s,
    $iteration-count: 3,
    $can-animate-forever: true,
);

@include sprite-animation(
    $file-name: CONTEXT,
    $frame-count: 2,
    $sprite-width: 148px,
    $sprite-height: 32px,
    $animation-duration: 500ms,
    $iteration-count: 14,
    $can-animate-forever: true
);

@include css-animated-emote(PepoTurkey) {
    transform-style: preserve-3d;
    transform-origin: bottom center;

    @include emote-animation(1.4s, 4) {
        0% {
            transform: translateY(0px);
        }
        6.25% {
            transform: translateY(-3px) translateX(1px) rotate(7deg);
        }
        12.5% {
            transform: translateY(-5px) translateX(4px) rotate(12deg);
        }
        18.75% {
            transform: translateY(-3px) translateX(1px) rotate(7deg);
        }
        25% {
            transform: translateY(0px);
        }

        31.25% {
            transform: translateY(-3px) translateZ(1px) rotate(7deg);
        }
        37.5% {
            transform: translateY(-5px) translateZ(4px) rotate(25deg);
        }
        43.75% {
            transform: translateY(-3px) translateZ(1px) rotate(7deg);
        }
        50% {
            transform: translateY(0px);
        }

        56.25% {
            transform: translateY(-3px) translateX(-1px) rotate(-7deg);
        }
        62.5% {
            transform: translateY(-5px) translateX(-4px) rotate(-12deg);
        }
        68.75% {
            transform: translateY(-3px) translateX(-1px) rotate(-7deg);
        }
        75% {
            transform: translateY(0px);
        }

        81.25% {
            transform: translateY(-3px) translateZ(-1px) rotate(-7deg);
        }
        87.5% {
            transform: translateY(-5px) translateZ(-4px) rotate(-25deg);
        }
        93.75% {
            transform: translateY(-3px) translateZ(-1px) rotate(-7deg);
        }
        100% {
            transform: translateY(0px);
        }
    }
}


@mixin PsiStormMirror($name) {
    .text > .generify-container:has(+ .generify-container.generify-emote-#{$name}[data-modifiers~="mirror"]) {
        @content;
    }
    .text > .generify-container.generify-emote-#{$name}:not([data-modifiers~="mirror"]) + .generify-container {
        @content;
    }
}

@mixin PsiStorm($name) {
    @include PsiStormMirror($name) {
        margin-right: 0;
        margin-left: 0;
        animation: PsiStorm-flicker-anim 2s 3;

        &::after, &::before {
            content: "";
            pointer-events: none;
            position: absolute;
            top: 50;
            left: 50%;
            margin: -20px -28px;
            width: 64px;
            height: 48px;
        }

        &::before {
            opacity: 0.8;
            mix-blend-mode: screen;
            background-color: #00a;
            mask-image: url("/assets/emotes/modifiers/psistorm-mask.png");
            mask-size: 896px 48px;
            mask-position: 64px 0px;
            mask-repeat: no-repeat;
            animation: PsiStorm-mask-anim 2s 3;
            animation-timing-function: step-start;
            z-index: 2;
        }

        &::after {
            background-image: url("/assets/emotes/modifiers/psistorm.png");
            background-size: 896px 48px;
            background-position-x: 64px;
            background-repeat: no-repeat;
            animation: PsiStorm-anim 2s 3;
            animation-timing-function: step-start;
            z-index: 3;
            filter: brightness(120%);
        }

        @at-root .pref-animateforever &, &:hover {
            animation-iteration-count: infinite;
        }

        @at-root .pref-animateforever &::before, &:hover::before {
            animation-iteration-count: infinite;
        }

        @at-root .pref-animateforever &::after, &:hover::after {
            animation-iteration-count: infinite;
        }
    }
}

@keyframes PsiStorm-flicker-anim {
    $frames: 28;
    @for $i from 0 to $frames {
        #{100 / $frames * $i * 1%} {
            transform: translate3d(random(3) * 1px, random(3) * 1px, random(3) * 1px) scale((102 - random(4)) / 100);
            filter: brightness(140 - random(80) * 1%);
        }
    }
    100% {
        transform: translate3d(random(3) * 1px, random(3) * 1px, random(3) * 1px) scale((102 - random(4)) / 100);
        filter: brightness(1);
    }
}

@keyframes PsiStorm-anim {
    $frames: 14;
    $width: 896px;
    @for $i from 0 to $frames {
        #{100 / $frames * $i * 1%} {
            background-position-x: -$width / $frames * $i;
        }
    }
    100% {
        background-position-x: 0px;
    }
}

@keyframes PsiStorm-mask-anim {
    $frames: 14;
    $width: 896px;
    @for $i from 0 to $frames {
        #{100 / $frames * $i * 1%} {
            transform: translate3d(random(20) / 10px, random(20) / 10px, random(20) / 10px);
            mask-position: -$width / $frames * $i 0px;
        }
    }
    100% {
        transform: translate3d(random(20) / 10px, random(20) / 10px, random(20) / 10px);
        mask-position: 0px 0px;
    }
}

@include PsiStorm("DOIT");

@include css-animated-emote(REE) {
    @include emote-animation(100ms, 7) {
        0% { transform: translateX(0); }
        100% { transform: translateX(3px); }
    }
}

@include sprite-animation(
    $file-name: COGGERS,
    $frame-count: 60,
    $sprite-width: 1680px,
    $sprite-height: 28px,
    $animation-duration: 1800ms,
    $iteration-count: 2
);

@include sprite-animation(
    $file-name: PepoDance,
    $frame-count: 10,
    $sprite-width: 280px,
    $sprite-height: 28px,
    $animation-duration: 500ms,
    $iteration-count: 5
);

@include sprite-animation(
    $file-name: LAG,
    $frame-count: 10,
    $sprite-width: 390px,
    $sprite-height: 32px,
    $animation-duration: 4000ms,
    $iteration-count: 2,
    $end-on-last-frame: true,
    $can-animate-forever: false
);

@include sprite-animation(
    $file-name: VroomVroom,
    $frame-count: 76,
    $sprite-width: 7296px,
    $sprite-height: 32px,
    $animation-duration: 5320ms,
    $iteration-count: 1
);

@include sprite-animation(
    $file-name: HocusPocus,
    $frame-count: 53,
    $sprite-width: 5300px,
    $sprite-height: 32px,
    $animation-duration: 2650ms,
    $hold-start-frames: 12,
    $hold-end-frames: 12,
    $iteration-count: 1.5,
    $end-on-frame: 27,
    $can-animate-forever: true,
    $extra-animation: true,
    $extra-animation-duration: 3850ms,
    $extra-animation-iteration-count: 1,
    $extra-animation-timing-function: ease-out,
) {
    0% {
        filter: none;
    }
    73% {
        filter: brightness(1) invert(0);
    }
    100% {
        filter: brightness(0) invert(1);
    }
};

@include sprite-animation(
    $file-name: WAG,
    $frame-count: 2,
    $sprite-width: 84px,
    $sprite-height: 32px,
    $animation-duration: 500ms,
    $iteration-count: 10
);

@include sprite-animation(
    $file-name: SNOWBALL,
    $frame-count: 35,
    $sprite-width: 1750px,
    $sprite-height: 32px,
    $animation-duration: 2450ms,
    $iteration-count: 2,
    $can-animate-forever: true
);

@include sprite-animation(
    $file-name: PeepoS,
    $frame-count: 35,
    $sprite-width: 1750px,
    $sprite-height: 32px,
    $animation-duration: 2450ms,
    $iteration-count: 2,
    $can-animate-forever: true
);

@include sprite-animation(
    $file-name: PepoFight,
    $frame-count: 35,
    $sprite-width: 1855px,
    $sprite-height: 32px,
    $animation-duration: 2450ms,
    $iteration-count: 2,
    $can-animate-forever: true
);

@include sprite-animation(
    $file-name: PeepoWeird,
    $frame-count: 35,
    $sprite-width: 1750px,
    $sprite-height: 32px,
    $animation-duration: 2450ms,
    $iteration-count: 2,
    $can-animate-forever: true,
    $end-on-last-frame: true
);

@include sprite-animation(
    $file-name: SNOWBALLFIGHT,
    $frame-count: 70,
    $sprite-width: 3500px,
    $sprite-height: 32px,
    $animation-duration: 4900ms,
    $iteration-count: 1,
    $can-animate-forever: true,
    $end-on-last-frame: true
);

@include sprite-animation(
    $file-name: PepoSleep,
    $frame-count: 91,
    $sprite-width: 5642px,
    $sprite-height: 32px,
    $animation-duration: 6370ms,
    $iteration-count: 1,
    $can-animate-forever: true,
    $end-on-last-frame: true
);

@include sprite-animation(
    $file-name: OMEGALUL,
    $frame-count: 11,
    $sprite-width: 330px,
    $sprite-height: 32px,
    $animation-duration: 3080ms,
    $iteration-count: 2,
    $can-animate-forever: true,
    $end-on-last-frame: true
);

@include sprite-animation(
    $file-name: PauseChamp,
    $frame-count: 80,
    $sprite-width: 6480px,
    $sprite-height: 32px,
    $animation-duration: 1.2s,
    $iteration-count: 4,
    $can-animate-forever: true,
    $end-on-last-frame: true
);

@include sprite-animation(
    $file-name: ApeHands,
    $frame-count: 91,
    $sprite-width: 2912px,
    $sprite-height: 32px,
    $animation-duration: 2s,
    $iteration-count: 3,
    $can-animate-forever: true,
    $end-on-last-frame: true
);

@include sprite-animation(
    $file-name: SMUG,
    $frame-count: 7,
    $sprite-width: 238px,
    $sprite-height: 32px,
    $animation-duration: 1s,
    $iteration-count: 3,
    $can-animate-forever: true,
    $extra-animation: true,
    $extra-animation-duration: 333ms,
    $extra-animation-iteration-count: 9
) {
    0% {
        transform: translate(0px,0px);
    }
    25% {
        transform: translate(0px,0.50px);
        animation-timing-function: ease-in;
    }
    37% {
        transform: translate(0px,0px);
    }
    55% {
        transform: translate(0px,-2px);
    }
    60% {
        transform: translate(0px,-1.5px);
        animation-timing-function: ease;
    }
    100% {
        transform: translate(0px,0px);
    }
}

@include sprite-animation(
    $file-name: TIMID,
    $frame-count: 12,
    $sprite-width: 384px,
    $sprite-height: 32px,
    $animation-duration: 1s,
    $iteration-count: 1,
    $end-on-last-frame: true,
    $can-animate-forever: false,
    $extra-animation: true,
    $extra-animation-duration: 6s,
    $extra-animation-delay: 500ms,
    $extra-animation-iteration-count: 1
) {
    0% {background-position-y: 0px; }
    10% {background-position-y: 20px; }
}

.generify-emote-TIMID:not(.chat-user + .generify-emote-TIMID) .chat-emote-TIMID {
    background-position-x: 0px !important;
}

@include sprite-animation(
    $file-name: PAIN,
    $frame-count: 2,
    $sprite-width: 64px,
    $sprite-height: 32px,
    $animation-duration: 3s,
    $iteration-count: 1,
    $can-animate-forever: true,
    $extra-animation: true,
    $extra-animation-duration: 1s,
    $extra-animation-iteration-count: 3
) {
    0% {transform: translate(0px,0px);}

    13% {transform: translate(0px,0px);}
    20% {transform: translate(0px,-2px);}

    33% {transform: translate(0px,0px);}

    46% {transform: translate(0px,0px);}
    53% {transform: translate(0px,-2px);}

    67% {transform: translate(0px,0px);}

    80% {transform: translate(0px,0px);}
    87% {transform: translate(0px,-2px);}

    100% {transform: translate(0px,0px);}
}

@include sprite-animation(
    $file-name: AngelThump,
    $frame-count: 90,
    $sprite-width: 6660px,
    $sprite-height: 32px,
    $animation-duration: 3s,
    $iteration-count: 3,
    $can-animate-forever: true,
    $end-on-last-frame: true
);

@include sprite-animation(
    $file-name: DOGGO,
    $frame-count: 76,
    $sprite-width: 2432px,
    $sprite-height: 32px,
    $animation-duration: 2s,
    $iteration-count: 2,
    $can-animate-forever: true,
    $end-on-last-frame: true
);

@include sprite-animation(
    $file-name: ComfyMoobers,
    $frame-count: 34,
    $sprite-width: 1122px,
    $sprite-height: 32px,
    $animation-duration: 2550ms,
    $iteration-count: 2,
    $can-animate-forever: true
);

@include sprite-animation(
    $file-name: CampFire,
    $frame-count: 90,
    $sprite-width: 3780px,
    $sprite-height: 32px,
    $animation-duration: 3s,
    $iteration-count: 1,
    $can-animate-forever: true,
    $end-on-last-frame: true
);

@include sprite-animation(
    $file-name: ZOOMER,
    $frame-count: 30,
    $sprite-width: 1500px,
    $sprite-height: 32px,
    $animation-duration: 1s,
    $iteration-count: 7,
    $can-animate-forever: true
);

@include sprite-animation(
    $file-name: GROND,
    $frame-count: 149,
    $sprite-width: 7450px,
    $sprite-height: 32px,
    $animation-duration: 6.208s,
    $iteration-count: 1,
    $can-animate-forever: true,
    $end-on-last-frame: true
);

@include sprite-animation(
    $file-name: BOOMER,
    $frame-count: 90,
    $sprite-width: 4050px,
    $sprite-height: 32px,
    $animation-duration: 3s,
    $iteration-count: 2,
    $can-animate-forever: true,
    $end-on-last-frame: true
);

@include sprite-animation(
    $file-name: SPYRON,
    $frame-count: 90,
    $sprite-width: 3960px,
    $sprite-height: 32px,
    $animation-duration: 3s,
    $iteration-count: 2,
    $can-animate-forever: true,
);

@include sprite-animation(
    $file-name: PepoWant,
    $frame-count: 150,
    $sprite-width: 7050px,
    $sprite-height: 32px,
    $animation-duration: 2.5s,
    $animation-direction: alternate,
    $iteration-count: 2,
    $end-on-frame: 1,
    $can-animate-forever: true
);