/* Motion kit v1 — tokens, reveals, micro-interactions. Pair with motion.js.
Content stays visible without JS: hidden states only apply under html.motion-ready. */
:root {
/* Durations: UI feedback < 200ms, entrances 400–700ms, hero moments ≤ 1100ms */
--m-dur-xs: 120ms;
--m-dur-s: 200ms;
--m-dur-m: 320ms;
--m-dur-l: 640ms;
--m-dur-xl: 1000ms;
/* Easings: out for entrances, in for exits, in-out for moves on screen */
--m-ease-out: cubic-bezier(.22, 1, .36, 1);
--m-ease-in: cubic-bezier(.55, 0, 1, .45);
--m-ease-in-out: cubic-bezier(.65, 0, .35, 1);
--m-ease-back: cubic-bezier(.34, 1.56, .64, 1);
--m-ease-spring: linear(0, .009, .035 2.1%, .141 4.4%, .723 12.9%, .938 16.7%, 1.017 19.4%, 1.067, 1.087 24.6%, 1.08 27.6%, 1.026 34.6%, .995 41.3%, .984 46.4%, 1.002 64.8%, 1);
--m-distance: 28px;
--m-stagger: 70ms;
}
/* ---------- Cross-page transitions (same-origin multi-page sites) ---------- */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: m-vt-out var(--m-dur-m) var(--m-ease-in) both; }
::view-transition-new(root) { animation: m-vt-in var(--m-dur-l) var(--m-ease-out) both; }
@keyframes m-vt-out { to { opacity: 0; transform: translateY(-8px); } }
@keyframes m-vt-in { from { opacity: 0; transform: translateY(12px); } }
@media (prefers-reduced-motion: no-preference) {
html { scroll-behavior: smooth; }
}
/* ---------- Scroll reveals: data-reveal="up|down|left|right|fade|scale|blur|clip|clip-up" ---------- */
.motion-ready [data-reveal] {
--_d: calc(var(--i, 0) * var(--m-stagger) + var(--delay, 0ms));
transition:
opacity var(--dur, var(--m-dur-l)) var(--m-ease-out) var(--_d),
transform var(--dur, var(--m-dur-l)) var(--m-ease-out) var(--_d),
filter var(--dur, var(--m-dur-l)) var(--m-ease-out) var(--_d),
clip-path var(--dur, var(--m-dur-xl)) var(--m-ease-in-out) var(--_d);
}
.motion-ready [data-reveal]:not(.is-in) { opacity: 0; }
.motion-ready [data-reveal="up"]:not(.is-in),
.motion-ready [data-reveal=""]:not(.is-in) { transform: translateY(var(--m-distance)); }
.motion-ready [data-reveal="down"]:not(.is-in) { transform: translateY(calc(var(--m-distance) * -1)); }
.motion-ready [data-reveal="left"]:not(.is-in) { transform: translateX(var(--m-distance)); }
.motion-ready [data-reveal="right"]:not(.is-in) { transform: translateX(calc(var(--m-distance) * -1)); }
.motion-ready [data-reveal="scale"]:not(.is-in) { transform: scale(.94); }
.motion-ready [data-reveal="blur"]:not(.is-in) { filter: blur(12px); transform: translateY(12px); }
.motion-ready [data-reveal="clip"]:not(.is-in) { opacity: 1; clip-path: inset(0 100% 0 0); }
.motion-ready [data-reveal="clip-up"]:not(.is-in) { opacity: 1; clip-path: inset(100% 0 0 0); }
.motion-ready [data-reveal="clip"], .motion-ready [data-reveal="clip-up"] { clip-path: inset(0 0 0 0); }
/* ---------- Split text: data-split="words|chars" (motion.js wraps pieces) ---------- */
.m-split-piece { display: inline-block; white-space: pre; }
.m-split-mask { display: inline-block; overflow: clip; vertical-align: bottom; padding-bottom: .08em; margin-bottom: -.08em; }
.motion-ready [data-split] .m-split-piece {
transition: transform var(--dur, 800ms) var(--m-ease-out), opacity var(--dur, 800ms) var(--m-ease-out);
transition-delay: calc(var(--i, 0) * var(--split-stagger, 40ms) + var(--delay, 0ms));
}
.motion-ready [data-split]:not(.is-in) .m-split-piece { transform: translateY(105%); opacity: 0; }
/* ---------- Marquee: data-marquee (motion.js duplicates the track) ---------- */
[data-marquee] { overflow: hidden; display: flex; gap: var(--marquee-gap, 3rem);
mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.m-marquee-track { display: flex; flex: none; gap: var(--marquee-gap, 3rem); min-width: 100%; justify-content: space-around;
animation: m-marquee var(--speed, 30s) linear infinite; }
[data-marquee="reverse"] .m-marquee-track { animation-direction: reverse; }
[data-marquee]:hover .m-marquee-track { animation-play-state: paused; }
@keyframes m-marquee { to { transform: translateX(calc(-100% - var(--marquee-gap, 3rem))); } }
/* ---------- Scroll progress bar: ---------- */
[data-progress] { position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 1000; transform-origin: 0 50%;
background: var(--progress-color, currentColor); transform: scaleX(var(--p, 0)); pointer-events: none; }
@supports (animation-timeline: scroll()) {
[data-progress] { animation: m-progress linear both; animation-timeline: scroll(root); }
@keyframes m-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
}
/* ---------- Auto-hiding header: ---------- */
[data-autohide] { transition: transform var(--m-dur-m) var(--m-ease-out), box-shadow var(--m-dur-m); }
[data-autohide].is-hidden { transform: translateY(-100%); }
[data-autohide].is-scrolled { box-shadow: 0 6px 24px -12px rgb(0 0 0 / .25); }
/* ---------- Micro-interactions (classes) ---------- */
.m-press { transition: transform var(--m-dur-xs) var(--m-ease-out); }
.m-press:active { transform: scale(.96); }
.m-lift { transition: transform var(--m-dur-m) var(--m-ease-out), box-shadow var(--m-dur-m) var(--m-ease-out); }
.m-lift:hover { transform: translateY(-4px); box-shadow: 0 18px 40px -20px rgb(0 0 0 / .35); }
.m-underline { background: linear-gradient(currentColor 0 0) 0 100% / 0 1px no-repeat; transition: background-size var(--m-dur-m) var(--m-ease-out); text-decoration: none; }
.m-underline:hover, .m-underline:focus-visible { background-size: 100% 1px; }
.m-zoom { overflow: hidden; }
.m-zoom img { transition: transform var(--m-dur-xl) var(--m-ease-out); }
.m-zoom:hover img { transform: scale(1.05); }
[data-magnetic], [data-tilt] { transition: transform var(--m-dur-m) var(--m-ease-out); will-change: transform; }
[data-tilt] { transform-style: preserve-3d; }
/* App states */
.m-skeleton { position: relative; overflow: hidden; background: color-mix(in srgb, currentColor 8%, transparent); border-radius: 6px; color: transparent; }
.m-skeleton::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%);
background: linear-gradient(90deg, transparent, color-mix(in srgb, currentColor 10%, transparent), transparent);
animation: m-shimmer 1.4s infinite; }
@keyframes m-shimmer { to { transform: translateX(100%); } }
.m-spinner { width: 1.1em; height: 1.1em; border-radius: 50%; display: inline-block; vertical-align: -.15em;
border: 2px solid currentColor; border-right-color: transparent; animation: m-spin .7s linear infinite; }
@keyframes m-spin { to { transform: rotate(1turn); } }
.m-shake { animation: m-shake 400ms var(--m-ease-out); }
@keyframes m-shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
.m-pop { animation: m-pop 420ms var(--m-ease-back); }
@keyframes m-pop { 0% { transform: scale(.85); opacity: 0; } 100% { transform: none; opacity: 1; } }
/* Elements inserted later (list items, toasts, results) animate in on their own */
.m-enter { transition: opacity var(--m-dur-m) var(--m-ease-out), transform var(--m-dur-m) var(--m-ease-out); }
@starting-style { .m-enter { opacity: 0; transform: translateY(10px); } }
/* Native