/*=======================================================
    FADE-IN ANIMATIONS
========================================================= */

/* Hidden state - elements start invisible */
.fade-in {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

.fade-in-no-y {
    opacity: 0;
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.fade-in-no-y.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Staggered delays */
.fade-in-delay-1 { transition-delay: 0.2s; }
.fade-in-delay-2 { transition-delay: 0.4s; }
.fade-in-delay-3 { transition-delay: 0.6s; }
.fade-in-delay-4 { transition-delay: 0.8s; }
.fade-in-delay-5 { transition-delay: 1s; }
.fade-in-delay-6 { transition-delay: 1.5s; }
.fade-in-delay-7 { transition-delay: 2s; }
.fade-in-delay-8 { transition-delay: 2.5s; }

/* Fade from left */
.fade-in-left {
    opacity: 0;
    transform: translateX(-50px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.fade-in-left.visible {
    opacity: 1;
    transform: translateX(0);
}

/* Fade from right */
.fade-in-right {
    opacity: 0;
    transform: translateX(50px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.fade-in-right.visible {
    opacity: 1;
    transform: translateX(0);
}

/* Scale fade (zoom in) */
.fade-in-scale {
    opacity: 0;
    transform: scale(0.9);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.fade-in-scale.visible {
    opacity: 1;
    transform: scale(1);
}

.fade-in-scale-special {
    opacity: 0;
    transform: scale(1.2); /* Start slightly larger for a more dramatic effect */
}

.fade-in-scale-special.visible {
    animation: bounceIn 2s cubic-bezier(.59,.12,.55,1.15) forwards;    
}

@keyframes bounceIn {
    0% {
        opacity: 0;
        transform: scale(1.2);
    }
    50% {
        opacity: 1;
        transform: scale(0.9);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* Disable animations on mobile */
@media (max-width: 767px) {
    .fade-in,
    .fade-in-left,
    .fade-in-right,
    .fade-in-scale,
    .fade-in-scale-special,
    .fade-in-delay-1,
    .fade-in-delay-2,
    .fade-in-delay-3,
    .fade-in-delay-4,
    .fade-in-delay-5,
    .fade-in-no-y {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
        animation: none !important;
    }
}