/* The stage and its windows (design-016; whole windows since design-032). Tokens only, from ../tokens.css.

   HOW TO USE
   <div class="stage" data-motion="stage">
     <img class="stage__bg" data-motion="backdrop" src=".." srcset=".. 1000w, .. 1672w" sizes="(min-width: 1312px) 1312px, 100vw" alt="">
     <div class="stage__shade" data-motion="shade"></div>                     optional
     <div class="demo" data-demo="s1-team" data-state="end">
       <div class="demo__cam" data-motion="cam">
         <div class="demo__ui">...the product UI at its design size...</div>
       </div>
     </div>
   </div>

   Per section you set (in the section's own CSS, on .stage, never on .demo: the stage's height reads them too):
     --demo-w, --demo-h   design size of the UI in px (desktop default 760 x 640; mobile set below)
     --demo-top           top inset in design px (default 56; sections may set it at 1024 and up; 40 at tablet; 26 on mobile)
     .stage__bg { object-position: .. }

   THREE TIERS (design-027)
     1024 and up   the UI is scaled by --k = stage width / 1312, so it spans about 60% of the stage; the scene
                   shows around it. The stage keeps its 1312 x 760 aspect ratio.
     600 to 1023   TABLET. The desktop composition (not the mobile one) at 92% of the stage width, centred, so
                   --k is about 0.9 at 834 and the app's 15.5px text is about 14px. The stage's height follows
                   the demo: (--demo-h + --demo-top, 40 here) x --k + 40px, so the scene shows as a margin
                   on all four sides, 40 px of it under the window. The 60% rule does not apply here; the scene's figures may
                   be covered. (The sections' wrapper .sec__in is the size container the height is read from.)
     under 600     MOBILE compositions: stage 350 x 460, the window inset 12 each side and 24 above and below.
   A demo is a WHOLE window: radius 12, --sh-window, fully inside the scene (56 px of scene above, 64 below at 1440 for
   a 640 tall window). Nothing dissolves; there is no blur over the window's lower edge.
   Motion animates .demo__cam and the parts, never .demo. */

.stage {
  --stage-ratio: 1312 / 760;
  --k-inset: 0px; --k-den: 1312px;
  --demo-w: 760px; --demo-h: 640px; --demo-top: 56px; /* read by the stage's height at tablet */
  position: relative; width: 100%; aspect-ratio: var(--stage-ratio);
  border-radius: var(--r-20); overflow: hidden; isolation: isolate;
  container-type: inline-size;
  background: var(--side);
}
.stage::after { /* the hairline above the image, so the plate has an edge in any scene */
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 5;
  box-shadow: inset 0 0 0 1px rgba(43, 29, 25, .08);
}
.stage__bg {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block;
  object-fit: cover; object-position: 50% 50%;
  transform: scale(1.06); /* the backdrop files are pre-blurred (design-034); the scale hides their edges. No filter here: motion only transforms a flat image */
}
.stage > picture { display: contents; }
.stage__shade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to bottom, color-mix(in srgb, var(--cream-hi) 18%, transparent), transparent 60%); }

.demo {
  --k: tan(atan2(100cqw - var(--k-inset), var(--k-den)));
  position: absolute; z-index: 2;
  left: 50%; margin-left: calc(var(--demo-w) / -2); top: calc(var(--demo-top) * var(--k));
  width: var(--demo-w); height: var(--demo-h);
  transform-origin: 50% 0; transform: scale(var(--k));
}
.demo__cam { position: absolute; inset: 0; transform-origin: 50% 50%; }

/* the window: whole, with its own shadow, sitting inside the scene */
.demo__ui {
  position: absolute; inset: 0; box-sizing: border-box; overflow: hidden;
  border-radius: var(--r-12);
  background: var(--paper);
  box-shadow: var(--sh-window);
}

/* tablet, 600 to 1023: desktop composition at 92% of the stage width; the stage is as tall as the demo needs */
@media (min-width: 600px) and (max-width: 1023px) {
  .sec__in:has(.stage) { container-type: inline-size; } /* the stage's own cqw would refer to itself, so the wrapper is the container */
  .stage {
    --demo-top: 40px;
    --k-tab: tan(atan2(.92 * 100cqw, var(--demo-w)));
    aspect-ratio: auto;
    height: calc((var(--demo-h) + var(--demo-top)) * var(--k-tab) + 40px);
  }
  .demo { --k: tan(atan2(.92 * 100cqw, var(--demo-w))); }
}

/* mobile: stage 350 x 460, radius 16, the UI inset 12 each side */
@media (max-width: 599px) {
  .stage { --stage-ratio: 350 / 460; --k-inset: 24px; --k-den: 350px; border-radius: var(--r-16); --demo-w: 350px; --demo-h: 442px; --demo-top: 26px; }
  .demo__ui { border-radius: var(--r-10); }
}