/* ========================================================================== Motion system — shared tokens + scroll-reveal. --fi-ease / --fi-dur-fast are the shared tokens the rest of the theme's hover/focus transitions are unified onto (nav links, buttons, cards). --fi-dur / --fi-dur-stagger-step drive the scroll-reveal only. Reveal mechanism: assets/js/reveal.js adds `.js-reveal-ready` to once it runs, then tags targets with `.js-reveal` and later `.is-revealed` as they cross the viewport (via IntersectionObserver, see the JS for the "already visible on load" and stagger logic). Content is visible by default — the opacity:0 starting state below only ever applies once `.js-reveal-ready` is present AND an element carries `.js-reveal` without `.is-revealed` yet, so a no-JS visitor (no `.js-reveal-ready` class) or a reduced-motion visitor (script exits before adding the class) always sees fully visible, unanimated content. ========================================================================== */ :root { --fi-ease: cubic-bezier(0.22, 1, 0.36, 1); --fi-dur: 550ms; --fi-dur-fast: 240ms; } html.js-reveal-ready .js-reveal:not(.is-revealed) { opacity: 0; transform: translateY(14px); } html.js-reveal-ready .js-reveal { opacity: 1; transform: translateY(0); transition: opacity var(--fi-dur) var(--fi-ease), transform var(--fi-dur) var(--fi-ease); will-change: opacity, transform; } html.js-reveal-ready .js-reveal.is-revealed { will-change: auto; } @media (prefers-reduced-motion: reduce) { html.js-reveal-ready .js-reveal, html.js-reveal-ready .js-reveal:not(.is-revealed) { opacity: 1; transform: none; transition: none; } }