:root {
    --motion-distance: 18px;
    --motion-scale: 0.985;
    --motion-blur: 8px;
    --motion-duration: 860ms;
    --motion-delay-step: 120ms;
    --motion-base-delay: 40ms;
    --motion-ease: cubic-bezier(0.2, 0.72, 0.22, 1);
    --motion-ease-soft: cubic-bezier(0.22, 0.61, 0.36, 1);
}

[data-motion] {
    backface-visibility: hidden;
    transition:
        opacity calc(var(--motion-duration) - 140ms) var(--motion-ease-soft),
        transform var(--motion-duration) var(--motion-ease),
        filter calc(var(--motion-duration) + 60ms) var(--motion-ease-soft);
    transition-delay: calc(var(--motion-base-delay) + (var(--animate-order, 0) * var(--motion-delay-step)));
}

[data-motion="pending"] {
    opacity: 0;
    transform: translate3d(0, var(--motion-distance), 0) scale(var(--motion-scale));
    filter: blur(var(--motion-blur));
}

[data-motion="in"] {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    filter: blur(0);
}

@media (max-width: 639px) {
    :root {
        --motion-distance: 16px;
        --motion-blur: 6px;
        --motion-base-delay: 30ms;
    }
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --motion-distance: 0px;
        --motion-scale: 1;
        --motion-blur: 0px;
        --motion-duration: 1ms;
        --motion-delay-step: 0ms;
        --motion-base-delay: 0ms;
    }

    [data-motion="pending"],
    [data-motion="in"] {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        transition: none !important;
    }
}