/* ============================================================ motion.css — pre-animation states only. Every rule here is scoped to `.has-motion`, which JS adds to before first paint. If JS is disabled, fails, or the user prefers reduced motion, the class is absent (or removed) and the page renders fully visible with no work required. ============================================================ */ /* ── generic reveals ──────────────────────────────────────── */ .has-motion [data-reveal], .has-motion [data-reveal-group] > * { opacity: 0; transform: translateY(1.1rem); will-change: opacity, transform; } /* ── split text ───────────────────────────────────────────── */ .split-line { display: block; overflow: hidden; /* room for descenders and italic overhang inside the mask */ padding-bottom: 0.14em; margin-bottom: -0.14em; padding-right: 0.08em; margin-right: -0.08em; } .split-line__inner { display: block; will-change: transform, opacity; } .has-motion .split-line__inner { transform: translateY(105%); opacity: 0; } /* keeps a split word from breaking apart across lines */ .split-word { display: inline-block; white-space: nowrap; } .split-char { display: inline-block; white-space: pre; will-change: transform, opacity, filter; } .has-motion .split-char { opacity: 0; transform: translateY(0.42em); filter: blur(6px); } /* ── timeline ─────────────────────────────────────────────── */ .has-motion .milestone__card { opacity: 0; will-change: opacity, transform; } .has-motion .milestone[data-side='left'] .milestone__card { transform: translateX(-2.75rem); } .has-motion .milestone[data-side='right'] .milestone__card { transform: translateX(2.75rem); } @media (max-width: 50rem) { .has-motion .milestone[data-side='left'] .milestone__card, .has-motion .milestone[data-side='right'] .milestone__card { transform: translateX(-1.75rem); } } .has-motion .milestone__node { opacity: 0; will-change: opacity, transform; } /* ── hero furniture ───────────────────────────────────────── */ .has-motion .portrait__frame { clip-path: inset(0 0 100% 0); will-change: clip-path; } .has-motion .scroll-cue { opacity: 0; } /* ── the scale draws itself in ────────────────────────────── */ .has-motion .scale__axis, .has-motion .scale__ticks { transform: scaleY(0); transform-origin: top; } .has-motion .scale__mark, .has-motion .scale__indicator { opacity: 0; } /* ── belt and braces ──────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }