/* Global public-site motion system. Kept transform/opacity-only for smooth scrolling. */
html {
    scroll-behavior: smooth;
}

.motion-reveal {
    --motion-x: 0px;
    --motion-y: 30px;
    --motion-scale: .985;
    opacity: 0;
    transform: translate3d(var(--motion-x), var(--motion-y), 0) scale(var(--motion-scale));
    transform-origin: center center;
    backface-visibility: hidden;
    transition-property: opacity, transform;
    transition-duration: 560ms;
    transition-delay: 0ms;
    transition-timing-function: cubic-bezier(.22, 1, .36, 1);
    will-change: opacity, transform;
}

.motion-reveal[data-motion-origin="top"] {
    --motion-y: -30px;
}

.motion-reveal.motion-left {
    --motion-x: -36px;
    --motion-y: 0px;
}

.motion-reveal.motion-right {
    --motion-x: 36px;
    --motion-y: 0px;
}

.motion-reveal.motion-scale {
    --motion-x: 0px;
    --motion-y: 12px;
    --motion-scale: .95;
}

.motion-reveal.motion-fade {
    --motion-x: 0px;
    --motion-y: 0px;
    --motion-scale: 1;
}

.motion-reveal:not(.is-visible) {
    opacity: 0;
    transform: translate3d(var(--motion-x), var(--motion-y), 0) scale(var(--motion-scale));
    transition-property: opacity, transform;
    transition-duration: 560ms;
    transition-delay: 0ms;
    transition-timing-function: cubic-bezier(.22, 1, .36, 1);
}

.motion-reveal.is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    transition-property: opacity, transform;
    transition-duration: 820ms;
    transition-delay: var(--motion-delay, 0ms);
    will-change: auto;
}

@media (max-width: 767px) {
    .motion-reveal {
        --motion-y: 22px;
    }

    .motion-reveal[data-motion-origin="top"] {
        --motion-y: -22px;
    }

    .motion-reveal.motion-left {
        --motion-x: -22px;
        --motion-y: 0px;
    }

    .motion-reveal.motion-right {
        --motion-x: 22px;
        --motion-y: 0px;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    .motion-reveal,
    .motion-reveal.is-visible {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

@media print {
    .motion-reveal,
    .motion-reveal.is-visible {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}