/**
 * NumberPlex — Scroll Animation System
 * Fade-up / fade-in / zoom-in on scroll, using IntersectionObserver.
 * Respects prefers-reduced-motion automatically.
 *
 * Usage: add data-animate="fade-up" to any element.
 * Optional: data-delay="150" (ms) for staggered reveals.
 * Optional: data-duration="700" (ms) to override default speed.
 */

[data-animate] {
    opacity: 0;
    will-change: transform, opacity;
    transition-property: opacity, transform, filter;
    transition-timing-function: cubic-bezier(.16,1,.3,1);
    transition-duration: var(--np-anim-duration, 700ms);
    transition-delay: var(--np-anim-delay, 0ms);
}

[data-animate="fade-up"]    { transform: translateY(28px); }
[data-animate="fade-down"]  { transform: translateY(-24px); }
[data-animate="fade-left"]  { transform: translateX(28px); }
[data-animate="fade-right"] { transform: translateX(-28px); }
[data-animate="fade-in"]    { transform: none; }
[data-animate="zoom-in"]    { transform: scale(.94); }
[data-animate="blur-in"]    { filter: blur(6px); transform: translateY(14px); }

[data-animate].np-in-view {
    opacity: 1;
    transform: none;
    filter: blur(0);
}

/* Stagger children automatically inside a container marked data-stagger */
[data-stagger] > [data-animate] { transition-delay: var(--np-anim-delay, 0ms); }

/* Respect reduced motion preference — show everything instantly */
@media (prefers-reduced-motion: reduce) {
    [data-animate] {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        transition: none !important;
    }
}