/* ═══════════════════════════════════════════════════════════════════════════
   THE NEXT: what WORK's last square was holding.

     .next          the box the reader scrolls through under WORK
     .next__stage   one screen, pinned for all of the box but its first screen
     .next__fly     the canvas the square leaves the ring on and becomes an
                    iPhone on (scripts/studio/next.js): fixed over the window
                    while it runs, so the square can come out of WORK's ring
                    and stay with the reader as WORK goes up the page
     .next__line    THE NEXT, IS YOUR VISION.: the document's own heading, set
                    on the phone's screen

   Two layouts, and the default is the plain one: the line, centred, in a
   section of its own. That is what a page without scripts gets, forced
   colours get, and print. With scripts and in colour the line stands on the
   phone's screen; the script writes where the screen is (`--phone-y`,
   `--screen-w`) and, where the square travels, how far the line has come
   (`--next-line`).
   ═════════════════════════════════════════════════════════════════════════ */

/* On the sections' own layer (`.static-section`, styles/hero.css), and after
   WORK in the document, so what it draws is over WORK and under SERVICES. */
.next {
  position: relative;
  z-index: 5;
  padding: clamp(80px, 12vh, 140px) var(--pad-section);
  background: var(--ink);
  text-align: center;
}

.next__fly { display: none; }

.next__line {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.8rem, 8vw, 7rem);
  line-height: .9;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 0 34px rgba(99, 216, 255, .3), 0 2px 24px rgba(2, 6, 11, .8);
}
.next__line > span { display: block; white-space: nowrap; }

/* ── the phone ───────────────────────────────────────────────────────────
   The stage is one screen and the line is on the phone's screen: its middle
   where the phone's is, as wide as the glass, three short lines filling it.
   It sits over the canvas, so the canvas's light is under the words. */
@media screen and (scripting: enabled) and (forced-colors: none) {
  .next { padding: 0; }
  .next__stage { position: relative; height: 100svh; }
  .next__fly {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
  }
  .next__line {
    position: absolute;
    z-index: 4;
    left: 50%;
    top: var(--phone-y, 52%);
    width: var(--screen-w, 200px);
    font-size: calc(var(--screen-w, 200px) / 3.9);
    translate: -50% -50%;
  }
}

/* ── the travel ──────────────────────────────────────────────────────────
   Where the square travels, the box is NEXT_SCREENS tall (scripts/studio/
   phone.js; tests/motion.mjs holds the two together), its stage pinned for
   all but the first screen, and the canvas fixed over the window, above
   WORK, so the square drawn on it can leave WORK's ring while WORK is still
   on screen and stay with the reader as WORK goes up. The stage is pinned
   (`sticky`), which makes it a stacking context: the canvas and the line are
   ordered inside it. The line arrives as the formations' question does. */
@media screen and (scripting: enabled) and (forced-colors: none) and (prefers-reduced-motion: no-preference) {
  .next { height: 280svh; }
  .next__stage { position: sticky; top: 0; }
  .next__fly { position: fixed; z-index: 3; }
  .next__line {
    opacity: var(--next-line, 0);
    letter-spacing: calc(.02em + (1 - var(--next-line, 0)) * .22em);
    filter: blur(calc((1 - var(--next-line, 0)) * 8px));
    transform: translate3d(0, calc((1 - var(--next-line, 0)) * 18px), 0);
  }
}

@media print {
  .next { height: auto !important; padding: 48px 0 !important; background: none !important; }
  .next__stage { position: static !important; height: auto !important; }
  .next__fly { display: none !important; }
  .next__line { position: static !important; width: auto !important; translate: none !important; opacity: 1 !important; filter: none !important; transform: none !important; color: #000 !important; text-shadow: none !important; }
}