/* Motion layer: text reveal, blur reveal, fade, scroll scale. Hidden states apply only when scripts run (html.js) and are lifted by html.m-fail if motion.js never starts. */
:root { --m-ease: cubic-bezier(.22, 1, .36, 1); --m-dur: .7s; }

/* text reveal: each word rises 10px and fades in, 75ms apart */
html.js [data-m="words"] .w { display: inline-block; opacity: .001; transform: translateY(10px); }
html.js [data-m="words"].m-in .w { opacity: 1; transform: none; transition: opacity var(--m-dur) ease, transform var(--m-dur) var(--m-ease); transition-delay: calc(var(--i, 0) * 75ms); }

/* blur reveal: the whole block sharpens as it rises */
html.js [data-m="blur"] { opacity: .001; filter: blur(10px); transform: translateY(10px); }
html.js [data-m="blur"].m-in { opacity: 1; filter: none; transform: none; transition: opacity var(--m-dur) ease, filter var(--m-dur) ease, transform var(--m-dur) var(--m-ease); transition-delay: .35s; }

/* fade */
html.js [data-m="fade"] { opacity: 0; }
html.js [data-m="fade"].m-in { opacity: 1; transition: opacity var(--m-dur) ease; transition-delay: .2s; }

/* scroll: the element scales down as the page scrolls (--s is set by motion.js) */
[data-m-scroll="shrink"] { transform: scale(var(--s, 1)); transform-origin: center; will-change: transform; }

html.m-fail [data-m], html.m-fail [data-m] .w { opacity: 1; filter: none; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html.js [data-m], html.js [data-m] .w { opacity: 1; filter: none; transform: none; transition: none; }
  [data-m-scroll="shrink"] { transform: none; will-change: auto; }
}