/* Startup Arena Volt, a stage inside a page.
   The 1920 x 1080 stage of stage.css, placed in a page block instead of filling the
   viewport. Load it instead of stage.css: stage.css sets the document up as a projector
   (html and body at 100% height with overflow hidden, the body a centring grid), which a
   scrolling page cannot take. stage-fit.js sets --fit from the wrapper's width.

   Markup:
     <div class="stage-fit">              the wrapper: the page sizes its width
       <div class="stage">...</div>       the effect's stage, unchanged
     </div>

   The wrapper is 16 / 9 by default and shows the whole stage. A page may show a band of
   it instead: set --stage-crop-y (the band's top) and --stage-crop-h (its height), both
   unitless stage px, on the wrapper. The width always shows the full 1920, so the fit is
   always wrapper width / 1920. A band may cut ground and texture only: every painted mark,
   at every frame of the entrance, stays inside it (HANDOFF.md, "A stage inside a page").

   Not carried from stage.css: the wordmark mask (.wordmark). A page that places the
   wordmark press (.press-mark) copies that rule from stage.css. */
.stage-fit {
  position: relative; overflow: hidden;
  aspect-ratio: 1920 / var(--stage-crop-h, 1080);
  background: var(--ns-ink);
}
.stage-fit > .stage {
  position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; overflow: hidden;
  /* until stage-fit.js has measured the wrapper the stage is scaled to nothing, so the
     page never shows it at 1920px for a frame */
  transform-origin: 0 0;
  transform: translateY(calc(var(--stage-crop-y, 0) * -1px * var(--fit, 0))) scale(var(--fit, 0));
  contain: layout paint style; user-select: none;
}
.stage-fit .stage * { box-sizing: border-box; }
/* The press's squeegee and wave carry their animations in the base rule, so their clocks
   start when the elements are styled, not when the press inks: on the Arena 005 recap the
   bar ran 265ms ahead of the reveal and had crossed the band before the key showed (the
   projector demo runs about 115ms ahead). In a page they wait for is-inked, which the press
   sets in the same task as run, so the bar, the wave and the reveal share one clock. */
.stage-fit .stage:not(.is-inked) .press-squeegee,
.stage-fit .stage:not(.is-inked) .press .wband,
.stage-fit .stage:not(.is-inked) .press .wband .plate { animation: none; }
.stage.is-paused *, .stage.is-paused { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) {
  .stage *, .stage::before, .stage::after { animation: none !important; transition: none !important; }
}