/* motion.css — the motion vocabulary. Every effect is opt-in through a data attribute, the content is fully
visible without JavaScript, and everything turns static under prefers-reduced-motion (and in print).
Needs in , before this file (the timeout shows everything if motion.js never runs):
*/
:root {
--ease-out: cubic-bezier(.16, 1, .3, 1); /* entrances: quick start, long soft landing */
--ease-in-out: cubic-bezier(.65, 0, .35, 1); /* scroll-linked moves, morphs */
--ease-back: cubic-bezier(.34, 1.56, .64, 1); /* a hint of overshoot: buttons, chips — never on text */
--t-fast: .25s; --t-mid: .7s; --t-slow: 1.1s;
--stagger: 70ms;
}
html { scroll-behavior: auto; } /* never "smooth" globally: it fights scroll-linked code and test scripts */
/* 1 · Reveal on scroll ------------------------------------------------------------------------------------
[data-reveal] = "up" (default) | "fade" | "left" | "right" | "scale" | "clip" | "blur"
[data-stagger] on a parent staggers its [data-reveal] children (motion.js sets --i); --delay adds a pause.
End states are "none": a finished reveal never leaves a transform, clip or filter that would crop a shadow. */
html.js [data-reveal] {
opacity: 0; transform: translate3d(0, 28px, 0);
transition: opacity var(--t-mid) var(--ease-out), transform var(--t-slow) var(--ease-out),
clip-path var(--t-slow) var(--ease-in-out), filter var(--t-slow) var(--ease-out);
transition-delay: calc(var(--i, 0) * var(--stagger) + var(--delay, 0ms));
}
html.js [data-reveal="fade"] { transform: none; }
html.js [data-reveal="left"] { transform: translate3d(-40px, 0, 0); }
html.js [data-reveal="right"] { transform: translate3d(40px, 0, 0); }
html.js [data-reveal="scale"] { transform: scale(.94); }
html.js [data-reveal="blur"] { transform: translate3d(0, 14px, 0); filter: blur(14px); }
html.js [data-reveal="clip"] { opacity: 1; transform: none; clip-path: inset(0 0 100% 0); }
html.js [data-reveal].is-in { opacity: 1; transform: none; filter: none; }
html.js [data-reveal="clip"].is-in { clip-path: inset(-30% -30% -30% -30%); } /* open past the box: shadows stay whole */
/* 2 · Split text: [data-split] wraps each word in a mask (motion.js); words rise in one after the other.
The mask is padded so accents (É, À) and descenders are never cut. Spaces stay real spaces (SEO, a11y).
Until it is split, the line stays invisible (no flash of the plain line). */
html.js [data-split]:not(.is-split) { opacity: 0; }
.sw { display: inline-block; overflow: hidden; vertical-align: top; padding: .1em .05em .22em; margin: -.1em -.05em -.22em; }
.sw > span { display: inline-block; }
html.js [data-split] .sw > span { transform: translate3d(0, 135%, 0) rotate(4deg); transform-origin: 0 100%;
transition: transform var(--t-slow) var(--ease-out); transition-delay: calc(var(--w, 0) * 38ms + var(--delay, 0ms)); }
html.js [data-split].is-in .sw > span { transform: none; }
/* 3 · Scroll progress: motion.js writes --p (0 → 1, linear) and --pe (eased) on [data-progress] near the screen.
"pin" (default): 0 when the block's top reaches the top of the screen, 1 when its bottom reaches the bottom —
for tall blocks with a sticky child. "view": 0 when the top enters at the bottom, 1 when the bottom leaves at the top. */
/* 3a · Immersive chapter: a window in the page opens to the whole screen, then a line rises over the photo.