/* bg-reveal.css — fade-then-overlay theatre for public hero pages. Paired with js/bg-reveal.js. Once-per-session reveal driven by the sessionStorage flag mc_bgreveal_seen; respects prefers-reduced-motion. States the script toggles on : bg-reveal-active — animation in progress (overlay + content hidden) bg-reveal-resting — final state (overlay 0.55, content opaque) Default (no script run yet): overlay + content render at resting opacity so users with JS disabled still get a legible page. */ .bg-reveal-overlay { position: fixed; inset: 0; background: rgba(20, 30, 38, 0.55); /* matte dark teal, brand-tinted */ pointer-events: none; z-index: 1; /* above body bg, below content */ opacity: 0.55; transition: opacity 400ms cubic-bezier(.2, .8, .2, 1); } [data-bg-reveal-content] { position: relative; /* establish stacking */ z-index: 2; /* above overlay */ opacity: 1; transition: opacity 800ms cubic-bezier(.2, .8, .2, 1) 200ms; } /* Phase 1: image-only — overlay + content hidden, image breathes. */ body.bg-reveal-active .bg-reveal-overlay { opacity: 0; } body.bg-reveal-active [data-bg-reveal-content] { opacity: 0; } /* Phase 2: resting — overlay dims, content visible. The transition on each element handles the smooth fade because the script removes bg-reveal-active and adds bg-reveal-resting in one frame. */ body.bg-reveal-resting .bg-reveal-overlay { opacity: 0.55; } body.bg-reveal-resting [data-bg-reveal-content] { opacity: 1; } /* Landing-page special case: the existing body::after gradient IS the overlay. Defer its opacity rather than adding a second film. */ body.bg-reveal-landing.bg-reveal-active::after { opacity: 0; } body.bg-reveal-landing::after { transition: opacity 400ms cubic-bezier(.2, .8, .2, 1); } /* Accessibility: skip the theatre for users who prefer reduced motion. */ @media (prefers-reduced-motion: reduce) { .bg-reveal-overlay, [data-bg-reveal-content], body.bg-reveal-landing::after { transition: none !important; } } /* ── Landing-stagger: sections below the hero fade in as they enter the viewport. Driven by js/landing-stagger.js which toggles `.landing-stagger--visible`. Starts hidden + slightly offset, ends opaque + settled. Uses a gentle 380ms ease so the feel stays calm rather than theatrical. */ .landing-stagger { opacity: 0; transform: translateY(8px); transition: opacity 380ms cubic-bezier(.2, .8, .2, 1), transform 380ms cubic-bezier(.2, .8, .2, 1); will-change: opacity, transform; } .landing-stagger--visible { opacity: 1; transform: translateY(0); } @media (prefers-reduced-motion: reduce) { .landing-stagger, .landing-stagger--visible { opacity: 1 !important; transform: none !important; transition: none !important; } }