/* ==========================================================================
Scroll-driven rotating-structure background (BORF2 + APOBEC3B, PDB 7RW6)
Shared across pages. To add the effect to any page:
(in )
(before )
parallax.js injects the #bg-canvas / #bg-tint layers itself, so pages need
no extra markup.
Progressive enhancement: these rules only take effect once parallax.js has
confirmed it is running and added `.parallax-active` to . If JS is
disabled or errors out, the page keeps main.css's proven static background
(images/bg.png) instead of a blank canvas.
========================================================================== */
/* Once JS is live, the rotating canvas IS the background, so turn off the
body's own fixed background image (main.css uses background-attachment:fixed,
which is buggy in Safari and an unnecessary extra layer here). */
html.parallax-active body {
background-image: none;
background-color: #ffffff;
}
/* overscroll-behavior: stop Safari's elastic overscroll from bouncing past the
content and revealing empty space below the footer.
overflow-x: clip: clip any horizontal overflow the full-bleed fixed layers
might introduce on mobile (guards the "horizontal shift" the old version had).
clip creates no scroll container and leaves overflow-y visible, so vertical
scrolling is untouched. Both html and body are targeted: a fixed layer
overflows at the documentElement level and, via root-overflow propagation,
the body rule is the one that actually clips it in most engines. */
html.parallax-active,
html.parallax-active body {
overscroll-behavior: none;
overflow-x: clip;
}
/* Contain the landing animation's phantom scroll height. main.css swings #main
in 3D on load (transform: rotateX(15deg) → 0 under #wrapper's perspective).
The projected box of that 3D tilt gets folded into the page's scrollable
height, and both iOS Safari AND desktop Chrome *cache* the inflated value —
adding ~a screen of empty scroll below the footer and making the rotation
finish below the real bottom (a device rotation / reflow "fixed" it because
it recomputed without the animation running). Clipping the perspective
container's overflow stops the projection from ever expanding the scroll
area. overflow-y:clip keeps the page's own vertical scroll intact (the page
scrolls on , not #wrapper) and doesn't create a scroll container. */
html.parallax-active #wrapper {
overflow-y: clip;
}
/* Full-viewport fixed layers behind the page content. width/height:100% sizes
them to the initial containing block — the *stable* large viewport — so the
mobile address bar collapsing/expanding never resizes them. (A