/* Animation Keyframes */

/* Papel Picado Swaying */
@keyframes sway {

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

    50% {
        transform: rotate(2deg) translateX(5px);
    }
}

@keyframes sway-alt {

    0%,
    100% {
        transform: rotate(-3deg) translateX(-8px);
    }

    50% {
        transform: rotate(3deg) translateX(8px);
    }
}

/* Scroll Indicator Bounce */
@keyframes bounce {

    0%,
    100% {
        transform: translateX(-50%) translateY(0);
    }

    50% {
        transform: translateX(-50%) translateY(10px);
    }
}

/* Floating Animation */
@keyframes float {

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

    50% {
        transform: translateY(-20px);
    }
}

/* Pulse Glow */
@keyframes pulse-glow {

    0%,
    100% {
        filter: drop-shadow(0 0 10px currentColor);
        opacity: 0.8;
    }

    50% {
        filter: drop-shadow(0 0 30px currentColor);
        opacity: 1;
    }
}

/* Fade In from Bottom */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Fade In */
@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Scale In */
@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.8);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Rotate */
@keyframes rotate {
    from {
        transform: rotate(0deg);
    }

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

/* Glitch Effect */
@keyframes glitch {
    0% {
        transform: translate(0);
    }

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

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

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

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

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

/* Shimmer Effect */
@keyframes shimmer {
    0% {
        background-position: -1000px 0;
    }

    100% {
        background-position: 1000px 0;
    }
}

/* Gradient Animation */
@keyframes gradient-shift {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

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

/* Spinning Continuous */
@keyframes spin {
    from {
        transform: rotate(0deg);
    }

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

/* Reduced Motion Preferences */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    /* Keep essential animations but reduce their intensity */
    @keyframes sway {

        0%,
        100% {
            transform: rotate(-0.5deg) translateX(-1px);
        }

        50% {
            transform: rotate(0.5deg) translateX(1px);
        }
    }

    @keyframes bounce {

        0%,
        100% {
            transform: translateX(-50%) translateY(0);
        }

        50% {
            transform: translateX(-50%) translateY(2px);
        }
    }
}

/* Utility Animation Classes */
.animate-fadeIn {
    animation: fadeIn var(--duration-slow) var(--ease-smooth);
}

.animate-fadeInUp {
    animation: fadeInUp var(--duration-slow) var(--ease-smooth);
}

.animate-scaleIn {
    animation: scaleIn var(--duration-slow) var(--ease-bounce);
}

.animate-float {
    animation: float 3s var(--ease-in-out) infinite;
}

.animate-pulse-glow {
    animation: pulse-glow 2s var(--ease-in-out) infinite;
}