/* ============================================================================ motion.css - the scroll system. Copy in with blocks/motion.js. This is what separates a page that feels alive from a static document. Modern CSS scroll-driven animations run on the compositor (no JS, no jank); motion.js supplies the fallback for browsers without them and handles the things CSS cannot do alone (counters, split text, magnetic cursor). EVERY animation here is off under prefers-reduced-motion. That is not optional - in Israel it is part of IS 5568 compliance. Budget: 3-4 of these per page. All of them at once is a showreel. ============================================================================ */ @media (prefers-reduced-motion: reduce) { /* One switch disables the whole system. Anything added later is covered. */ [class*="m-"] { animation: none !important; transition: none !important; opacity: 1 !important; transform: none !important; } } @media (prefers-reduced-motion: no-preference) { /* --------------------------------------------------------------------------- 1. REVEAL ON ENTER - scroll-driven, no JS. animation-timeline: view() ties progress to the element's position in the viewport, so it is frame-perfect and costs nothing. --------------------------------------------------------------------------- */ @supports (animation-timeline: view()) { .m-reveal { animation: m-rise linear both; animation-timeline: view(); animation-range: entry 0% entry 55%; } .m-reveal-fade { animation: m-fade linear both; animation-timeline: view(); animation-range: entry 0% entry 50%; } } @keyframes m-rise { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: none; } } @keyframes m-fade { from { opacity: 0; } to { opacity: 1; } } /* JS fallback - motion.js adds .is-in */ @supports not (animation-timeline: view()) { .m-reveal, .m-reveal-fade { opacity: 0; transform: translateY(40px); transition: opacity .7s var(--ease), transform .7s var(--ease); } .m-reveal.is-in, .m-reveal-fade.is-in { opacity: 1; transform: none; } } /* --------------------------------------------------------------------------- 2. PARALLAX - background drifts slower than the page. Depth without the scroll-jacking that breaks trackpads. --------------------------------------------------------------------------- */ @supports (animation-timeline: view()) { .m-parallax > img, .m-parallax > video { animation: m-drift linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; } } .m-parallax { overflow: hidden; } /* The image must be oversized or the drift exposes an empty edge. */ .m-parallax > img { height: 125%; width: 100%; object-fit: cover; } @keyframes m-drift { from { transform: translateY(-10%); } to { transform: translateY(10%); } } /* --------------------------------------------------------------------------- 3. SCALE-IN MEDIA - image settles from slightly oversized. Expensive-feeling and cheap to run. luxury-dark's signature. --------------------------------------------------------------------------- */ @supports (animation-timeline: view()) { .m-scale-in { animation: m-scale linear both; animation-timeline: view(); animation-range: entry 0% entry 70%; } } @keyframes m-scale { from { transform: scale(1.08); opacity: .6; } to { transform: scale(1); opacity: 1; } } /* --------------------------------------------------------------------------- 4. STICKY SCENE - the section pins while its content advances. The single most "designed" scroll effect available. Use once per site.
...stays...
...scrolls past...
--------------------------------------------------------------------------- */ .m-sticky-scene { position: relative; display: grid; gap: var(--space-7); } @media (min-width: 900px) { .m-sticky-scene { grid-template-columns: 1fr 1fr; align-items: start; } .m-sticky-scene__pin { position: sticky; top: calc(68px + var(--space-6)); } } /* --------------------------------------------------------------------------- 5. SCROLL PROGRESS BAR - top of the page. animation-timeline: scroll(). --------------------------------------------------------------------------- */ .m-progress { position: fixed; inset-block-start: 0; inset-inline: 0; block-size: 3px; z-index: calc(var(--z-header) + 1); background: var(--accent); transform-origin: 0 50%; /* RTL: the bar must grow from the right. */ transform: scaleX(0); } [dir="rtl"] .m-progress { transform-origin: 100% 50%; } @supports (animation-timeline: scroll()) { .m-progress { animation: m-progress linear both; animation-timeline: scroll(root block); } } @keyframes m-progress { to { transform: scaleX(1); } } /* --------------------------------------------------------------------------- 6. SPLIT-TEXT HEADLINE - words rise in sequence. motion.js wraps the words. Use on ONE headline, normally the hero. --i is set per word by the script. --------------------------------------------------------------------------- */ .m-split .m-word { display: inline-block; opacity: 0; transform: translateY(0.5em); } .m-split.is-in .m-word { opacity: 1; transform: none; transition: opacity .55s var(--ease), transform .55s var(--ease); transition-delay: calc(var(--i) * 45ms); } /* --------------------------------------------------------------------------- 7. LINE DRAW - a rule draws itself across the section on entry. archival-document's signature; good as a quiet divider anywhere. --------------------------------------------------------------------------- */ .m-line { block-size: 1px; background: currentColor; opacity: .25; transform: scaleX(0); transform-origin: 0 50%; } [dir="rtl"] .m-line { transform-origin: 100% 50%; } @supports (animation-timeline: view()) { .m-line { animation: m-draw linear both; animation-timeline: view(); animation-range: entry 10% entry 60%; } } @keyframes m-draw { to { transform: scaleX(1); } } /* --------------------------------------------------------------------------- 8. STAGGERED CHILDREN - a grid or list enters in sequence. --------------------------------------------------------------------------- */ .m-stagger > * { opacity: 0; transform: translateY(24px); } @supports (animation-timeline: view()) { .m-stagger > * { animation: m-rise linear both; animation-timeline: view(); animation-range: entry 0% entry 45%; } } .m-stagger.is-in > * { opacity: 1; transform: none; transition: opacity .6s var(--ease), transform .6s var(--ease); } .m-stagger.is-in > *:nth-child(1){transition-delay:0ms} .m-stagger.is-in > *:nth-child(2){transition-delay:80ms} .m-stagger.is-in > *:nth-child(3){transition-delay:160ms} .m-stagger.is-in > *:nth-child(4){transition-delay:240ms} .m-stagger.is-in > *:nth-child(5){transition-delay:320ms} .m-stagger.is-in > *:nth-child(6){transition-delay:400ms} /* --------------------------------------------------------------------------- 9. HEADER ON SCROLL - shrinks and solidifies. motion.js toggles .is-scrolled. --------------------------------------------------------------------------- */ .site-header { transition: background var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } .site-header.is-scrolled { background: var(--bg); box-shadow: var(--shadow-2); } .site-header.is-scrolled .site-header__inner { min-height: 56px; } .site-header__inner { transition: min-height var(--dur) var(--ease); } /* --------------------------------------------------------------------------- 10. MAGNETIC BUTTON - drifts toward the cursor. Pointer devices only. --------------------------------------------------------------------------- */ @media (hover: hover) and (pointer: fine) { .m-magnetic { transition: transform .25s var(--ease); will-change: transform; } } } /* end prefers-reduced-motion: no-preference */ /* --------------------------------------------------------------------------- PERFORMANCE - transform and opacity only. Never animate width/height/top/filter. - animation-timeline runs on the compositor: dozens of elements are fine. - The JS fallback uses one shared IntersectionObserver, not one per element. - .m-parallax images must be oversized (125%) or a gap appears at the edge. --------------------------------------------------------------------------- */