/* ============================================================
   HERO · BRIDGE  (the blend zone from the dark 3D into the white
   flat content, plus the flat container + painted background layer)
   ============================================================ */

/* fade from transparent (3D showing through) into solid white.
   z-index 7 — above #zoom and the scene copy (both 4). Full ladder in
   css/hero/overlays.css. */
#bridge{position:relative;z-index:7;height:24vh}
#bridge .fill{position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(255,255,255,0) 0%,#FFFFFF 62%,#FFFFFF 100%)}

/* flat content wrapper */
#flat{position:relative;z-index:7}

/* gradient canvas painted by js/ui/page-bg.js (sits behind the sections) */
#pagebg{position:absolute;left:0;right:0;top:0;z-index:-1;pointer-events:none}