/*! * ko-motion.css — the safety net for ko-motion.js. * * The load-bearing idea: nothing is hidden until JS proves it is alive. Every * hide rule is scoped to .ko-js, which ko-motion.js sets on as its first * act. If the script 404s, is blocked, or throws, the page renders fully visible * instead of blank. That failure mode has shipped on real sites; this prevents it. */ /* Tier 2 fallback: CSS transitions driven by the IntersectionObserver path. */ .ko-js [data-ko-reveal], .ko-js [data-ko-stagger] > * { opacity: 0; transform: translateY(26px); transition: opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1); will-change: opacity, transform; } .ko-js [data-ko-reveal="left"] { transform: translateX(32px); } .ko-js [data-ko-reveal="right"] { transform: translateX(-32px); } .ko-js [data-ko-reveal="down"] { transform: translateY(-26px); } .ko-js [data-ko-reveal="none"] { transform: none; } .ko-js [data-ko-reveal].is-in, .ko-js [data-ko-stagger] > .is-in { opacity: 1; transform: none; } /* Once the animation has played, drop the hint so it stops costing memory. */ .ko-js .is-in { will-change: auto; } /* When the motion library is present it owns these elements, so the CSS fallback must stand down COMPLETELY — including the opacity:0. This is load-bearing, not tidiness: the library's from() tween reads an element's *current computed* value as the animation's END state. With the fallback's opacity:0 still applied, every reveal animated 0 -> 0 and the content never appeared. Resetting here means the computed end state is visible, which is what from() must see. */ .ko-js.ko-gsap [data-ko-reveal], .ko-js.ko-gsap [data-ko-stagger] > * { opacity: 1; transform: none; transition: none; } /* Split text: words ride inside a clipping line box. */ .ko-line { overflow: hidden; } .ko-word { display: inline-block; } /* Reduced motion wins over everything, including the JS paths. */ .ko-reduced [data-ko-reveal], .ko-reduced [data-ko-stagger] > *, .ko-reduced .ko-word, .ko-reduced .ko-line { opacity: 1 !important; transform: none !important; transition: none !important; animation: none !important; } @media (prefers-reduced-motion: reduce) { [data-ko-reveal], [data-ko-stagger] > *, .ko-word, .ko-line { opacity: 1 !important; transform: none !important; transition: none !important; animation: none !important; } [data-ko-parallax] { transform: none !important; } } /* Parallax containers clip, so a translated child can never widen the page. Horizontal overflow on mobile is a hard no. */ [data-ko-parallax] { will-change: transform; } .ko-parallax-frame { overflow: hidden; } /* Print: everything visible, nothing transformed. */ @media print { [data-ko-reveal], [data-ko-stagger] > * { opacity: 1 !important; transform: none !important; } }