/* ========================================================================= Scroll reveals Usage — add to any Elementor container/widget via Advanced → CSS Classes, or to any element in a theme template: rw-reveal fade up (default) rw-reveal--left slide in from the left rw-reveal--right slide in from the right rw-reveal--zoom settle in from slightly small rw-reveal--stagger also delay each direct child in turn The hidden state is gated behind .rw-reveal-ready, a class that reveal.js adds to only once it has decided to run. Without JavaScript — or with prefers-reduced-motion set — that class never appears, so none of these rules apply and the content is simply visible. Content is never trapped behind a script. ========================================================================= */ .rw-reveal-ready .rw-reveal { opacity: 0; transform: translateY(22px); /* Composited properties only, so a reveal never triggers layout. */ transition: opacity 620ms cubic-bezier(0.22, 0.68, 0.24, 1), transform 620ms cubic-bezier(0.22, 0.68, 0.24, 1); will-change: opacity, transform; } .rw-reveal-ready .rw-reveal--left { transform: translateX(-30px); } .rw-reveal-ready .rw-reveal--right { transform: translateX(30px); } .rw-reveal-ready .rw-reveal--zoom { transform: scale(0.965); } /* Children of a stagger container are hidden individually; the parent itself stays put so the grid keeps its own layout while they arrive. */ .rw-reveal-ready .rw-reveal--stagger { opacity: 1; transform: none; } .rw-reveal-ready .rw-reveal--stagger > * { opacity: 0; transform: translateY(22px); transition: opacity 560ms cubic-bezier(0.22, 0.68, 0.24, 1), transform 560ms cubic-bezier(0.22, 0.68, 0.24, 1); } .rw-reveal-ready .rw-reveal.is-revealed, .rw-reveal-ready .rw-reveal.is-revealed > * { opacity: 1; transform: none; } /* Already on screen when the page loaded: appear, but do not animate. */ .rw-reveal-ready .rw-reveal.is-instant, .rw-reveal-ready .rw-reveal.is-instant > * { transition: none; transition-delay: 0ms !important; } /* Once the motion is done, stop hinting the compositor. */ .rw-reveal-ready .rw-reveal.is-revealed { will-change: auto; } /* Belt and braces. reveal.js already bails on reduced motion and never adds the gate class, but if anything ever adds it another way, this wins. */ @media (prefers-reduced-motion: reduce) { .rw-reveal-ready .rw-reveal, .rw-reveal-ready .rw-reveal > *, .rw-reveal-ready .rw-reveal--stagger > * { opacity: 1 !important; transform: none !important; transition: none !important; } }