/* ============================================
   ANIMATIONS - Animaciones y Efectos
   ============================================ */

/* Animación Fade In Up */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Animación Float para elementos flotantes */
@keyframes float {
    0%, 100% {
        transform: translateY(0) translateX(0);
    }
    33% {
        transform: translateY(-30px) translateX(20px);
    }
    66% {
        transform: translateY(20px) translateX(-20px);
    }
}

/* Animación Float con Rotación para hojas */
@keyframes floatRotate {
    0%, 100% {
        transform: translateY(0) translateX(0) rotate(0deg);
    }
    25% {
        transform: translateY(-20px) translateX(15px) rotate(5deg);
    }
    50% {
        transform: translateY(-10px) translateX(25px) rotate(-3deg);
    }
    75% {
        transform: translateY(15px) translateX(-10px) rotate(4deg);
    }
}

/* Animación de Caída de Hojas con Meneo */
@keyframes leafFall {
    0% {
        transform: translateY(0) translateX(0) rotate(0deg);
        opacity: 0;
    }
    10% {
        opacity: 0.6;
    }
    20% {
        transform: translateY(20vh) translateX(30px) rotate(90deg);
    }
    40% {
        transform: translateY(40vh) translateX(-20px) rotate(180deg);
    }
    60% {
        transform: translateY(60vh) translateX(40px) rotate(270deg);
    }
    80% {
        transform: translateY(80vh) translateX(-10px) rotate(360deg);
        opacity: 0.6;
    }
    100% {
        transform: translateY(110vh) translateX(20px) rotate(450deg);
        opacity: 0;
    }
}

/* Animación Bounce para indicador de scroll */
@keyframes bounce {
    0%, 100% {
        transform: translateX(-50%) translateY(0);
    }
    50% {
        transform: translateX(-50%) translateY(-10px);
    }
}

/* Animación Rotate para logos giratorios */
@keyframes rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* Animación Shine para efecto de brillo */
@keyframes shine {
    0% {
        left: -100%;
    }
    100% {
        left: 100%;
    }
}

/* Animación Slide In Right para notificaciones */
@keyframes slideInRight {
    from {
        transform: translateX(400px);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes gradientFlow {
    0%   { background-position: 0% center; }
    50%  { background-position: 100% center; }
    100% { background-position: 0% center; }
}

.hero-mobile-cta {
    animation: shimmer 2s linear infinite;
    position: relative;
    overflow: hidden;
}

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