/* ==============================================
   SCROLL-TRIGGERED FADE-IN ANIMATIONS
   ============================================== */

/* Base state for animated elements */
.animate-in {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 500ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
                transform 500ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Active state when element enters viewport */
.animate-in.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Mobile: Reduce vertical movement for subtler effect */
@media (max-width: 768px) {
    .animate-in {
        transform: translateY(12px);
    }
    
    .animate-in.visible {
        transform: translateY(0);
    }
}

/* Stagger delays for sequential animations */
.stagger-1 { transition-delay: 100ms; }
.stagger-2 { transition-delay: 200ms; }
.stagger-3 { transition-delay: 300ms; }
.stagger-4 { transition-delay: 400ms; }
.stagger-5 { transition-delay: 500ms; }
.stagger-6 { transition-delay: 600ms; }
.stagger-7 { transition-delay: 700ms; }
.stagger-8 { transition-delay: 800ms; }
.stagger-9 { transition-delay: 900ms; }
.stagger-10 { transition-delay: 1000ms; }
.stagger-11 { transition-delay: 1100ms; }

/* Faster stagger (80ms) for cards */
.stagger-fast-1 { transition-delay: 80ms; }
.stagger-fast-2 { transition-delay: 160ms; }
.stagger-fast-3 { transition-delay: 240ms; }
.stagger-fast-4 { transition-delay: 320ms; }

/* Even faster stagger (60ms) for case study tiles */
.stagger-faster-1 { transition-delay: 60ms; }
.stagger-faster-2 { transition-delay: 120ms; }
.stagger-faster-3 { transition-delay: 180ms; }
.stagger-faster-4 { transition-delay: 240ms; }
.stagger-faster-5 { transition-delay: 300ms; }
.stagger-faster-6 { transition-delay: 360ms; }
.stagger-faster-7 { transition-delay: 420ms; }
.stagger-faster-8 { transition-delay: 480ms; }
.stagger-faster-9 { transition-delay: 540ms; }
.stagger-faster-10 { transition-delay: 600ms; }
.stagger-faster-11 { transition-delay: 660ms; }

/* Hero section special handling - static on load */
.hero .animate-in {
    /* Will be triggered by JS after small delay */
}

/* Ensure smooth animations don't interfere with layout */
.animate-in {
    will-change: opacity, transform;
}

.animate-in.visible {
    will-change: auto;
}