/* ========================================================================== 9WEB STARTER THEME — ANIMATIONS Reveal-on-scroll engine driven by data-9w-* attributes (see assets/js/animations.js for the IntersectionObserver logic). Progressive enhancement: elements only start hidden once 'html.has-9w-js' is present. That class is added synchronously in , before first paint (see nineweb_print_js_marker() in inc/enqueue.php) — deliberately NOT by animations.js itself, which is deferred and only runs after the page has already painted once. If it ran there instead, above-the-fold content would flash visible -> hidden the instant the class attached. A fail-safe timeout alongside that inline script removes the class again if animations.js never finishes loading, so a network failure can never leave content invisible forever — the site must never depend on JS for content to be readable. ========================================================================== */ html.has-9w-js [data-9w-animation] { opacity: 0; transition-property: opacity, transform, clip-path; transition-duration: var(--9w-anim-duration, 700ms); transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1); transition-delay: var(--9w-anim-delay, 0ms); } html.has-9w-js [data-9w-animation="fade-up"] { transform: translateY(28px); } html.has-9w-js [data-9w-animation="fade-down"] { transform: translateY(-28px); } html.has-9w-js [data-9w-animation="fade-left"] { transform: translateX(28px); } html.has-9w-js [data-9w-animation="fade-right"] { transform: translateX(-28px); } html.has-9w-js [data-9w-animation="scale-in"] { transform: scale(0.94); } html.has-9w-js [data-9w-animation="clip-reveal"] { opacity: 1; clip-path: inset(0 0 100% 0); } html.has-9w-js [data-9w-animation].is-9w-visible { opacity: 1; transform: none; clip-path: inset(0 0 0% 0); } /* Respect the user's OS-level motion preference — overrides everything above regardless of JS state. (Base rule already exists in reset.css for animation-duration/transition-duration globally; this covers the opacity/transform/clip-path STARTING states specifically, since those are set via attribute selectors, not blanket duration overrides.) */ @media (prefers-reduced-motion: reduce) { html.has-9w-js [data-9w-animation] { opacity: 1 !important; transform: none !important; clip-path: none !important; } }