/* ============================================================================ Hearn Consulting — Motion layer (scroll reveal + shared keyframes) Pair with site-motion.js. Depends on tokens from hearn-brand.css. Everything degrades to fully-visible with no motion when JS is off or the user prefers reduced motion. ========================================================================== */ /* Reveal-on-scroll. Pre-state only applies once JS has added `.js` to , so no-JS visitors always see content. */ .js [data-reveal]{ opacity:0; transform:translateY(26px); transition:opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); transition-delay:var(--reveal-delay, 0s); will-change:opacity, transform; } .js [data-reveal="fade"] { transform:none; } .js [data-reveal="left"] { transform:translateX(-28px); } .js [data-reveal="right"] { transform:translateX(28px); } .js [data-reveal="scale"] { transform:scale(0.96); } [data-reveal].is-visible { opacity:1; transform:none; } @media (prefers-reduced-motion: reduce){ .js [data-reveal]{ opacity:1 !important; transform:none !important; transition:none; } } /* Legacy fade-up (existing pages) — same behavior, kept so nothing regresses */ .js .fade-up:not(.visible){ opacity:0; transform:translateY(40px); } .fade-up{ transition:opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); } .fade-up.visible{ opacity:1; transform:none; } @media (prefers-reduced-motion: reduce){ .js .fade-up:not(.visible){ opacity:1; transform:none; } }