/* The stage (js/stage), fixed behind everything: a still of the room (the poster), the 3D room's
   canvas over it once that's ready, and the navy veil over both. The still is sized the way the
   stage's camera frames the room (a fixed width across the screen, cropped top and bottom), so
   the dissolve from one to the other doesn't move. */
.stage-poster, .stage-canvas, .stage-veil { position: fixed; inset: 0; z-index: -1; pointer-events: none; }
.stage-poster img { width: 100%; height: 100%; object-fit: cover; display: block; }
.stage-poster[hidden] { display: none; }
.stage-canvas { width: 100%; height: 100%; display: block; transition: none; }
.stage-canvas[hidden], .stage-veil[hidden] { display: none; }
.stage-veil { background: var(--bg); opacity: 0.9; transition: opacity 900ms ease; }

/* How a project goes, with the stage (page.js adds .has-stage and --slots): every step is the
   same height, one scroll beat per slot, and its number and text hold still while the room
   changes behind them. */
.process.has-stage .timeline li { min-height: calc(var(--slots, 3) * var(--beat, 7rem)); align-items: start; }
.process.has-stage .timeline li > * { position: sticky; top: 34vh; }