/* The creator page (creators.html): the pinned stage and the seven
   sections that scroll over it. base.css supplies the fonts, tokens, nav,
   pills, RER display lines and the stage's error panel; sections.css the
   display and body type and the footer; ./stages.css each stage's copy and
   the callouts. Every rule hangs on the page's own root, div.creators
   round the nav, the story and the footer, never on <body> or <html>: a
   host that places the page inside its own body (tools/artifact/) keeps
   the page's elements, not the attributes of those two.

   The stage sticks for the whole story. Each section is a stage of it,
   taller than the viewport; its copy block sticks while the section passes,
   so it holds over its stage's pose and then scrolls away with its section.
   A copy block shows only while it is stuck (./copy.js fades it in once it
   has landed and out before it moves on), so one stage's copy is on screen
   at a time and none crosses the subject. Wide (901px and up, and any
   landscape screen): the copy block fills the viewport and sits beside the
   subject. Narrow (a portrait screen up to 900px wide): the subject is
   framed in the top of the stage and the copy block sticks to the bottom
   of the viewport. The camera frames the subject in the space each
   stage's copy leaves (./framing.js), and lights the floor only round it,
   so the copy stands on clean black: nothing lies under it, not even a
   scrim.

   Type on the wide layout shrinks with a short viewport (a landscape
   phone), so every stage's copy fits the viewport whole: each size is the
   homepage's, held under a share of the viewport's height. */

.creators {
  --section: 220svh;
  --section-brief: 205svh; /* a stage whose copy is short holds less long */
  --copy-width: min(50vw, 800px);
  --display-cap: clamp(20px, min(max(28px, 3.3vw), 6svh), 64px);
  --body-size: clamp(13px, min(max(17px, 1.3vw), 3.2svh), 21px);
  --copy-gap: clamp(8px, min(1.8vw, 2.8svh), 28px);
}

.creators .nav { position: absolute; }

.creators .story { position: relative; }

.creators .stage {
  position: sticky;
  top: 0;
  z-index: 0;
  height: 100svh;
  overflow: hidden;
}
.creators .stage-canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  visibility: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 72px), transparent);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 72px), transparent);
}
/* Shown once its first frame is drawn (the hero's entrance brings the
   subject in). */
.stage-ready .creators .stage-canvas { visibility: visible; }
.creators .stage-copy {
  position: relative;
  z-index: 1;
  height: var(--section);
  pointer-events: none;
}
/* The first section lies over the stage from the top of the page. */
.creators .stage-copy.hero { margin-top: -100svh; height: 130svh; }
.creators .stage-copy:is(.old-way, .split) { height: var(--section-brief); }
/* The moves between stages are a viewport of scroll, save those that
   change the stage the most (on from the split, the hassle stage and the
   control stage), which take longer, so the stage changes at an even
   rate down the page (./timeline.js: the move runs between two windows). */
.creators .stage-copy:is(.hassle, .control) { margin-top: 40svh; }
.creators .stage-copy.publish { margin-top: 50svh; }

.creators .copy-block {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100svh;
  padding: 0 var(--gutter);
}
/* Each line of copy hugs its text (the widest of its lines), so the stage
   can frame the subject in all the room the copy leaves (./framing.js). */
.creators .copy-block > * { width: fit-content; max-width: var(--copy-width); pointer-events: auto; }
.creators .copy-block :is(h1, h2, p), .creators .eligibility li { width: fit-content; }
/* A copy faded out takes no pointer; one holding the keyboard's focus is
   shown wherever it is. */
.creators .copy-block.is-away > * { pointer-events: none; }
.creators .copy-block:focus-within :is(h1, h2, .role, p, .actions, ul, .text-link) { opacity: 1 !important; }
.creators .copy-block.is-away:focus-within > * { pointer-events: auto; }

.creators .display { color: var(--paper); }
.creators .copy-block .body { max-width: 32em; margin-top: var(--copy-gap); font-weight: 300; line-height: 1.45; color: var(--text); }
.creators .mono {
  margin: 0;
  font: 400 clamp(11px, min(max(12px, 0.9vw), 3svh), 14px)/1.5 var(--mono);
  color: var(--text-soft);
}

.creators .footer { margin-top: 0; }

/* Narrow: the subject in the top of the stage, the copy below it. */
@media (max-width: 900px) and (max-aspect-ratio: 1/1) {
  .creators { --section: 200svh; --section-brief: 200svh; --copy-width: auto; --display-cap: 4.3vw; --body-size: 16px; }
  .creators .nav { position: absolute; }
  .creators .stage-copy { display: flex; flex-direction: column; justify-content: flex-end; }
  /* The hassle stage's copy, the page's longest, is shown a page at a
     time (./stages.css, ./copy.js): its section holds long enough for
     each page to be read in turn. */
  .creators .stage-copy.hassle { height: 350svh; }
  /* A block at most the viewport tall: one taller (the close's, on the
     smallest phones) rolls through it while it is stuck (./copy.js), its
     lines fading in at the foot and out under the top edge. */
  .creators .copy-block {
    top: auto;
    bottom: 0;
    height: auto;
    max-height: 100svh;
    overflow: hidden;
    justify-content: flex-start;
    padding: 64px var(--gutter) 28px;
  }
  .creators .copy-block > :first-child { margin-top: auto; }
  .creators .copy-block.is-rolling {
    --edges: linear-gradient(to bottom, transparent 8px, #000 56px, #000 calc(100% - 40px), transparent calc(100% - 8px));
    -webkit-mask-image: var(--edges);
    mask-image: var(--edges);
  }
  .creators .copy-block .body { margin-top: 14px; }
  /* The copy fills the foot of the stage, so a failure notice
     (src/errors.js) sits at its head, under the nav and above the
     subject's still. */
  .creators .stage-error { top: 88px; bottom: auto; }
}
@media (max-width: 480px) and (max-aspect-ratio: 1/1) {
  .creators { --display-cap: 7vw; }
}