/* acts A and C: stages, frames, media layers, scrims, grain, sticky staging under .motion.
   Rule: no overflow hidden/auto on any ancestor of .stage (it would switch sticky off). */
.stage { position: relative; background: var(--night); }
.frame { position: relative; display: block; min-height: 100svh; min-height: 100vh; min-height: 100svh; }
.frame-media { position: absolute; inset: 0; z-index: 0; overflow: clip; }
.frame-media picture, .frame-media img { width: 100%; height: 100%; }
.frame-media img { object-fit: cover; }
.frame-copy { position: relative; z-index: 3; }
.light-slot { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.light-slot canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

.scrim { position: absolute; inset: 0; pointer-events: none; }
.glow { position: absolute; inset: 0; pointer-events: none; z-index: 1; }

/* film grain: above the light canvas, below the type; stops banding in the shadows */
.stage::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: url(../img/tex/grain-256.webp) 0 0 / 256px 256px; opacity: 0.07; mix-blend-mode: overlay;
}

/* sticky staging, added only when JS is up and motion is allowed */
.motion .act { position: relative; height: 200svh; height: 200vh; height: 200svh; }
.motion .stage[data-stage] { position: sticky; top: 0; height: 100svh; height: 100vh; height: 100svh; }
.motion .stage[data-stage] .frame { position: absolute; inset: 0; min-height: 0; }
.motion .frame-obs .frame-media, .motion .frame-obs .frame-copy, .motion .frame-meeting .frame-media, .motion .frame-meeting .frame-copy { opacity: 0; }
/* the frames underneath must not catch taps: only the top frame's controls are live */
.motion .stage[data-stage] .frame-obs, .motion .stage[data-stage] .frame-meeting { pointer-events: none; }
@media (min-width: 768px) { .motion .act { height: 220vh; } }
@media (max-width: 767px) {
  .motion .act-a { height: 135svh; }
  .act-c .frame { min-height: 65svh; }
  .frame-obs { min-height: 55svh; } /* static layouts only; the pinned stage sets its own height */
}
/* phone: act C runs as two stacked frames, no pin */
@media (max-width: 767px) {
  .motion .act-c { height: auto; }
  .motion .act-c .stage[data-stage] { position: relative; height: auto; }
  .motion .act-c .stage[data-stage] .frame { position: relative; min-height: 65svh; }
  .motion .frame-meeting .frame-media, .motion .frame-meeting .frame-copy { opacity: 1; }
}
/* light only: no picture, just the lamp canvas (or its CSS glow) on night. Remove the class to bring an image back. */
.lightonly { background: var(--night); }
.lightonly img { display: none; }
.seat-stage::after { display: none; }
.motion .seat-stage::after { display: block; }