html.motion-enabled .motion-fade,
html.motion-enabled .motion-up,
html.motion-enabled .motion-down,
html.motion-enabled .motion-left,
html.motion-enabled .motion-right,
html.motion-enabled .motion-scale,
html.motion-enabled .motion-left-stagger-1,
html.motion-enabled .motion-left-stagger-2,
html.motion-enabled .motion-left-stagger-3,
html.motion-enabled .motion-left-stagger-4,
html.motion-enabled .motion-left-stagger-5,
html.motion-enabled .motion-left-stagger-6,
html.motion-enabled .motion-left-stagger-7 {
opacity: 0;
transition-duration: 1300ms;
transition-property: opacity, transform;
transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
will-change: opacity, transform;
}
html.motion-enabled .motion-up { transform: translate3d(0, -200px, 0); }
html.motion-enabled .motion-down { transform: translate3d(0, 200px, 0); }
html.motion-enabled .motion-left { transform: translate3d(-160px, 0, 0); }
html.motion-enabled .motion-right { transform: translate3d(160px, 0, 0); }
html.motion-enabled .motion-scale { transform: scale(0.82); }
html.motion-enabled .motion-left-stagger-1,
html.motion-enabled .motion-left-stagger-2,
html.motion-enabled .motion-left-stagger-3,
html.motion-enabled .motion-left-stagger-4,
html.motion-enabled .motion-left-stagger-5,
html.motion-enabled .motion-left-stagger-6,
html.motion-enabled .motion-left-stagger-7 { transform: translate3d(-160px, 0, 0); }
html.motion-enabled .motion-up-stagger-1,
html.motion-enabled .motion-up-stagger-2,
html.motion-enabled .motion-up-stagger-3,
html.motion-enabled .motion-up-stagger-4,
html.motion-enabled .motion-up-stagger-5 {
opacity: 0;
transform: translate3d(0, 200px, 0);
transition-duration: 1300ms;
transition-property: opacity, transform;
transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
will-change: opacity, transform;
}
html.motion-enabled .motion-up-stagger-1.is-visible,
html.motion-enabled .motion-up-stagger-2.is-visible,
html.motion-enabled .motion-up-stagger-3.is-visible,
html.motion-enabled .motion-up-stagger-4.is-visible,
html.motion-enabled .motion-up-stagger-5.is-visible {
opacity: 1;
transform: none;
will-change: auto;
}
html.motion-enabled .motion-up-stagger-1.is-exiting,
html.motion-enabled .motion-up-stagger-2.is-exiting,
html.motion-enabled .motion-up-stagger-3.is-exiting,
html.motion-enabled .motion-up-stagger-4.is-exiting,
html.motion-enabled .motion-up-stagger-5.is-exiting {
transition-duration: 1900ms;
transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}
html.motion-enabled .motion-fade.is-visible,
html.motion-enabled .motion-up.is-visible,
html.motion-enabled .motion-down.is-visible,
html.motion-enabled .motion-left.is-visible,
html.motion-enabled .motion-right.is-visible,
html.motion-enabled .motion-scale.is-visible,
html.motion-enabled .motion-left-stagger-1.is-visible,
html.motion-enabled .motion-left-stagger-2.is-visible,
html.motion-enabled .motion-left-stagger-3.is-visible,
html.motion-enabled .motion-left-stagger-4.is-visible,
html.motion-enabled .motion-left-stagger-5.is-visible,
html.motion-enabled .motion-left-stagger-6.is-visible,
html.motion-enabled .motion-left-stagger-7.is-visible {
opacity: 1;
transform: none;
will-change: auto;
}
html.motion-enabled .motion-fade.is-exiting,
html.motion-enabled .motion-up.is-exiting,
html.motion-enabled .motion-down.is-exiting,
html.motion-enabled .motion-left.is-exiting,
html.motion-enabled .motion-right.is-exiting,
html.motion-enabled .motion-scale.is-exiting,
html.motion-enabled .motion-left-stagger-1.is-exiting,
html.motion-enabled .motion-left-stagger-2.is-exiting,
html.motion-enabled .motion-left-stagger-3.is-exiting,
html.motion-enabled .motion-left-stagger-4.is-exiting,
html.motion-enabled .motion-left-stagger-5.is-exiting,
html.motion-enabled .motion-left-stagger-6.is-exiting,
html.motion-enabled .motion-left-stagger-7.is-exiting {
transition-duration: 1900ms;
transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}
@media (hover: hover) {
.motion-hover-scale {
transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1) !important;
will-change: transform;
}
.motion-hover-scale:hover {
transform: scale(1.1) !important;
}
}
@media (max-width: 767px) {
html.motion-enabled,
html.motion-enabled body {
overflow-x: hidden;
}
html.motion-enabled .motion-left,
html.motion-enabled .motion-right,
html.motion-enabled .motion-left-stagger-1,
html.motion-enabled .motion-left-stagger-2,
html.motion-enabled .motion-left-stagger-3,
html.motion-enabled .motion-left-stagger-4,
html.motion-enabled .motion-left-stagger-5,
html.motion-enabled .motion-left-stagger-6,
html.motion-enabled .motion-left-stagger-7 {
max-width: 100%;
}
html.motion-enabled .motion-up { transform: translate3d(0, -75px, 0); }
html.motion-enabled .motion-down { transform: translate3d(0, 75px, 0); }
html.motion-enabled .motion-left { transform: translate3d(-60px, 0, 0); }
html.motion-enabled .motion-right { transform: translate3d(60px, 0, 0); }
html.motion-enabled .motion-left-stagger-1,
html.motion-enabled .motion-left-stagger-2,
html.motion-enabled .motion-left-stagger-3,
html.motion-enabled .motion-left-stagger-4,
html.motion-enabled .motion-left-stagger-5,
html.motion-enabled .motion-left-stagger-6,
html.motion-enabled .motion-left-stagger-7 { transform: translate3d(-60px, 0, 0); }
html.motion-enabled .motion-up-stagger-1,
html.motion-enabled .motion-up-stagger-2,
html.motion-enabled .motion-up-stagger-3,
html.motion-enabled .motion-up-stagger-4,
html.motion-enabled .motion-up-stagger-5 { transform: translate3d(0, 75px, 0); }
}
@media (prefers-reduced-motion: reduce) {
html.motion-enabled .motion-fade,
html.motion-enabled .motion-up,
html.motion-enabled .motion-down,
html.motion-enabled .motion-left,
html.motion-enabled .motion-right,
html.motion-enabled .motion-scale,
html.motion-enabled .motion-left-stagger-1,
html.motion-enabled .motion-left-stagger-2,
html.motion-enabled .motion-left-stagger-3,
html.motion-enabled .motion-left-stagger-4,
html.motion-enabled .motion-left-stagger-5,
html.motion-enabled .motion-left-stagger-6,
html.motion-enabled .motion-left-stagger-7,
html.motion-enabled .motion-up-stagger-1,
html.motion-enabled .motion-up-stagger-2,
html.motion-enabled .motion-up-stagger-3,
html.motion-enabled .motion-up-stagger-4,
html.motion-enabled .motion-up-stagger-5 {
opacity: 1;
transform: none;
transition: none;
}
}