:root { --motion-duration-default: 620ms; --motion-duration-fast: 410ms; --motion-duration-slow: 800ms; --motion-ease: cubic-bezier(0.22, 1, 0.36, 1); --motion-distance-default: 18px; --motion-distance-subtle: 10px; --motion-scale-default: 0.975; --motion-scale-subtle: 0.985; --motion-stagger: 120ms; --motion-max-spread: 480ms; --motion-load-stagger: 145ms; --motion-load-max-spread: 580ms; --motion-burst-gap: 75ms; --motion-burst-max-spread: 220ms; --motion-trigger-offset: 0.12; --motion-delay-1: 90ms; --motion-delay-2: 180ms; } @media (max-width: 1199px) { :root { --motion-duration-default: 560ms; --motion-duration-fast: 380ms; --motion-duration-slow: 710ms; --motion-distance-default: 16px; --motion-distance-subtle: 9px; --motion-stagger: 110ms; --motion-max-spread: 440ms; --motion-load-stagger: 130ms; --motion-load-max-spread: 520ms; --motion-burst-gap: 65ms; --motion-burst-max-spread: 190ms; --motion-trigger-offset: 0.09; --motion-delay-1: 75ms; --motion-delay-2: 150ms; } } @media (max-width: 478px) { :root { --motion-duration-default: 500ms; --motion-duration-fast: 350ms; --motion-duration-slow: 640ms; --motion-distance-default: 14px; --motion-distance-subtle: 8px; --motion-stagger: 90ms; --motion-max-spread: 315ms; --motion-load-stagger: 105ms; --motion-load-max-spread: 360ms; --motion-burst-gap: 55ms; --motion-burst-max-spread: 160ms; --motion-trigger-offset: 0.07; --motion-delay-1: 60ms; --motion-delay-2: 120ms; } } :where(.motion-item, .motion-load) { --motion-duration: var(--motion-duration-default); --motion-distance: var(--motion-distance-default); --motion-x: 0px; --motion-y: var(--motion-distance); --motion-scale-start: 1; --motion-group-delay: 0ms; --motion-extra-delay: 0ms; } :where(.motion-item, .motion-load).motion-fade { --motion-x: 0px; --motion-y: 0px; --motion-scale-start: 1; } :where(.motion-item, .motion-load).motion-scale { --motion-x: 0px; --motion-y: 0px; --motion-scale-start: var(--motion-scale-default); } :where(.motion-item, .motion-load).motion-left { --motion-x: calc(var(--motion-distance) * -1); --motion-y: 0px; } :where(.motion-item, .motion-load).motion-right { --motion-x: var(--motion-distance); --motion-y: 0px; } :where(.motion-item, .motion-load).motion-subtle { --motion-distance: var(--motion-distance-subtle); } :where(.motion-item, .motion-load).motion-subtle.motion-scale { --motion-scale-start: var(--motion-scale-subtle); } :where(.motion-item, .motion-load).motion-fast { --motion-duration: var(--motion-duration-fast); } :where(.motion-item, .motion-load).motion-slow { --motion-duration: var(--motion-duration-slow); } :where(.motion-item, .motion-load).motion-delay-1 { --motion-extra-delay: var(--motion-delay-1); } :where(.motion-item, .motion-load).motion-delay-2 { --motion-extra-delay: var(--motion-delay-2); } html.motion-boot.motion-enabled :where(.motion-item, .motion-load):not(.is-visible) { opacity: 0; translate: var(--motion-x) var(--motion-y); scale: var(--motion-scale-start); } html.motion-boot.motion-enabled :where(.motion-item, .motion-load).is-visible { animation-name: motion-reveal; animation-duration: var(--motion-duration); animation-timing-function: var(--motion-ease); animation-delay: calc(var(--motion-group-delay) + var(--motion-extra-delay)); animation-fill-mode: both; } @keyframes motion-reveal { from { opacity: 0; translate: var(--motion-x) var(--motion-y); scale: var(--motion-scale-start); } to { opacity: 1; translate: 0 0; scale: 1; } } @media (prefers-reduced-motion: reduce) { :where(.motion-item, .motion-load) { opacity: 1 !important; translate: 0 0 !important; scale: 1 !important; animation: none !important; } }