/* animations.css */
@media (prefers-reduced-motion: no-preference) {
    .fade-in {
        opacity: 0;
        transition: opacity 0.8s ease;
    }
    
    .fade-in.visible {
        opacity: 1;
    }

    .fade-in-up {
        opacity: 0;
        transform: translateY(30px);
        transition: opacity 0.8s ease, transform 0.8s ease;
    }
    
    .fade-in-up.visible {
        opacity: 1;
        transform: translateY(0);
    }
    
    .delay-1 { transition-delay: 0.1s; }
    .delay-2 { transition-delay: 0.2s; }
    .delay-3 { transition-delay: 0.3s; }
    .delay-4 { transition-delay: 0.4s; }

    /* Continuous Motion Animations */
    
    /* 1. Floating Effect */
    @keyframes float {
        0% { transform: translateY(0px); }
        50% { transform: translateY(-10px); }
        100% { transform: translateY(0px); }
    }
    .motion-float {
        animation: float 4s ease-in-out infinite;
    }
    .motion-float-delayed {
        animation: float 4s ease-in-out infinite;
        animation-delay: 2s;
    }

    /* 2. Pulse Glow Effect */
    @keyframes pulse-glow {
        0% { box-shadow: 0 0 10px rgba(255, 153, 0, 0.4); transform: scale(1); }
        50% { box-shadow: 0 0 30px rgba(255, 153, 0, 0.8); transform: scale(1.02); }
        100% { box-shadow: 0 0 10px rgba(255, 153, 0, 0.4); transform: scale(1); }
    }
    .motion-pulse-glow {
        animation: pulse-glow 2s infinite alternate;
    }

    /* 3. Subtle Bounce for Icons/Badges */
    @keyframes gentle-bounce {
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(-5px); }
    }
    .motion-bounce {
        animation: gentle-bounce 2s ease-in-out infinite;
    }

    /* 4. Shimmer Effect for Highlight Text */
    @keyframes shimmer {
        0% { background-position: -200% center; }
        100% { background-position: 200% center; }
    }
    .motion-shimmer {
        background: linear-gradient(90deg, var(--color-accent) 0%, #FFF 50%, var(--color-accent) 100%);
        background-size: 200% auto;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        animation: shimmer 3s linear infinite;
    }

    /* 5. Spin Animation */
    @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }
}