/* ========================================================================== motion.css — "Editorial Restraint" motion layer for drbikramdentist.com Load order: css/index.css → css/site.css → css/motion.css (in ) Paired with js/motion.js (deferred, after js/main.js). Contract -------- * Every animating rule is prefixed html.m-motion. js/motion.js adds that class only when IntersectionObserver + requestAnimationFrame exist and prefers-reduced-motion is NOT set. With JS off, or motion reduced, this file contributes nothing but layout tokens and a focus ring. * EVERY rule that can hold content back — the [data-reveal] hold (§5), the cream veil over the patient photographs (§7), the image/video settle (§8) and the step numerals (§11) — also requires html.m-gated, which motion.js schedules for removal at 8s before doing anything else and strips in its catch block. Fail open, always. The rest (the hero lines, the gold strapline, the word stagger) is released by a class that motion.js adds on its own fallback timers instead. * Transform / opacity only. No width, height, top, left, margin, filter or clip-path animation anywhere — the FAQ panels fade rather than grow, and the step bars use scaleX rather than width. ========================================================================== */ /* --- 1. Tokens, header offset ------------------------------------------- */ :root { --m-ease: cubic-bezier(.16, 1, .3, 1); --m-micro: .4s; --m-reveal: .7s; --m-type: .9s; --m-image: 1.2s; --m-header-h: 96px; /* js/motion.js overwrites with the measured value */ } /* Layout, not motion: hash + keyboard landings clear the fixed header. Applies under reduced motion and with JS disabled. */ html { scroll-padding-top: calc(var(--m-header-h) + 12px); } /* --- 1d. Room for the sticky mobile bar --------------------------------- #mobile-cta is position:fixed (css/site.css) and sits in the DOM as a sibling of