/* 1. Breathing X & Y */
@keyframes breathingXY {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
}

/* 2. Stepping Left Right and Up Down */
@keyframes steppingLR {
    0%, 100% {
        transform: translate(0, 0);
    }
    12.5% {
        transform: translate(5px, -5px);
    }
    25% {
        transform: translate(10px, 0);
    }
    37.5% {
        transform: translate(5px, 5px);
    }
    50% {
        transform: translate(0, 10px);
    }
    62.5% {
        transform: translate(-5px, 5px);
    }
    75% {
        transform: translate(-10px, 0);
    }
    87.5% {
        transform: translate(-5px, -5px);
    }
}

/* 3. Breathing Height */
@keyframes breathingHeight {
    0%, 100% {
        transform: scaleY(1);
    }
    50% {
        transform: scaleY(1.1);
    }
}

/* 4. Circular Floating */
@keyframes floating {
    0% {
        transform: translate(0, 0);
    }
    25% {
        transform: translate(5px, -5px);
    }
    50% {
        transform: translate(10px, 0);
    }
    75% {
        transform: translate(5px, 5px);
    }
    100% {
        transform: translate(0, 0);
    }
}

/* 5. Breathing Width */
@keyframes breathingWidth {
    0%, 100% {
        transform: scaleX(1);
    }
    50% {
        transform: scaleX(1.1);
    }
}

/* 6. Breathing Floating in Circular Motion */
@keyframes breathingFloating {
    0% {
        transform: translate(0, 0) scale(1);
    }
    25% {
        transform: translate(5px, -5px) scale(1.05);
    }
    50% {
        transform: translate(10px, 0) scale(1.1);
    }
    75% {
        transform: translate(5px, 5px) scale(1.05);
    }
    100% {
        transform: translate(0, 0) scale(1);
    }
}

/* 7. Slide Left Right a Little */
@keyframes slideLR {
    0%, 100% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(10px);
    }
}

/* Idle animations. Each is also exposed as --sk-idle so variant effects (variants.css) can run alongside it. */
.sprite-breathingXY {
    --sk-idle: breathingXY 1.5s infinite ease-in-out;
    animation: var(--sk-idle);
    animation-delay: calc(-1.5s * var(--random-delay));
}

.sprite-steppingLR {
    --sk-idle: steppingLR 3s infinite ease-in-out;
    animation: var(--sk-idle);
    animation-delay: calc(-3s * var(--random-delay));
}

.sprite-breathingHeight {
    --sk-idle: breathingHeight 1.5s infinite ease-in-out;
    animation: var(--sk-idle);
    animation-delay: calc(-1.5s * var(--random-delay));
}

.sprite-floating {
    --sk-idle: floating 4s infinite ease-in-out;
    animation: var(--sk-idle);
    animation-delay: calc(-4s * var(--random-delay));
}

.sprite-breathingWidth {
    --sk-idle: breathingWidth 1.5s infinite ease-in-out;
    animation: var(--sk-idle);
    animation-delay: calc(-1.5s * var(--random-delay));
}

.sprite-breathingFloating {
    --sk-idle: breathingFloating 4s infinite ease-in-out;
    animation: var(--sk-idle);
    animation-delay: calc(-4s * var(--random-delay));
}

.sprite-slideLR {
    --sk-idle: slideLR 1.5s infinite ease-in-out;
    animation: var(--sk-idle);
    animation-delay: calc(-1.5s * var(--random-delay));
}