/* ==========================================================================
   anim-slide.css — Slide-in scroll animations
   Namespace: .anim-slide-*
   Trigger: IntersectionObserver adds .is-visible
   Usage: <div class="anim-slide anim-slide-left" data-delay="1">
   ========================================================================== */

/* Base: hidden until observed */
.anim-slide {
    opacity: 0;
    will-change: transform, opacity;
    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Revealed state */
.anim-slide.is-visible {
    opacity: 1;
    transform: translate(0, 0) !important;
}

/* --- Direction variants --- */

.anim-slide-left {
    transform: translateX(-80px);
}

.anim-slide-right {
    transform: translateX(80px);
}

.anim-slide-up {
    transform: translateY(60px);
}

.anim-slide-down {
    transform: translateY(-40px);
}

/* Diagonal combos */
.anim-slide-up-left {
    transform: translate(-60px, 40px);
}

.anim-slide-up-right {
    transform: translate(60px, 40px);
}

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

.anim-slide--slow {
    transition-duration: 1.1s;
}

.anim-slide--fast {
    transition-duration: 0.4s;
}

/* --- Stagger delays (use data-delay="1" through "8") --- */

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

/* --- Distance modifiers --- */

.anim-slide--near.anim-slide-left  { transform: translateX(-40px); }
.anim-slide--near.anim-slide-right { transform: translateX(40px); }
.anim-slide--near.anim-slide-up    { transform: translateY(30px); }
.anim-slide--near.anim-slide-down  { transform: translateY(-20px); }

.anim-slide--far.anim-slide-left   { transform: translateX(-150px); }
.anim-slide--far.anim-slide-right  { transform: translateX(150px); }
.anim-slide--far.anim-slide-up     { transform: translateY(100px); }

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

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