/* =========================
   MOBILE-ONLY SCROLL ANIMATIONS
   ========================= */

/* Ensure no animations on desktop */
@media (min-width: 769px) {
    .scroll-animate {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

/* Mobile animations only */
@media (max-width: 768px) {
    
    /* Initially hide animated elements */
    .scroll-animate {
        opacity: 0 !important;
        transform: translateY(60px) !important;
        transition: opacity 0.8s ease-out, transform 0.8s ease-out !important;
        will-change: opacity, transform;
        backface-visibility: hidden;
        -webkit-font-smoothing: antialiased;
    }
    
    /* Show when visible */
    .scroll-animate.is-visible {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
    
    /* Stagger delays */
    .scroll-animate.stagger-1 { transition-delay: 0.1s !important; }
    .scroll-animate.stagger-2 { transition-delay: 0.2s !important; }
    .scroll-animate.stagger-3 { transition-delay: 0.3s !important; }
    .scroll-animate.stagger-4 { transition-delay: 0.4s !important; }
    .scroll-animate.stagger-5 { transition-delay: 0.5s !important; }
    .scroll-animate.stagger-6 { transition-delay: 0.6s !important; }
    
    /* Override any conflicting styles */
    .scroll-animate * {
        transition: none !important;
    }
    
    .scroll-animate.is-visible * {
        transition: inherit !important;
    }
}