/* ────────────────────────────────────────────────────────────────── Scroll-reveal animations — subtle fade + slide-up Targets: stable card/panel wrappers on Home and Ward. Respects prefers-reduced-motion (a11y requirement). ────────────────────────────────────────────────────────────────── */ .reveal-on-scroll { opacity: 0; transform: translateY(18px); transition: opacity 600ms cubic-bezier(0.22, 0.61, 0.36, 1), transform 600ms cubic-bezier(0.22, 0.61, 0.36, 1); will-change: opacity, transform; } .reveal-on-scroll.is-visible { opacity: 1; transform: translateY(0); } /* Once the reveal is done, drop will-change so the GPU layer is released. */ .reveal-on-scroll.is-revealed { will-change: auto; } /* Accessibility: users who've requested reduced motion get no animation — elements appear immediately in their final state. */ @media (prefers-reduced-motion: reduce) { .reveal-on-scroll { opacity: 1; transform: none; transition: none; will-change: auto; } } /* Safety net: if JS fails to load, never leave the user staring at invisible content. The .no-reveal-fallback class is added to by the reveal script on init; absence of the class means JS hasn't run, so we show everything. */ html:not(.scroll-reveal-ready) .reveal-on-scroll { opacity: 1; transform: none; transition: none; }