@keyframes pan-background {
    from {
        transform: translate(-50%, -50%) rotate(-15deg) scale(1.2);
    }

    to {
        transform: translate(-50%, -50%) rotate(-15deg) scale(1.3);
    }
}

@keyframes scroll-left {
    from {
        transform: translateX(0%);
    }

    to {
        transform: translateX(-100%);
    }
}

@keyframes fill-progress {
    0% {
        width: 0;
    }

    100% {
        width: 100%;
    }
}

@keyframes theme-pulse {
    0% {
        opacity: 0.95;
        transform: scale(0.998);
    }

    50% {
        opacity: 1;
        transform: scale(1);
    }

    100% {
        opacity: 1;
    }
}

@keyframes float-particle {
    0% {
        transform: translateY(0) rotate(0deg) scale(0.8);
        opacity: 0;
    }

    15% {
        opacity: var(--p-opacity);
    }

    50% {
        opacity: calc(var(--p-opacity) * 0.8);
    }

    85% {
        opacity: var(--p-opacity);
    }

    100% {
        transform: translateY(-550px) rotate(var(--p-rotation)) scale(1.1);
        opacity: 0;
    }
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes pulse {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0.6;
    }

    100% {
        opacity: 1;
    }
}

@keyframes shimmer {
    100% {
        transform: translateX(100%);
    }
}

@keyframes pan-background {
    from {
        transform: translate(-50%, -55%) rotate(-15deg) scale(1.2);
    }

    to {
        transform: translate(-50%, -45%) rotate(-15deg) scale(1.2);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes progress-bar-animation {
    from {
        transform: scaleX(1);
    }

    to {
        transform: scaleX(0);
    }
}

@keyframes orb-float {
    0% {
        transform: translate(0, 0) scale(1);
    }

    100% {
        transform: translate(var(--dx), var(--dy)) scale(var(--scale));
    }
}

@keyframes backgroundImageFadeIn {
    0% {
        opacity: 0;
        transform: translateY(-20px);
        filter: blur(8px) brightness(0.7);
    }

    30% {
        opacity: 0.3;
        transform: translateY(-10px);
        filter: blur(4px) brightness(0.85);
    }

    60% {
        opacity: 0.7;
        transform: translateY(-3px);
        filter: blur(1px) brightness(0.95);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0) brightness(1);
    }
}

@keyframes overlayImageSlideIn {
    0% {
        transform: translateX(-50%) translateZ(0) translateY(-100%);
        opacity: 0;
    }

    100% {
        transform: translateX(-50%) translateZ(0) translateY(0);
        opacity: 1;
    }
}

@keyframes skeleton-bg-shimmer {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}