/* =================================================
   BASE ANIMATION CLASSES
================================================= */

/* Fade In Animation */
.fade-in {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    
}

/* Slide In from Left */
.slide-in-left {
    opacity: 0;
    transform: translateX(-60px);
    transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    
}

/* Slide In from Right */
.slide-in-right {
    opacity: 0;
    transform: translateX(60px);
    transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    
}

/* Scale In Animation */
.scale-in {
    opacity: 0;
    transform: scale(0.9);
    transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
    
}

/* =================================================
   VISIBLE STATE (Applied by JavaScript)
================================================= */

.fade-in.fade-in-visible,
.slide-in-left.fade-in-visible,
.slide-in-right.fade-in-visible,
.scale-in.fade-in-visible {
    opacity: 1;
    transform: translate(0) scale(1);

}

/* =================================================
   STAGGER DELAYS
   Creates cascading animation effect
================================================= */

.stagger-1 {
    transition-delay: 0.1s;
    
}

.stagger-2 {
    transition-delay: 0.2s;
    
}

.stagger-3 {
    transition-delay: 0.3s;
    
}

.stagger-4 {
    transition-delay: 0.4s;
    
}

.stagger-5 {
    transition-delay: 0.5s;
    
}

.stagger-6 {
    transition-delay: 0.6s;
    
}

/* =================================================
   PERFORMANCE OPTIMIZATION
================================================= */

.fade-in,
.slide-in-left,
.slide-in-right,
.scale-in {
    will-change: opacity, transform;
    
}

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

/* =================================================
   REDUCED MOTION SUPPORT
================================================= */

@media (prefers-reduced-motion: reduce) {

    

    .fade-in,
    .slide-in-left,
    .slide-in-right,
    .scale-in {
        transition: none;
        opacity: 1;
        transform: none;
        
    }

    .stagger-1,
    .stagger-2,
    .stagger-3,
    .stagger-4,
    .stagger-5,
    .stagger-6 {
        transition-delay: 0s;
        
    }
}