/* ══════════════════════════════════════════════════════════════════════ PRECISION REVEAL — hero entrance motion (see /hero-motion.js) ---------------------------------------------------------------------- Every initial-hidden state below is scoped to html.nandi-motion, a class set only by the inline bootstrap when JS is running and the visitor has not requested reduced motion. With JS off, blocked or broken the hero renders fully visible and static — no FOUC, no blank hero. Roles come from data-hm="line|eyebrow|title|body|chip|cta|image". Transform / opacity / clip-path only: nothing here affects layout. ══════════════════════════════════════════════════════════════════════ */ /* Brand keyline — 2px orange rule above the eyebrow of every hero. Fixed height and always in the layout (both motion and no-motion states), so it can never shift content. */ .hm-keyline { width: 56px; height: 2px; background: var(--orange); margin: 0 0 20px; flex: 0 0 auto; } /* Retire the legacy hero keyframe fades (fadeUp) — the precision-reveal system owns hero entrance now. Unscoped on purpose: it must also hold after the motion scope is released, and with JS disabled. */ [data-hm-hero] .hero-tag, [data-hm-hero] .hero-headline, [data-hm-hero] .hero-sub, [data-hm-hero] .hero-btns, [data-hm-hero] .hero-stats-bar { animation: none !important; } /* 1 · keyline draw — first in, scaleX from the left */ html.nandi-motion [data-hm="line"] { transform: scaleX(0); transform-origin: left center; } html.nandi-motion [data-hm="line"].hm-in { transform: scaleX(1); transition: transform .35s cubic-bezier(.65,0,.35,1); } /* 2 · mono eyebrow labels — character tick-in, left to right */ html.nandi-motion [data-hm="eyebrow"] { opacity: 0; } html.nandi-motion [data-hm="eyebrow"].hm-in { opacity: 1; } html.nandi-motion [data-hm="eyebrow"] .hm-ch { opacity: 0; } html.nandi-motion [data-hm="eyebrow"] .hm-ch.hm-in { opacity: 1; transition: opacity .09s linear; } /* 3 · headline — hard horizontal wipe, no opacity fade. Negative insets on the other three sides keep descenders and letter overshoot from being clipped at the settled state. */ html.nandi-motion [data-hm="title"] { clip-path: inset(-20% 100% -20% -2%); } html.nandi-motion [data-hm="title"].hm-in { clip-path: inset(-20% -2% -20% -2%); transition: clip-path .42s cubic-bezier(.65,0,.35,1); } /* 4 · body copy — quick 8px rise */ html.nandi-motion [data-hm="body"] { opacity: 0; transform: translateY(8px); } html.nandi-motion [data-hm="body"].hm-in { opacity: 1; transform: none; transition: opacity .26s cubic-bezier(.33,0,.2,1), transform .26s cubic-bezier(.33,0,.2,1); } /* 5a · chip containers (spec grid, stats bar) — the frame arrives with its first chip rather than sitting there empty; the children carry the motion */ html.nandi-motion [data-hm="group"] { opacity: 0; } html.nandi-motion [data-hm="group"].hm-in { opacity: 1; } /* 5 & 6 · spec chips, stat blocks, meta rows, CTAs — mechanical snap with a single-frame overshoot, staggered 55ms apart */ html.nandi-motion [data-hm="chip"], html.nandi-motion [data-hm="cta"] { opacity: 0; transform: translateY(6px); } html.nandi-motion [data-hm="chip"].hm-in, html.nandi-motion [data-hm="cta"].hm-in { opacity: 1; transform: none; transition: opacity .22s cubic-bezier(.34,1.3,.64,1), transform .22s cubic-bezier(.34,1.3,.64,1); } /* 7 · hero image / visual panel — wipe against the headline direction */ html.nandi-motion [data-hm="image"] { clip-path: inset(-2% -2% -2% 100%); transform: scale(1.03); } html.nandi-motion [data-hm="image"].hm-in { clip-path: inset(-2% -2% -2% -2%); transform: none; transition: clip-path .5s cubic-bezier(.65,0,.35,1), transform .5s cubic-bezier(.65,0,.35,1); } /* Reduced motion: nothing moves, everything is simply there. The bootstrap already declines to arm the system; this covers a mid-session change. */ @media (prefers-reduced-motion: reduce) { html.nandi-motion [data-hm], html.nandi-motion [data-hm="eyebrow"] .hm-ch { opacity: 1 !important; transform: none !important; clip-path: none !important; transition: none !important; } }