/* ========================================================================== KuduDoc — shared scroll-reveal motion system Elements tagged [data-animate] (or [data-animate-stagger] for child staggering) start hidden and rise in when they enter the viewport. scripts/motion.js adds .js-motion to then flips .in-view per element via IntersectionObserver. Safety: hidden states only apply under .js-motion, so with JS disabled the page renders fully visible. Under prefers-reduced-motion everything is forced visible immediately (wins over base.css's global override because these rules are more specific and equally !important-free). ========================================================================== */ .js-motion [data-animate]{ opacity: 0; transform: translateY(26px); transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out); transition-delay: var(--reveal-delay, 0ms); } .js-motion [data-animate="left"]{ transform: translateX(-30px); } .js-motion [data-animate="right"]{ transform: translateX(30px); } .js-motion [data-animate="scale"]{ transform: scale(0.95) translateY(14px); } .js-motion [data-animate="fade"]{ transform: none; } .js-motion [data-animate].in-view{ opacity: 1; transform: none; } /* ---- Staggered children — container gets [data-animate-stagger]; its direct children rise in sequence once the container enters view. ---- */ .js-motion [data-animate-stagger] > *{ opacity: 0; transform: translateY(22px); transition: opacity 640ms var(--ease-out), transform 640ms var(--ease-out); } .js-motion [data-animate-stagger].in-view > *{ opacity: 1; transform: none; } .js-motion [data-animate-stagger].in-view > *:nth-child(1){ transition-delay: 0ms; } .js-motion [data-animate-stagger].in-view > *:nth-child(2){ transition-delay: 70ms; } .js-motion [data-animate-stagger].in-view > *:nth-child(3){ transition-delay: 140ms; } .js-motion [data-animate-stagger].in-view > *:nth-child(4){ transition-delay: 210ms; } .js-motion [data-animate-stagger].in-view > *:nth-child(5){ transition-delay: 280ms; } .js-motion [data-animate-stagger].in-view > *:nth-child(6){ transition-delay: 350ms; } .js-motion [data-animate-stagger].in-view > *:nth-child(7){ transition-delay: 420ms; } .js-motion [data-animate-stagger].in-view > *:nth-child(8){ transition-delay: 490ms; } .js-motion [data-animate-stagger].in-view > *:nth-child(n+9){ transition-delay: 560ms; } /* ---- Reduced motion: everything visible, no travel, instantly. ---- */ @media (prefers-reduced-motion: reduce){ .js-motion [data-animate], .js-motion [data-animate-stagger] > *{ opacity: 1 !important; transform: none !important; transition: none !important; } } /* A horizontal entrance offset is a sideways scroll until the element reveals. Measured at 360px: .split__media sat 30px right of its own grid column, so five pages scrolled sideways on load and stopped once the animation ran — which is worse than a static overflow, because it only reproduces before you scroll. Below the tablet breakpoint everything enters vertically. */ @media (max-width: 900px){ .js-motion [data-animate="left"], .js-motion [data-animate="right"]{ transform: translateY(26px); } }