/* ========================================================================== LELAM PRELOADER Full-screen animated LE LAM logo shown while each page loads, then fades out. The overlay is printed at wp_body_open (first element in ) so it paints before the page content — no flash of unstyled page behind it. Robustness: a CSS-only failsafe animation fades the overlay out after 8s even if JavaScript is disabled or the Lottie script fails to load, so the site is NEVER permanently hidden. When JS is healthy it removes the overlay earlier (on window load) via the .is-hidden state, which overrides the failsafe. ========================================================================== */ .lelam-preloader { position: fixed; inset: 0; /* Above the page and (briefly) the admin bar while loading. */ z-index: 2147483000; display: flex; align-items: center; justify-content: center; background: #ffffff; opacity: 1; visibility: visible; transition: opacity 0.6s ease; will-change: opacity; /* CSS-only backstop — see note above. JS cancels/overrides this. */ animation: lelam-preloader-failsafe 8s ease forwards; } .lelam-preloader__logo { /* Client feedback (2026-07-15): make the loading animation smaller. */ width: min(200px, 44vw); aspect-ratio: 1 / 1; max-height: 40vh; } .lelam-preloader__logo svg { display: block; width: 100%; height: 100%; } /* JS-driven hide. Authoritative: forces the hidden state and kills the failsafe animation so the two mechanisms can never fight (no reappearing flash). */ .lelam-preloader.is-hidden { opacity: 0 !important; visibility: hidden; pointer-events: none; animation: none !important; } /* Lock body scroll while the overlay is visible (no JS needed). */ body:has(> .lelam-preloader:not(.is-hidden)) { overflow: hidden; } @keyframes lelam-preloader-failsafe { 0%, 92% { opacity: 1; visibility: visible; } 100% { opacity: 0; visibility: hidden; } } @media (prefers-reduced-motion: reduce) { .lelam-preloader { transition: opacity 0.25s ease; } }