/* =========================================================================== * LOADING OVERLAY — full-viewport black screen + spinner shown from first * paint until the page's assets AND the brickbreaker game are ready. * * Owns: the #loading-overlay element (markup in index.html, right after * ) and the html.is-loading scroll lock. js/main.js removes both * once its load gate resolves; the overlay then fades out and removes * itself. This replaces the old body{opacity:0} + fade-in as the * anti-flash mechanism — content loads and lays out BEHIND the opaque * overlay instead of inside an invisible body. * =========================================================================== */ /* Scroll lock while loading. Lenis's stop() only absorbs the wheel/touch input it intercepts — keyboard scrolling and scrollbar drags are native and need the overflow cut off at the root. Removed by js/main.js at reveal, BEFORE lenis.start(), so the limit Lenis measures is real. */ html.is-loading { overflow: hidden; } #loading-overlay { position: fixed; top: 0; left: 0; /* Viewport units, NOT inset:0 — a fixed element's containing block narrows when the classic scrollbar appears at reveal, which would re-center the spinner mid-fade. vw/vh ignore scrollbars, so the overlay keeps one constant size (and center) across the unlock; the sliver that ends up under the scrollbar is invisible (the browser paints the root scrollbar above all page content) and fixed elements never create document scrollbars. */ width: 100vw; height: 100vh; z-index: 10000; /* above everything incl. debug panels */ display: flex; align-items: center; justify-content: center; /* Matches the site body background — the reveal reads as the spinner vanishing, not a color jump. */ background: #0a0a0a; transition: opacity 0.4s ease; } #loading-overlay img { width: 56px; height: 56px; opacity: 0.85; } /* Reveal state — js/main.js adds .done, then removes the element on transitionend. pointer-events off immediately so the fading overlay never eats a click. */ #loading-overlay.done { opacity: 0; pointer-events: none; }