:root {
    --motion-duration: 700ms;
    --motion-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --motion-distance: 48px;
    --motion-scale-start: 0.96;
    --motion-blur-start: 8px;
    --motion-enter-x: 0px;
    --motion-enter-y: 0px;
    --motion-enter-scale: 1;
    --motion-enter-blur: 0px;
    --motion-parallax-x: 0px;
    --motion-parallax-y: 0px;
}

html.has-motion-js .motion:not(.motion--stagger),
html.has-motion-js .animate:not(.animate--stagger),
html.has-motion-js .motion--stagger > *,
html.has-motion-js .animate--stagger > *,
html.has-motion-js .motion-stagger-item {
    --motion-shift-x: var(--motion-enter-x);
    --motion-shift-y: var(--motion-enter-y);
    --motion-current-scale: var(--motion-enter-scale);
    --motion-current-blur: var(--motion-enter-blur);
    opacity: 0;
    filter: blur(var(--motion-current-blur));
    translate:
        calc(var(--motion-shift-x) + var(--motion-parallax-x))
        calc(var(--motion-shift-y) + var(--motion-parallax-y));
    scale: var(--motion-current-scale);
    transition:
        opacity var(--motion-duration, 700ms) var(--motion-ease, cubic-bezier(0.22, 1, 0.36, 1)),
        translate var(--motion-duration, 700ms) var(--motion-ease, cubic-bezier(0.22, 1, 0.36, 1)),
        scale var(--motion-duration, 700ms) var(--motion-ease, cubic-bezier(0.22, 1, 0.36, 1)),
        filter var(--motion-duration, 700ms) var(--motion-ease, cubic-bezier(0.22, 1, 0.36, 1));
    transition-delay: var(--motion-delay, 0ms);
    will-change: translate, scale, opacity, filter;
}

html.has-motion-js .motion.is-animated:not(.motion--stagger),
html.has-motion-js .animate.is-animated:not(.animate--stagger),
html.has-motion-js .motion--stagger > *.is-animated,
html.has-motion-js .animate--stagger > *.is-animated,
html.has-motion-js .motion-stagger-item.is-animated {
    --motion-shift-x: 0px;
    --motion-shift-y: 0px;
    --motion-current-scale: 1;
    --motion-current-blur: 0px;
    opacity: 1;
}

.motion--fade,
.animate--fade {
    --motion-enter-y: 0px;
}

.motion--fade-up,
.animate--fade-up {
    --motion-enter-y: var(--motion-distance, 48px);
}

.motion--fade-down,
.animate--fade-down {
    --motion-enter-y: calc(var(--motion-distance, 48px) * -1);
}

.motion--fade-left,
.animate--fade-left {
    --motion-enter-x: calc(var(--motion-distance, 48px) * -1);
}

.motion--fade-right,
.animate--fade-right {
    --motion-enter-x: var(--motion-distance, 48px);
}

.motion--zoom-in,
.animate--zoom-in {
    --motion-enter-scale: var(--motion-scale-start, 0.96);
}

.motion--blur-in,
.animate--blur-in {
    --motion-enter-scale: 0.985;
    --motion-enter-blur: var(--motion-blur-start, 8px);
}

.motion--float.is-animated,
.animate--float.is-animated {
    animation: motion-float 6s ease-in-out infinite;
}

.motion--stagger > .motion,
.motion--stagger > .animate,
.motion--stagger > .motion-stagger-item,
.animate--stagger > .motion,
.animate--stagger > .animate,
.animate--stagger > .motion-stagger-item {
    transition-delay: var(--motion-delay, 0ms);
}

html.has-motion-js .motion.motion--stagger,
html.has-motion-js .animate.animate--stagger {
    opacity: 1;
    filter: none;
    translate: 0 0;
    scale: 1;
    transition: none;
    will-change: auto;
}

.motion--stagger > :nth-child(1),
.animate--stagger > :nth-child(1) {
    --motion-index: 0;
}

.motion--stagger > :nth-child(2),
.animate--stagger > :nth-child(2) {
    --motion-index: 1;
}

.motion--stagger > :nth-child(3),
.animate--stagger > :nth-child(3) {
    --motion-index: 2;
}

.motion--stagger > :nth-child(4),
.animate--stagger > :nth-child(4) {
    --motion-index: 3;
}

.motion--stagger > :nth-child(5),
.animate--stagger > :nth-child(5) {
    --motion-index: 4;
}

.motion--stagger > :nth-child(6),
.animate--stagger > :nth-child(6) {
    --motion-index: 5;
}

.motion--stagger > :nth-child(7),
.animate--stagger > :nth-child(7) {
    --motion-index: 6;
}

.motion--stagger > :nth-child(8),
.animate--stagger > :nth-child(8) {
    --motion-index: 7;
}

.motion--parallax,
.animate--parallax {
    transition-property: opacity, filter, translate, scale;
}

.motion--parallax-bg,
.animate--parallax-bg {
    background-position:
        var(--motion-bg-position-x, 50%)
        calc(var(--motion-bg-base-y, 50%) + var(--motion-bg-parallax-y, 0px));
    transition-property: opacity, filter, translate, scale;
}

.motion--fast,
.animate--fast {
    --motion-duration: 450ms;
}

.motion--slow,
.animate--slow {
    --motion-duration: 1100ms;
}

@keyframes motion-float {
    0%,
    100% {
        translate: 0 0;
    }

    50% {
        translate: 0 -10px;
    }
}

@media (prefers-reduced-motion: reduce) {
    html.has-motion-js .motion,
    html.has-motion-js .animate,
    html.has-motion-js .motion-stagger-item {
        opacity: 1;
        filter: none;
        translate: 0 0;
        scale: 1;
        transition: none;
        animation: none;
    }
}