/* Global motion system (shared across pages) */

:root {
    --reveal-distance: 18px;
    --reveal-duration: 460ms;
    --reveal-easing: cubic-bezier(0.22, 1, 0.36, 1);
}

.js-motion [data-reveal].reveal-ready {
    opacity: 0;
    transform: translate3d(0, var(--reveal-distance), 0);
    transition:
        opacity var(--reveal-duration) var(--reveal-easing) var(--reveal-delay, 0ms),
        transform var(--reveal-duration) var(--reveal-easing) var(--reveal-delay, 0ms);
    will-change: opacity, transform;
}

.js-motion [data-reveal="down"].reveal-ready {
    transform: translate3d(0, calc(var(--reveal-distance) * -1), 0);
}

.js-motion [data-reveal="left"].reveal-ready {
    transform: translate3d(var(--reveal-distance), 0, 0);
}

.js-motion [data-reveal="right"].reveal-ready {
    transform: translate3d(calc(var(--reveal-distance) * -1), 0, 0);
}

.js-motion [data-reveal="scale"].reveal-ready {
    transform: scale(0.985);
}

.js-motion [data-reveal].reveal-ready.reveal-in {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
}

@media (prefers-reduced-motion: reduce) {
    .js-motion [data-reveal].reveal-ready {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
        will-change: auto;
    }
}