.emote {
    --ffz-effect-filters: none;
    --ffz-effect-transforms: initial;
    --ffz-effect-animations: initial;

    height: var(--emote-size);
}

.emote_background {
    height: var(--emote-size);
    background-size: var(--emote-size);
    aspect-ratio: 1/1;
}

.emote_background img {
    display: none;
    background-repeat: no-repeat;
}

@keyframes ffz-effect-slide {
    0% {
        background-position-x: 0;
    }

    100% {
        background-position-x: calc(-1 * var(--emote-size));
    }
}

@keyframes ffz-effect-appear {
    0% {
        transform: translateX(-18px) scale(0);
    }

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

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

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

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

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

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

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

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

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

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

    65% {
        transform: scale(1);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes ffz-effect-leave {
    0% {
        transform: scale(1);
    }

    39.99% {
        transform: scale(1);
    }

    40% {
        transform: scale(-0.9, 0.9) translateY(-3px);
    }

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

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

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

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

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

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

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

    80% {
        transform: translateX(-16px) scale(-0.1, 0.1);
    }

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

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

@keyframes ffz-effect-in-out {
    0% {
        transform: translateX(-18px) scale(0);
    }

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

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

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

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

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

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

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

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

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

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

    32.5% {
        transform: scale(1);
    }

    50% {
        transform: scale(1);
    }

    50% {
        transform: scale(1);
    }

    69.995% {
        transform: scale(1);
    }

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

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

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

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

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

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

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

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

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

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

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

@keyframes ffz-effect-rotate {
    0% {
        transform: rotate(0deg);
    }

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

@keyframes ffz-effect-rainbow {
    0% {
        filter: hue-rotate(0deg);
    }

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

@keyframes ffz-effect-rainbow-filter {
    0% {
        filter: var(--ffz-effect-filters) hue-rotate(0deg);
    }

    100% {
        filter: var(--ffz-effect-filters) hue-rotate(360deg);
    }
}

@keyframes ffz-effect-shake {
    0% {
        transform: translate(1px, 1px);
    }

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

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

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

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

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

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

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

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

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

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

@keyframes ffz-effect-jam {
    0% {
        transform: translate(-2px, -2px) rotate(-6deg);
    }

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

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

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

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

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

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

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

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

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

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

@keyframes ffz-effect-bounce {
    0% {
        transform: scale(0.8, 1);
    }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.ffzY.ffzX {
    --ffz-effect-transforms: scaleY(-1) scaleX(-1);
    transform: var(--ffz-effect-transforms);
}

.ffzY {
    --ffz-effect-transforms: scaleY(-1);
    transform: var(--ffz-effect-transforms);
}

.ffzX {
    --ffz-effect-transforms: scaleX(-1);
    transform: var(--ffz-effect-transforms);
}

.ffzW {
    transform: scale(2, 1);
}

.ffzCursed {
    --ffz-effect-filters: grayscale(1) brightness(0.7) contrast(2.5);
    filter: var(--ffz-effect-filters);
}

.ffzRainbow {
    --ffz-effect-animations: ffz-effect-rainbow 0.6s linear infinite;
    animation: var(--ffz-effect-animations);
}

.ffzJam {
    --ffz-effect-animations: ffz-effect-jam 0.6s linear infinite;
    animation: var(--ffz-effect-animations);
}

.ffzBounce {
    --ffz-effect-animations: ffz-effect-bounce 1s linear infinite;
    animation: var(--ffz-effect-animations);
}

.ffzSpin {
    --ffz-effect-animations: ffz-effect-rotate 1.5s infinite linear;
    animation: var(--ffz-effect-animations);
}

.ffzLeave {
    --ffz-effect-animations: ffz-effect-leave 3s infinite ease-in-out;
    animation: var(--ffz-effect-animations);
}

.ffzArrive {
    --ffz-effect-animations: ffz-effect-appear 3s infinite ease-in-out;
    animation: var(--ffz-effect-animations);
}

/* Effects with backgrounds */
.emote_background:has(.ffzSlide) {
    background-repeat: repeat-x;
    --ffz-effect-animations: ffz-effect-slide .3s linear infinite;
    animation: var(--ffz-effect-animations);
}

.emote_background:has(.ffzHyper) {
    --ffz-effect-animations: ffz-effect-shake 0.3s infinite linear;
    animation: var(--ffz-effect-animations);
}
