/* Motion that script participates in. Everything here is inert until main.js adds .js to , so a blocked script leaves the finished state on screen rather than a half-played animation. See AGENTS.md, "JavaScript". Scroll-linked motion that needs no script stays in motion.css. This file is only for what CSS genuinely cannot reach on its own. */ /* The one orchestrated entrance per page. Not a fade-and-slide on every section -- that is the generic default and reads as generated. */ .js [data-rise] { opacity: 0; transform: translate3d(0, 1.25rem, 0); transition: opacity var(--motion-slow, 520ms) var(--ease, cubic-bezier(0.2, 0.7, 0.3, 1)), transform var(--motion-slow, 520ms) var(--ease, cubic-bezier(0.2, 0.7, 0.3, 1)); } .js [data-rise].is-risen { opacity: 1; transform: none; } /* Children of a risen group follow it in sequence. Capped at six: past that the last item arrives long after the reader has started reading the first. */ .js [data-rise-group] > * { opacity: 0; transform: translate3d(0, 0.75rem, 0); transition: opacity var(--motion-base, 220ms) var(--ease, cubic-bezier(0.2, 0.7, 0.3, 1)), transform var(--motion-base, 220ms) var(--ease, cubic-bezier(0.2, 0.7, 0.3, 1)); } .js [data-rise-group].is-risen > * { opacity: 1; transform: none; } .js [data-rise-group].is-risen > *:nth-child(1) { transition-delay: 0ms; } .js [data-rise-group].is-risen > *:nth-child(2) { transition-delay: 70ms; } .js [data-rise-group].is-risen > *:nth-child(3) { transition-delay: 140ms; } .js [data-rise-group].is-risen > *:nth-child(4) { transition-delay: 210ms; } .js [data-rise-group].is-risen > *:nth-child(5) { transition-delay: 280ms; } .js [data-rise-group].is-risen > *:nth-child(n + 6) { transition-delay: 350ms; } /* main.js returns before adding .js when reduced motion is set, so these rules never apply. This is the belt-and-braces for a preference that changes after load, when the class is already on the element. */ @media (prefers-reduced-motion: reduce) { .js [data-rise], .js [data-rise].is-risen, .js [data-rise-group] > *, .js [data-rise-group].is-risen > * { opacity: 1; transform: none; transition: none; } }