/* ========================================================= boot.css — the loading screen ("the dark room"). index.html only. `body.is-booting` is armed IN THE MARKUP (index.html: ), not by boot.js, so the page is already dark on the first paint and the site cannot flash before the script runs. boot.js REMOVES the class to reveal. Everything here is under `html.js`, a class the inline script in index.html's head sets before parses. With JS off there is no `html.js`, none of this applies, and the page renders normally — the fail-open property this sheet has always had. The element boot.js creates (#boot-overlay) exists only while it runs, so it is inert on a page where boot never runs. ========================================================= The stacking is the whole trick, and it is not obvious: #bg-container (z-index 0) creates a stacking context, so #eyes-canvas (z-index 1, inside it) can never outrank the nav at z-index 4. A child's z-index is confined to its parent's. So the CONTAINER moves, not the canvas. (#stamp-wrap, at 150, is the highest root-context z-index below the overlay.) ========================================================= */ #boot-overlay { position: fixed; inset: 0; z-index: 900; background: radial-gradient(circle at 50% 58%, #0b0810 0%, #040207 72%); opacity: 1; transition: opacity 600ms ease; cursor: pointer; overflow: hidden; } /* Raised above #boot-overlay (900) so the eyes stay lit while the page goes dark. It is still pointer-events:none, so the skip click falls through to the overlay. */ html.js body.is-booting #bg-container, html.js body.boot-revealing #bg-container { z-index: 950; } /* Hidden, NOT removed: imgToScreen() positions the eyes from the image's own dimensions and its object-fit:cover crop, both independent of whether the image paints. So the eyes stay exactly where the sockets are, and the photo fades up around them on reveal. */ html.js body.is-booting #bg-image, html.js body.boot-revealing #bg-image { transition: opacity 600ms ease; } html.js body.is-booting #bg-image { opacity: 0; } html.js body.is-booting #bg-overlay, html.js body.boot-revealing #bg-overlay { transition: opacity 600ms ease; } html.js body.is-booting #bg-overlay { opacity: 0; } html.js body.boot-revealing #boot-overlay { opacity: 0; } /* The rest of the page — hidden, NOT removed, and with `visibility` rather than `display:none`, for a load-bearing reason: boot.js measures img rects inside #main-content to decide when the gallery has loaded, and display:none collapses every one of them to 0x0, which makes that wait resolve instantly against nothing. visibility keeps layout, so the rects stay real and the gate still works. #logo-wrap, #stamp-wrap, #main-nav and #main-content are static; the tagline and the promo banner are appended to by main.js (main.js:131,144), so they are siblings of these, not children — which is why the wrapper div could go. Two properties, not one. `visibility` alone flips discretely, so the chrome would pop in; `opacity` alone leaves the elements hit-testable, so the nav would be live behind a black screen. Together they hide AND fade. The transition is declared OUTSIDE the is-booting gate deliberately. A transition runs from the AFTER-change style, and the class that changes the opacity is the one being removed — declared under `is-booting` it would leave with the class and never fire. 600 ms matches #boot-overlay's fade; boot.js's REVEAL_MS is 700, so the fade finishes inside the reveal and the overlay is gone by the time it ends. */ html.js #logo-wrap, html.js #stamp-wrap, html.js #main-nav, html.js #main-content, html.js #hero-tagline-fixed, html.js #flag-banner { transition: opacity 600ms ease; } html.js body.is-booting #logo-wrap, html.js body.is-booting #stamp-wrap, html.js body.is-booting #main-nav, html.js body.is-booting #main-content, html.js body.is-booting #hero-tagline-fixed, html.js body.is-booting #flag-banner { opacity: 0; visibility: hidden; } @media (prefers-reduced-motion: reduce) { #boot-overlay, html.js body.is-booting #bg-image, html.js body.is-booting #bg-overlay, html.js body.boot-revealing #bg-image, html.js body.boot-revealing #bg-overlay, html.js #logo-wrap, html.js #stamp-wrap, html.js #main-nav, html.js #main-content, html.js #hero-tagline-fixed, html.js #flag-banner { transition: none; } }