/* * Studio motion: subtle, GPU-friendly animations for prototypes and full pages (same file in both). * Only opacity / transform / a small blur animate (no layout properties), so it stays smooth on phones. * Content is visible without JS: hiding starts only once motion.js adds .m-ready to . * Everything is off with prefers-reduced-motion. * * data-reveal[="up|fade|left|right|scale|blur"] enter when scrolled into view (default "up") * data-reveal="clip|clip-left|clip-right" a large photo (or its frame) is uncovered from one edge while the * image inside settles from a slight zoom; large media only * data-lines on a heading: its lines rise out of masks one after another * (text stays real text; inline / and
are kept) * data-fill on ONE statement paragraph: it lights up word by word as it is read * data-reveal-delay="120" extra delay in ms * data-stagger[="80"] on a parent: its [data-reveal] children enter one after another * data-parallax="0.12" image/decoration drifts slightly on scroll (keep 0.05–0.2) * data-count="483" [data-count-decimals="1"] number counts up when visible (write the final value as text) * data-header gets [data-scrolled] after 24px of scroll (style it in the page) * current section the header nav link () whose section is on screen * gets aria-current="location"; default indicator below (a thin * line in the link's color that draws in). Restyle a[aria-current] * to fit the design; data-spy-skip on a link (e.g. a CTA button) * leaves it out; data-spy on another container adds its links. * .m-lift (cards/buttons: lift on hover) · .m-zoom (wrapper: its img zooms slowly on hover) */ :root { --m-ease: cubic-bezier(0.16, 1, 0.3, 1); --m-dur: 800ms; --m-dist: 28px; } .m-ready [data-reveal] { opacity: 0; transform: translate3d(0, var(--m-dist), 0); transition: opacity var(--m-dur) var(--m-ease), transform var(--m-dur) var(--m-ease), filter var(--m-dur) var(--m-ease); transition-delay: var(--m-delay, 0ms); } .m-ready [data-reveal="fade"] { transform: none; } .m-ready [data-reveal="left"] { transform: translate3d(calc(var(--m-dist) * -1), 0, 0); } .m-ready [data-reveal="right"] { transform: translate3d(var(--m-dist), 0, 0); } .m-ready [data-reveal="scale"] { transform: scale(0.96); } .m-ready [data-reveal="blur"] { transform: translate3d(0, calc(var(--m-dist) / 2), 0); filter: blur(10px); } .m-ready [data-reveal].is-in { opacity: 1; transform: none; filter: none; } /* image wipe: no fade, the frame is uncovered and the photo settles */ .m-ready [data-reveal^="clip"] { opacity: 1; transform: none; clip-path: inset(0 0 100% 0); transition: clip-path 1.1s var(--m-ease); transition-delay: var(--m-delay, 0ms); } .m-ready [data-reveal="clip-left"] { clip-path: inset(0 100% 0 0); } .m-ready [data-reveal="clip-right"] { clip-path: inset(0 0 0 100%); } .m-ready [data-reveal^="clip"].is-in { clip-path: inset(0 0 0 0); } .m-ready [data-reveal^="clip"] :where(img, video) { transform: scale(1.12); transition: transform 1.6s var(--m-ease); transition-delay: var(--m-delay, 0ms); } .m-ready [data-reveal^="clip"].is-in :where(img, video) { transform: none; } /* lines out of masks: each word sits in a clipped box and rises; the delay follows its line */ .m-ready [data-lines] .m-w { display: inline-block; clip-path: inset(-0.1em -0.12em -0.2em -0.12em); } .m-ready [data-lines] .m-w > span { display: inline-block; transform: translate3d(0, 125%, 0); transition: transform 1s var(--m-ease); transition-delay: calc(var(--m-delay, 0ms) + var(--m-l, 0) * 90ms); } .m-ready [data-lines].is-in .m-w > span { transform: none; } /* reading light: --m-f runs from 0 to (words + 4) with the scroll (motion.js) */ .m-ready [data-fill] .m-f > span { opacity: clamp(0.16, calc((var(--m-f, 0) - var(--i, 0)) / 4), 1); } [data-parallax] { will-change: transform; } /* Current section in the menu: a 1.5px line under the link that draws in from the left. No layout shift (a pseudo-element), the link's own color, zero specificity (:where) so any page rule restyles it. */ :where([data-header] nav a[href^="#"], header nav a[href^="#"], [data-spy] a[href^="#"]):where(:not([data-spy-skip])) { position: relative; } :where([data-header] nav a[href^="#"], header nav a[href^="#"], [data-spy] a[href^="#"]):where(:not([data-spy-skip]))::after { content: ""; position: absolute; left: 0; right: 0; bottom: -0.4em; height: 1.5px; background: currentColor; transform: scaleX(0); transform-origin: left center; transition: transform 0.4s var(--m-ease); pointer-events: none; } :where([data-header] nav a[href^="#"], header nav a[href^="#"], [data-spy] a[href^="#"]):where(:not([data-spy-skip]))[aria-current]::after { transform: scaleX(1); } .m-lift { transition: transform 0.35s var(--m-ease), box-shadow 0.35s var(--m-ease); } .m-lift:hover { transform: translate3d(0, -4px, 0); box-shadow: 0 18px 40px -18px rgb(0 0 0 / 0.35); } .m-zoom { overflow: hidden; } .m-zoom img { transition: transform 1.4s var(--m-ease); } .m-zoom:hover img { transform: scale(1.045); } @media (prefers-reduced-motion: reduce) { .m-ready [data-reveal] { opacity: 1; transform: none; filter: none; clip-path: none; transition: none; } .m-ready [data-reveal^="clip"] :where(img, video), .m-ready [data-lines] .m-w > span { transform: none; transition: none; } .m-ready [data-fill] .m-f > span { opacity: 1; } [data-parallax] { transform: none !important; will-change: auto; } :where([data-header] nav a[href^="#"], header nav a[href^="#"], [data-spy] a[href^="#"])::after { transition: none; } .m-lift, .m-lift:hover, .m-zoom img, .m-zoom:hover img { transition: none; transform: none; } }