/* * Reveal / motion system. * * Everything here is gated behind the .has-motion class, which is added to * by an inline snippet in the document head (see inc/motion.php) and * ONLY when the visitor has not asked for reduced motion. So the resting * state of the page is "fully visible": no JS, a script error, or a * reduced-motion preference all leave content readable instead of stuck at * opacity 0. */ .has-motion .reveal { opacity: 0; transform: translateY(40px); transition: opacity var(--wp--custom--duration--base) var(--wp--custom--ease--out), transform var(--wp--custom--duration--base) var(--wp--custom--ease--out); transition-delay: var(--reveal-delay, 0ms); will-change: opacity, transform; } /* Images travel via scale instead of offset, and settle more slowly. */ .has-motion .reveal--media { transform: scale(1.06); transition-duration: var(--wp--custom--duration--slow); } /* For elements that must not move at all (e.g. inside a flex row). */ .has-motion .reveal--fade { transform: none; } .has-motion .reveal.is-revealed { opacity: 1; transform: none; will-change: auto; } /* * prefers-reduced-motion is handled twice on purpose: the head snippet never * adds .has-motion, and this block neutralises any transition that a * component adds on its own. */ @media (prefers-reduced-motion: reduce) { .reveal, .reveal--media, .reveal--fade { opacity: 1 !important; transform: none !important; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }