@keyframes emoteEffectArrive {
    0% {
        transform: var(--effectMirror) translateX(-18px) scale(0);
    }

    19.99% {
        transform: var(--effectMirror) translateX(-18px) scale(0);
    }

    20% {
        transform: var(--effectMirror) translateX(-18px) scale(0.1);
    }

    25% {
        transform: var(--effectMirror) translateX(-16px) scale(0.2) translateY(0.6px);
    }

    30% {
        transform: var(--effectMirror) translateX(-14px) scale(0.3) translateY(-4px);
    }

    35% {
        transform: var(--effectMirror) translateX(-12px) scale(0.4) translateY(0.6px);
    }

    40% {
        transform: var(--effectMirror) translateX(-10px) scale(0.5) translateY(-4px);
    }

    45% {
        transform: var(--effectMirror) translateX(-8px) scale(0.6) translateY(2px);
    }

    50% {
        transform: var(--effectMirror) translateX(-6px) scale(0.7) translateY(-3px);
    }

    55% {
        transform: var(--effectMirror) translateX(-4px) scale(0.8) translateY(2px);
    }

    60% {
        transform: var(--effectMirror) translateX(-2px) scale(0.9) translateY(-3px);
    }

    65% {
        transform: var(--effectMirror) scale(1);
    }

    100% {
        transform: var(--effectMirror) scale(1);
    }
}

@keyframes emoteEffectLeave {
    0% {
        transform: var(--effectMirror) scale(1);
    }

    5% {
        transform: var(--effectMirror) scale(0.9, 0.9) translateY(-3px);
    }

    15% {
        transform: var(--effectMirror) translateX(-2px) scale(0.8, 0.8) translateY(2px);
    }

    20% {
        transform: var(--effectMirror) translateX(-4px) scale(0.7, 0.7) translateY(-3px);
    }

    25% {
        transform: var(--effectMirror) translateX(-6px) scale(0.6, 0.6) translateY(2px);
    }

    30% {
        transform: var(--effectMirror) translateX(-8px) scale(0.5, 0.5) translateY(-4px);
    }

    35% {
        transform: var(--effectMirror) translateX(-10px) scale(0.4, 0.4) translateY(0.6px);
    }

    45% {
        transform: var(--effectMirror) translateX(-12px) scale(0.3, 0.3) translateY(-4px);
    }

    50% {
        transform: var(--effectMirror) translateX(-14px) scale(0.2, 0.2) translateY(0.6px);
    }

    55% {
        transform: var(--effectMirror) translateX(-16px) scale(0.1, 0.1);
    }

    60% {
        transform: var(--effectMirror) translateX(-18px) scale(0.01, 0);
    }

    65% {
        transform: var(--effectMirror) translateX(-18px) scale(0, 0);
    }

    100% {
        transform: var(--effectMirror) translateX(-18px) scale(0, 0);
    }
}

@keyframes emoteEffectInOut {
    0% {
        transform: var(--effectMirror) translateX(-18px) scale(0);
    }

    9.995% {
        transform: var(--effectMirror) translateX(-18px) scale(0);
    }

    10% {
        transform: var(--effectMirror) translateX(-18px) scale(0.1);
    }

    12.5% {
        transform: var(--effectMirror) translateX(-16px) scale(0.2) translateY(0.6px);
    }

    15% {
        transform: var(--effectMirror) translateX(-14px) scale(0.3) translateY(-4px);
    }

    17.5% {
        transform: var(--effectMirror) translateX(-12px) scale(0.4) translateY(0.6px);
    }

    20% {
        transform: var(--effectMirror) translateX(-10px) scale(0.5) translateY(-4px);
    }

    22.5% {
        transform: var(--effectMirror) translateX(-8px) scale(0.6) translateY(2px);
    }

    25% {
        transform: var(--effectMirror) translateX(-6px) scale(0.7) translateY(-3px);
    }

    27.5% {
        transform: var(--effectMirror) translateX(-4px) scale(0.8) translateY(2px);
    }

    30% {
        transform: var(--effectMirror) translateX(-2px) scale(0.9) translateY(-3px);
    }

    32.5% {
        transform: var(--effectMirror) scale(1);
    }

    50% {
        transform: var(--effectMirror) scale(1);
    }

    50% {
        transform: var(--effectMirror) scale(1);
    }

    69.995% {
        transform: var(--effectMirror) scale(1);
    }

    70% {
        transform: var(--effectMirror) scale(-0.9, 0.9) translateY(-3px);
    }

    72.5% {
        transform: var(--effectMirror) translateX(-2px) scale(-0.8, 0.8) translateY(2px);
    }

    75% {
        transform: var(--effectMirror) translateX(-4px) scale(-0.7, 0.7) translateY(-3px);
    }

    77.5% {
        transform: var(--effectMirror) translateX(-6px) scale(-0.6, 0.6) translateY(2px);
    }

    80% {
        transform: var(--effectMirror) translateX(-8px) scale(-0.5, 0.5) translateY(-4px);
    }

    82.5% {
        transform: var(--effectMirror) translateX(-10px) scale(-0.4, 0.4) translateY(0.6px);
    }

    85% {
        transform: var(--effectMirror) translateX(-12px) scale(-0.3, 0.3) translateY(-4px);
    }

    87.5% {
        transform: var(--effectMirror) translateX(-14px) scale(-0.2, 0.2) translateY(0.6px);
    }

    90% {
        transform: var(--effectMirror) translateX(-16px) scale(-0.1, 0.1);
    }

    92.5% {
        transform: var(--effectMirror) translateX(-18px) scale(-0.01, 0);
    }

    100% {
        transform: var(--effectMirror) translateX(-18px) scale(0, 0);
    }
}

