/* ==========================================================================
   anim-fade.css — Fade & scale scroll animations
   Namespace: .anim-fade-*
   Trigger: IntersectionObserver adds .is-visible
   Usage: <div class="anim-fade anim-fade-up" data-delay="2">
   ========================================================================== */

/* Base: hidden until observed */
.anim-fade {
    opacity: 0;
    will-change: transform, opacity;
    transition: opacity 0.6s ease-out,
                transform 0.6s ease-out;
}

/* Revealed state */
.anim-fade.is-visible {
    opacity: 1;
    transform: none !important;
}

/* --- Variants --- */

/* Pure opacity fade */
.anim-fade-in {
    /* No transform, just opacity from base */
}

/* Fade up from below */
.anim-fade-up {
    transform: translateY(30px);
}

/* Fade down from above */
.anim-fade-down {
    transform: translateY(-30px);
}

/* Scale up from smaller */
.anim-fade-scale {
    transform: scale(0.92);
}

/* Scale up from much smaller — good for badges/icons */
.anim-fade-zoom {
    transform: scale(0.75);
}

/* Rotate in slightly */
.anim-fade-rotate {
    transform: rotate(-3deg) translateY(20px);
}

/* --- Speed modifiers --- */

.anim-fade--slow {
    transition-duration: 1s;
}

.anim-fade--fast {
    transition-duration: 0.3s;
}

/* --- Stagger delays --- */

.anim-fade[data-delay="1"] { transition-delay: 0.1s; }
.anim-fade[data-delay="2"] { transition-delay: 0.2s; }
.anim-fade[data-delay="3"] { transition-delay: 0.3s; }
.anim-fade[data-delay="4"] { transition-delay: 0.4s; }
.anim-fade[data-delay="5"] { transition-delay: 0.5s; }
.anim-fade[data-delay="6"] { transition-delay: 0.6s; }
.anim-fade[data-delay="7"] { transition-delay: 0.7s; }
.anim-fade[data-delay="8"] { transition-delay: 0.8s; }

/* --- Reduced motion --- */

@media (prefers-reduced-motion: reduce) {
    .anim-fade {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}