/* Scroll-reveal animations.
   JS adds .anim + .anim--<dir> on elements and .is-in when they enter the viewport.
   Stagger inside grids: each child gets style="--anim-i: N". */

.anim {
    opacity: 0;
    transition: opacity .7s cubic-bezier(.2, .7, .2, 1),
                transform .7s cubic-bezier(.2, .7, .2, 1);
    transition-delay: calc(var(--anim-i, 0) * var(--anim-stagger, 90ms));
    will-change: opacity, transform;
}

.anim--up    { transform: translateY(40px); }
.anim--down  { transform: translateY(-40px); }
.anim--left  { transform: translateX(-50px); }
.anim--right { transform: translateX(50px); }
.anim--fade  { transform: none; }

.anim.is-in {
    opacity: 1;
    transform: none;
}

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