/* Zedstar (tools/standalone/zedstar.cjs; behaviour in bodies-zedstar.js). The page's own body on a navy-black ground:
   the opening, the montage of six companies' systems, the hero's company as three people see it, ownership, then the
   shared close. Every block reads in a plain layout of its own, which is what a reader without motion (or without
   script) gets: the systems as stills one after another, each with its caption. The scenes take over only under
   html.bodies-live. The systems themselves are drawn by assets/zedstar/dash-*.js. */

[data-topic="zedstar"] { --b-bg: #060a13; }

/* the frame every system stands in, the same in the montage and for the roles: a 16:10 screen as large as the stage
   allows between the header and the caption under it (a phone's stage measured on its smallest viewport) */
.b-zs-montage, .b-zs-desk {
  --zs-head: 96px; --zs-foot: 104px;
  --zs-h: min(calc(100svh - var(--zs-head) - var(--zs-foot)), calc((100vw - 2 * var(--gutter)) / 1.6));
  --zs-w: calc(var(--zs-h) * 1.6);
  --zs-top: calc(var(--zs-head) + (100svh - var(--zs-head) - var(--zs-foot) - var(--zs-h)) / 2);
}
.b-zs-screen { position: relative; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 8px; background: #0a101c; box-shadow: 0 0 0 1px rgba(239, 238, 233, .07), 0 50px 120px -60px rgba(0, 0, 0, .9); }
html:not(.js) .b-zs-screen { display: none; }   /* without script the systems cannot be drawn: their captions stand alone */
.b-zs-cut, .b-zs-mark, .b-zs-role { margin: 0; }
.b-zs [hidden] { display: none !important; }   /* (a system the script leaves out: its module is missing or failed) */

/* ---- the opening: the premise on the left, Zedstar's answer set off to the right below it ---- */
.b-zs-open { max-width: 1480px; margin: 0 auto; padding: 24vh var(--gutter) 15vh; }
.b-zs-say { margin: 0; font: 200 clamp(44px, 5.2vw, 100px)/1.02 var(--sys-display); letter-spacing: -.02em; }
.b-zs-say > span { display: block; text-wrap: balance; }
.b-zs-say .accent { font-size: .94em; }
.b-zs-one { max-width: 15ch; }
.b-zs-two { max-width: 14ch; margin: 9vh 0 0 auto; text-align: right; }
.b-zs-note { max-width: 40ch; margin: 5vh 0 0 auto; text-align: right; font: 400 clamp(15px, 1.05vw, 17px)/1.5 var(--sys-body); letter-spacing: -.01em; color: #8e99a7; text-wrap: pretty; }

/* ---- the montage. Plainly, the systems one under another, each with its caption, and the Zedstar wordmark ---- */
.b-zs-montage { padding: 4vh var(--gutter) 12vh; }
.b-zs-reel { display: grid; gap: 12vh; max-width: 1240px; margin: 0 auto; }
.b-zs-cap { margin-top: 2.4vh; font: 200 clamp(24px, 2.2vw, 40px)/1.12 var(--sys-display); letter-spacing: -.01em; color: var(--sys-text); }
.b-zs-mark { width: min(1000px, 78vw); margin: 4vh auto 0; }
.b-zs-mark img { display: block; width: 100%; height: auto; }
/* as a scene: the stage holds while the scroll cuts from one company's system to the next, each cut sooner than the
   last, and lands on the wordmark. Every system stands in the same frame, its caption under its left edge */
.bodies-live .b-zs-montage { position: relative; height: 100vh; padding: 0; }
.bodies-live .b-zs-reel { position: absolute; inset: 0; display: block; max-width: none; margin: 0; }
.bodies-live :is(.b-zs-cut, .b-zs-mark) { position: absolute; inset: 0; }   /* (out of hand: clipped away, by the script) */
/* (placed by left, not the translate property: GSAP folds a translate into its own transform the first time it moves the
   element, and a phone's camera travel would then lose the centring) */
.bodies-live .b-zs-montage .b-zs-screen { position: absolute; left: calc(50% - var(--zs-w) / 2); top: var(--zs-top); width: var(--zs-w); will-change: transform; }
.bodies-live .b-zs-montage .b-zs-cap { position: absolute; left: calc(50% - var(--zs-w) / 2); right: var(--gutter); top: calc(var(--zs-top) + var(--zs-h) + 2.6vh); margin: 0; }
.bodies-live .b-zs-mark { display: grid; place-items: center; width: auto; margin: 0; }
.bodies-live .b-zs-mark img { width: min(1120px, 72vw); will-change: transform, opacity; }

/* ---- one company, every person ---- */
.b-zs-roles { padding: 24vh 0 10vh; }
.b-zs-roles-h { max-width: calc(16ch + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); text-align: center; }
.b-zs-desk { display: grid; gap: 10vh; max-width: calc(1240px + 2 * var(--gutter)); margin: 12vh auto 0; padding: 0 var(--gutter); }
.b-zs-who { margin-top: 2.4vh; font: 200 clamp(24px, 2.2vw, 40px)/1.12 var(--sys-display); letter-spacing: -.01em; color: var(--sys-text); }
/* as a scene: one screen, the three people named in a line under it, the one whose screen it is lit and underlined, and
   the screen reshaping for each as the scroll goes on (the names move out of their figures: bodies-zedstar.js) */
.bodies-live .b-zs-roles { padding-bottom: 0; }
.bodies-live .b-zs-desk { position: relative; display: block; height: 100vh; max-width: none; margin: 12vh 0 0; padding: 0; }
.bodies-live .b-zs-desk.is-staged .b-zs-role:not(:first-child) { display: none; }
.bodies-live .b-zs-desk .b-zs-screen { position: absolute; left: calc(50% - var(--zs-w) / 2); top: var(--zs-top); width: var(--zs-w); }
.b-zs-names { position: absolute; left: calc(50% - var(--zs-w) / 2); right: var(--gutter); top: calc(var(--zs-top) + var(--zs-h) + 2.4vh); display: flex; flex-wrap: wrap; column-gap: clamp(28px, 3.4vw, 64px); row-gap: 6px; }
.b-zs-names .b-zs-who { position: relative; margin: 0; opacity: .32; white-space: nowrap; }
.b-zs-tab { position: absolute; left: 0; top: 0; width: 100px; height: 1px; background: var(--sys-text); transform-origin: 0 50%; opacity: 0; pointer-events: none; }

/* ---- ownership: words only ---- */
.b-zs-own { padding: 26vh var(--gutter) 24vh; text-align: center; }
.b-zs-own-h { margin: 0; font-size: clamp(64px, 9.4vw, 184px); line-height: .94; letter-spacing: -.03em; }
.b-zs-own-h .accent { font-size: .9em; }
.b-zs-own-p { max-width: 27ch; margin: 8vh auto 0; }
.b-zs-own-q { max-width: 36ch; margin: 7vh auto 0; }

/* ---- the close, in the ending screen with the way on and the footer ---- */
.t-end > .b-zs-close .b-h { margin: 0; }
.t-end > .b-zs-close .b-actions { margin-top: clamp(26px, 6vh, 60px); }

@media (max-width: 760px) {
  .b-zs-montage, .b-zs-desk { --zs-head: 84px; --zs-foot: 132px; }
  .b-zs-open { padding: 16vh var(--gutter) 10vh; }
  .b-zs-say { font-size: clamp(36px, 10.4vw, 44px); line-height: 1.04; }
  .b-zs-two { margin: 6vh 0 0 8vw; text-align: left; }
  .b-zs-note { margin: 4vh 0 0 8vw; text-align: left; font-size: 15px; }
  .b-zs-reel { gap: 8vh; }
  .b-zs-cap, .b-zs-who { font-size: 24px; }
  .b-zs-roles { padding: 16vh 0 8vh; }
  .b-zs-roles-h { font-size: clamp(34px, 9.6vw, 42px); }
  .b-zs-desk { gap: 7vh; margin-top: 7vh; }
  /* on a phone the montage's screen is wider than the phone and the camera travels across it while it is in hand
     (bodies-zedstar.js); the roles' screen fits the width, its three names stacked under it */
  .bodies-live .b-zs-montage { --zs-w: 150vw; --zs-h: calc(150vw / 1.6); }
  .bodies-live .b-zs-montage .b-zs-screen { border-radius: 0; }
  .bodies-live .b-zs-montage .b-zs-cap { left: var(--gutter); }
  .bodies-live .b-zs-mark img { width: 86vw; }
  .bodies-live .b-zs-desk { --zs-w: 100vw; --zs-h: calc(100vw / 1.6); }
  .bodies-live .b-zs-desk .b-zs-screen { border-radius: 0; }
  .b-zs-names { left: var(--gutter); flex-direction: column; align-items: flex-start; row-gap: 4px; }
  .b-zs-names .b-zs-who { font-size: 22px; }
  .b-zs-own { padding: 18vh var(--gutter) 16vh; }
  .b-zs-own-h { font-size: clamp(58px, 17vw, 76px); }
  .b-zs-own-p { margin-top: 5vh; font-size: clamp(24px, 6.8vw, 28px); }
  .b-zs-own-q { margin-top: 5vh; font-size: 16px; }
  .t-end > .b-zs-close .b-h { font-size: clamp(36px, 10.4vw, 44px); }
  .t-end > .b-zs-close .b-actions { margin-top: 3.4vh; gap: 12px 26px; }
}
@media (max-width: 760px) and (max-height: 700px) {
  .t-end > .b-zs-close { padding-bottom: 2vh; }
  .t-end .t-next-card { height: 13vh; }
  .t-end .base { margin-top: 2vh; }
}