[data-motion=rise-mask]{display:block}html[data-motion-ready~=reveal] [data-motion]{--motion-duration:1.1s;--motion-delay:.12s;--motion-distance:32px;--motion-blur:14px;--motion-ease:var(--ease-out-expo);--motion-ease-panel:cubic-bezier(.7, 0, .2, 1);&[data-motion-distance=sm]{--motion-distance:14px;--motion-blur:7px}&[data-motion-distance=lg]{--motion-distance:64px;--motion-blur:22px}&[data-motion-distance=xl]{--motion-distance:110px;--motion-blur:32px}&:not([data-motion-in]){opacity:0;&[data-motion=fade-up]{transform:translateY(var(--motion-distance))}&[data-motion=fade-down]{transform:translateY(calc(var(--motion-distance) * -1))}&[data-motion=fade-left]{transform:translateX(var(--motion-distance))}&[data-motion=fade-right]{transform:translateX(calc(var(--motion-distance) * -1))}&[data-motion=fade-up-right]{transform:translate(calc(var(--motion-distance) * -1), var(--motion-distance))}&[data-motion=fade-up-left]{transform:translate(var(--motion-distance), var(--motion-distance))}&[data-motion=zoom-in]{transform:scale(.92)}&[data-motion=zoom-in-up]{transform:scale(.92) translateY(var(--motion-distance))}&[data-motion=zoom-out]{transform:scale(1.08)}&[data-motion=flip-up]{transform:perspective(1200px)rotateX(40deg)}&[data-motion=flip-down]{transform:perspective(1200px)rotateX(-40deg)}&[data-motion=flip-left]{transform:perspective(1200px)rotateY(40deg)}&[data-motion=flip-right]{transform:perspective(1200px)rotateY(-40deg)}&[data-motion=rotate-in]{transform:rotate(-10deg)scale(.92)}&[data-motion=blur-in]{filter:blur(var(--motion-blur))}&[data-motion=blur-up]{transform:translateY(var(--motion-distance));filter:blur(var(--motion-blur))}&[data-motion=spring-up]{transform:translateY(56px)}&[data-motion^=clip-],&[data-motion^=block-],&[data-motion=rise-mask]{opacity:1}&[data-motion=clip-up]{clip-path:inset(100% 0 0)}&[data-motion=clip-down]{clip-path:inset(0 0 100%)}&[data-motion=clip-right]{clip-path:inset(0 100% 0 0)}&[data-motion=clip-left]{clip-path:inset(0 0 0 100%)}&[data-motion=rise-mask]{clip-path:inset(-105% -.1em 105%);transform:translateY(105%)}}&[data-motion-in=run]{transition:opacity var(--motion-duration) var(--motion-ease) var(--motion-delay), transform var(--motion-duration) var(--motion-ease) var(--motion-delay), filter var(--motion-duration) var(--motion-ease) var(--motion-delay), clip-path var(--motion-duration) var(--motion-ease) var(--motion-delay);&[data-motion^=clip-]{clip-path:inset(0)}&[data-motion=rise-mask]{clip-path:inset(-.15em -.1em -.3em)}&[data-motion=spring-up]{animation:motion-spring-up var(--motion-duration) var(--motion-ease) var(--motion-delay) both;transition:none}}&[data-motion^=block-]:not([data-motion-in=done]){position:relative;overflow:hidden;&:after{content:"";z-index:1;background:var(--motion-panel,var(--color-ink));position:absolute;inset:0}}&[data-motion^=block-][data-motion-in=run]:after{transition:transform var(--motion-duration) var(--motion-ease-panel) var(--motion-delay)}&[data-motion=block-right][data-motion-in=run]:after{transform:translate(101%)}&[data-motion=block-left][data-motion-in=run]:after{transform:translate(-101%)}&[data-motion=block-up][data-motion-in=run]:after{transform:translateY(-101%)}&[data-motion=block-down][data-motion-in=run]:after{transform:translateY(101%)}}@keyframes motion-spring-up{0%{opacity:0;transform:translateY(56px)}55%{opacity:1;transform:translateY(-16px)}72%{transform:translateY(8px)}87%{transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}@media (prefers-reduced-motion:no-preference){[data-motion-loop]{animation:var(--loop-duration,3s) ease-in-out infinite}[data-motion-loop=float]{animation-name:motion-loop-float}[data-motion-loop=spin]{animation-name:motion-loop-spin;animation-timing-function:linear}[data-motion-loop=sway]{animation-name:motion-loop-sway}[data-motion-loop=pulse]{animation-name:motion-loop-pulse}[data-motion-loop=breathe]{animation-name:motion-loop-breathe}[data-motion-loop=bounce]{animation-name:motion-loop-bounce;animation-timing-function:cubic-bezier(.3,0,.3,1)}[data-motion-loop=swing]{transform-origin:top;animation-name:motion-loop-swing}[data-motion-paused] [data-motion-loop],[data-motion-paused][data-motion-loop]{animation-play-state:paused}}@keyframes motion-loop-float{50%{transform:translateY(calc(var(--loop-distance,10px) * -1))}}@keyframes motion-loop-spin{to{transform:rotate(360deg)}}@keyframes motion-loop-sway{25%{transform:translateX(calc(var(--loop-distance,10px) * -1))}75%{transform:translateX(var(--loop-distance,10px))}}@keyframes motion-loop-pulse{50%{transform:scale(1.12)}}@keyframes motion-loop-breathe{50%{opacity:.45}}@keyframes motion-loop-bounce{0%,to{transform:translateY(0)}50%{transform:translateY(calc(var(--loop-distance,10px) * -1.6))}}@keyframes motion-loop-swing{25%{transform:rotate(8deg)}75%{transform:rotate(-8deg)}}