/* Therapy with Lara — subtle load + scroll reveal motion. Two layers: 1. Page-load fade: the whole page eases in once (set hidden in before first paint, so there is never a flash of unstyled/visible content). 2. Scroll reveal: below-the-fold blocks fade + rise gently as they enter view (js/reveal.js adds `.reveal` only to off-screen elements, so revealing them can never flash on-screen content). Honours prefers-reduced-motion. Fails safe: if the JS never runs, a 1.2s fallback in the still fades the page in and nothing stays hidden. */ /* 1. Page-load fade */ html.reveal-on body { opacity: 0; } html.reveal-on.reveal-loaded body { opacity: 1; transition: opacity 0.7s ease; } /* 2. Scroll reveal (class added by js/reveal.js to off-screen blocks only) */ html.reveal-on .reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.9s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1); will-change: opacity, transform; } html.reveal-on .reveal.is-visible { opacity: 1; transform: none; } /* Accessibility: no motion for users who ask for none */ @media (prefers-reduced-motion: reduce) { html.reveal-on body, html.reveal-on.reveal-loaded body { opacity: 1 !important; transition: none !important; } html.reveal-on .reveal, html.reveal-on .reveal.is-visible { opacity: 1 !important; transform: none !important; transition: none !important; } }