@keyframes emoteEffectRainbow {
    0% {
        filter: hue-rotate(0deg);
    }

    100% {
        filter: hue-rotate(360deg);
    }
}

@keyframes emoteEffectShake {
    0% {
        transform: var(--effectMirror) translate(1px, 1px);
    }

    10% {
        transform: var(--effectMirror) translate(-1px, -2px);
    }

    20% {
        transform: var(--effectMirror) translate(-3px, 0px);
    }

    30% {
        transform: var(--effectMirror) translate(3px, 2px);
    }

    40% {
        transform: var(--effectMirror) translate(1px, -1px);
    }

    50% {
        transform: var(--effectMirror) translate(-1px, 2px);
    }

    60% {
        transform: var(--effectMirror) translate(-3px, 1px);
    }

    70% {
        transform: var(--effectMirror) translate(3px, 1px);
    }

    80% {
        transform: var(--effectMirror) translate(-1px, -1px);
    }

    90% {
        transform: var(--effectMirror) translate(1px, 2px);
    }

    100% {
        transform: var(--effectMirror) translate(1px, -2px);
    }
}

@keyframes emoteEffectJam {
    0% {
        transform: var(--effectMirror) translate(-2px, -2px) rotate(-6deg);
    }

    10% {
        transform: var(--effectMirror) translate(-1.5px, -2px) rotate(-8deg);
    }

    20% {
        transform: var(--effectMirror) translate(1px, -1.5px) rotate(-8deg);
    }

    30% {
        transform: var(--effectMirror) translate(3px, 2.5px) rotate(-6deg);
    }

    40% {
        transform: var(--effectMirror) translate(3px, 4px) rotate(-2deg);
    }

    50% {
        transform: var(--effectMirror) translate(2px, 4px) rotate(3deg);
    }

    60% {
        transform: var(--effectMirror) translate(1px, 4px) rotate(3deg);
    }

    70% {
        transform: var(--effectMirror) translate(-0.5px, 3px) rotate(2deg);
    }

    80% {
        transform: var(--effectMirror) translate(-1.25px, 1px) rotate(0deg);
    }

    90% {
        transform: var(--effectMirror) translate(-1.75px, -0.5px) rotate(-2deg);
    }

    100% {
        transform: var(--effectMirror) translate(-2px, -2px) rotate(-5deg);
    }
}

@keyframes emoteEffectBounce {
    0% {
        transform: var(--effectMirror) scale(0.8, 1);
    }

    10% {
        transform: var(--effectMirror) scale(0.9, 0.8);
    }

    20% {
        transform: var(--effectMirror) scale(1, 0.4);
    }

    25% {
        transform: var(--effectMirror) scale(1.2, 0.3);
    }

    25.001% {
        transform: var(--effectMirror) scale(-1.2, 0.3);
    }

    30% {
        transform: var(--effectMirror) scale(-1, 0.4);
    }

    40% {
        transform: var(--effectMirror) scale(-0.9, 0.8);
    }

    50% {
        transform: var(--effectMirror) scale(-0.8, 1);
    }

    60% {
        transform: var(--effectMirror) scale(-0.9, 0.8);
    }

    70% {
        transform: var(--effectMirror) scale(-1, 0.4);
    }

    75% {
        transform: var(--effectMirror) scale(-1.2, 0.3);
    }

    75.001% {
        transform: var(--effectMirror) scale(1.2, 0.3);
    }

    80% {
        transform: var(--effectMirror) scale(1, 0.4);
    }

    90% {
        transform: var(--effectMirror) scale(0.9, 0.8);
    }

    100% {
        transform: var(--effectMirror) scale(0.8, 1);
    }
}

@keyframes emoteEffectSlide
{
    0% {
        background-position-x: 0%;
    }

    100% {
        background-position-x: calc(-2 * var(--emoteWidth));
    }
}

@keyframes emoteEffectSpin {
    0% {
        transform: var(--effectMirror) rotate(0deg);
    }

    100% {
        transform: var(--effectMirror) rotate(360deg);
    }
}

.emoteEffectFlipY {
    --effectMirror: scaleY(-1);
}

.emoteEffectFlipX {
    --effectMirror: scaleX(-1);
}

.emoteEffectFlipY.emoteEffectFlipX {
    --effectMirror: scale(-1,-1);
}

.emoteEffectWide {
    width: calc(2 * var(--emoteWidth)) !important;
}

.emoteEffectCursed {
    filter: grayscale(1) brightness(0.7) contrast(2.5);
}

.emoteEffectRainbow {
    animation: emoteEffectRainbow 0.6s linear infinite;
}

.emoteEffectJam {
    animation: emoteEffectJam 0.6s linear infinite;
}

.emoteEffectBounce {
    animation: emoteEffectBounce 1s linear infinite;
}

.emoteEffectSpin {
    animation: emoteEffectSpin 1.5s infinite linear;
}

.emoteEffectLeave {
    animation: emoteEffectLeave 3s infinite linear;
}

.emoteEffectArrive {
    animation: emoteEffectArrive 3s infinite linear;
}

.emoteEffectShake {
    animation: emoteEffectShake 0.3s infinite linear;
}

.emoteEffectHyperRed {
    filter: contrast(500%) saturate(1000%);
}

.emoteEffectSlide {
    animation: emoteEffectSlide 1s infinite linear;
    background-size: 100% 100%;
}

:root
{
    --effectAnimation: scale(1);
    --effectMirror: scale(1);
}

.emote, .emote > img
{
    transform: var(--effectMirror) var(--effectAnimation);
}