:root {
    --motion-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --motion-ease-soft: cubic-bezier(0.16, 1, 0.3, 1);
}

html.motion-ready .reveal {
    opacity: 0;
    transform: translate3d(0, 28px, 0) scale(0.992);
    filter: blur(8px);
    transition:
        opacity 820ms var(--motion-ease),
        transform 820ms var(--motion-ease),
        filter 820ms var(--motion-ease);
    transition-delay: calc(var(--motion-order, 0) * 70ms);
    will-change: opacity, transform, filter;
}

html.motion-ready .reveal.in-view {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    filter: blur(0);
}

html.motion-ready .motion-action,
html.motion-ready .motion-card {
    transition:
        transform 360ms var(--motion-ease-soft),
        filter 360ms var(--motion-ease);
    will-change: transform;
}

html.motion-ready .motion-action svg,
html.motion-ready .motion-card svg,
html.motion-ready .motion-card img {
    transition: transform 520ms var(--motion-ease-soft);
}

@media (hover: hover) and (pointer: fine) {
    html.motion-ready .motion-action:hover {
        transform: translate3d(0, -2px, 0);
    }

    html.motion-ready .motion-action:active {
        transform: translate3d(0, 0, 0) scale(0.985);
    }

    html.motion-ready .motion-action:hover svg {
        transform: translate3d(3px, 0, 0);
    }

    html.motion-ready .motion-card:hover {
        transform:
            translate3d(var(--motion-x, 0px), calc(var(--motion-y, 0px) - 3px), 0)
            rotateX(var(--motion-rx, 0deg))
            rotateY(var(--motion-ry, 0deg));
    }

    html.motion-ready .motion-card:active {
        transform:
            translate3d(var(--motion-x, 0px), var(--motion-y, 0px), 0)
            scale(0.992);
    }
}

html.motion-ready img.motion-img {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(0, 0, 0) scale(1);
    transition:
        opacity 680ms var(--motion-ease),
        filter 680ms var(--motion-ease),
        transform 680ms var(--motion-ease);
}

html.motion-ready img.motion-img.motion-img-pending {
    opacity: 0;
    filter: blur(10px);
    transform: translate3d(0, 8px, 0) scale(1.015);
}

html.motion-ready img.motion-img.motion-img-loaded {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(0, 0, 0) scale(1);
}

html.motion-ready [data-parallax] img {
    transition: transform 760ms var(--motion-ease-soft), filter 520ms var(--motion-ease);
}

@media (max-width: 720px) {
    html.motion-ready .reveal {
        transform: translate3d(0, 18px, 0) scale(0.996);
        filter: blur(5px);
        transition-duration: 640ms;
    }
}

@media (prefers-reduced-motion: reduce) {
    html.motion-ready .reveal,
    html.motion-ready .reveal.in-view,
    html.motion-ready .motion-action,
    html.motion-ready .motion-card,
    html.motion-ready img.motion-img,
    html.motion-ready img.motion-img.motion-img-pending,
    html.motion-ready img.motion-img.motion-img-loaded {
        opacity: 1 !important;
        filter: none !important;
        transform: none !important;
        transition: none !important;
    }
}