/* ================================================================ Motion system: hero load-in + scroll reveal. Cosmetic only. No layout or data impact. Everything below is gated on .motion-ready, which the inline script in partials/head.ejs adds to ONLY when the visitor has not requested reduced motion. Without that class every element below renders in its normal, fully visible state, so nothing here depends on JS running for content to be visible or readable. The site-wide kill switch at style.css (prefers-reduced-motion: reduce -> animation:none, transition:none on *) still applies on top of this as a second layer of safety. ================================================================ */ /* ---- scroll reveal, applied by motion.js to band content and grid cards as they enter the viewport ---- */ .motion-ready .reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.6s ease, transform 0.6s ease; transition-delay: calc(var(--stagger, 0) * 90ms); will-change: opacity, transform; } .motion-ready .reveal.is-visible { opacity: 1; transform: translateY(0); } @keyframes pm-fade-up { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: translateY(0); } } /* Shared stagger ladder for every hero dialect below. */ .motion-ready .hero:not(.hero-page) .hero-copy > *, .motion-ready .hero-page .container > *, .motion-ready .hero-centered .container > *, .motion-ready .hero-img .hero-inner > * { opacity: 0; animation: pm-fade-up 0.7s ease forwards; } .motion-ready .hero:not(.hero-page) .hero-copy > *:nth-child(1), .motion-ready .hero-page .container > *:nth-child(1), .motion-ready .hero-centered .container > *:nth-child(1), .motion-ready .hero-img .hero-inner > *:nth-child(1) { animation-delay: 0.05s; } .motion-ready .hero:not(.hero-page) .hero-copy > *:nth-child(2), .motion-ready .hero-page .container > *:nth-child(2), .motion-ready .hero-centered .container > *:nth-child(2), .motion-ready .hero-img .hero-inner > *:nth-child(2) { animation-delay: 0.15s; } .motion-ready .hero:not(.hero-page) .hero-copy > *:nth-child(3), .motion-ready .hero-page .container > *:nth-child(3), .motion-ready .hero-centered .container > *:nth-child(3), .motion-ready .hero-img .hero-inner > *:nth-child(3) { animation-delay: 0.25s; } .motion-ready .hero:not(.hero-page) .hero-copy > *:nth-child(4), .motion-ready .hero-page .container > *:nth-child(4), .motion-ready .hero-centered .container > *:nth-child(4), .motion-ready .hero-img .hero-inner > *:nth-child(4) { animation-delay: 0.35s; } .motion-ready .hero:not(.hero-page) .hero-copy > *:nth-child(5), .motion-ready .hero-page .container > *:nth-child(5), .motion-ready .hero-centered .container > *:nth-child(5), .motion-ready .hero-img .hero-inner > *:nth-child(5) { animation-delay: 0.45s; } /* Home page "At a glance" card rides in just behind the headline block. */ .motion-ready .hero-card { opacity: 0; animation: pm-fade-up 0.7s ease 0.3s forwards; }