/* THE SCENE (components/growlmaster-v2/Scene.astro): three layers in one frame, drifting together left and right the
   lobby picture's old way (lobbyPan.css .gm-pan-all; Maayan, 2026-11-08: "the entire div needs to have the left right
   transition not only the background"). The drifting layer (__pan) is as tall as the frame and as wide as his party
   picture at that height (3:2), never narrower than the frame: a tall frame (the lobby's hero beside the tables) crops
   it left and right and that is what drifts; a 3:2 frame (/design-system) it fills exactly. In it, from the back:
   the rooms cover it, one shown (data-on), the next fading in over the slow step; his table picture covers it, its upper
   part faded to nothing (a mask); his transparent party covers it (his mock, 654.webp: the party as tall as the frame,
   the room showing above and around them). Without --fill the frame is 3:2; --fill fills the box it sits in. Square
   corners. Tokens only. HARD RULE (Maayan): the layer is never narrower than the frame (its width at least 100cqw), so the
   drift (lobbyPan.css .gm-pan-all, every stop an edge of the frame) never shows the frame's black. */
.gm2-scene { position: relative; margin: 0; overflow: hidden; background: var(--g-black); container-type: size; aspect-ratio: 3 / 2; }
.gm2-scene--fill { position: absolute; inset: 0; aspect-ratio: auto; }
.gm2-scene__pan { position: absolute; top: 0; bottom: 0; left: 50%; width: max(100cqw, 150cqh); transform: translateX(-50%); }
.gm2-scene__rooms { position: absolute; inset: 0; }
.gm2-scene__room { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity var(--g-slow) var(--g-ease); }
.gm2-scene__room[data-on] { opacity: 1; }
.gm2-scene__table { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: bottom;
  -webkit-mask-image: linear-gradient(to bottom, transparent, transparent 38%, var(--g-black) 78%); mask-image: linear-gradient(to bottom, transparent, transparent 38%, var(--g-black) 78%); }
.gm2-scene__party { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
@media (prefers-reduced-motion: reduce) { .gm2-scene__room { transition: none; } }