/* ═══════════════════════════════════════════════════════════════════════════
   WORK: the section around the ring of balls (styles/wall.css).
   ═════════════════════════════════════════════════════════════════════════ */

.work-index {
  position: relative;
  padding: clamp(80px, 9vw, 140px) 0 clamp(48px, 6vh, 88px);
  color: var(--bone);
  /* The page's one ground (styles/editorial.css): it started on a lighter
     navy, which drew a band across the window. It is the first section
     after the open journey above it, so its top is feathered out of the fog
     over the same depth as its own top padding, and the ground arrives like
     air thickening rather than a slab with a ruled edge. */
  background: linear-gradient(180deg, transparent, var(--ink) clamp(80px, 9vw, 140px));
}
.work-index > * {
  max-width: calc(var(--content) + 2 * var(--pad-section));
  margin-inline: auto;
}
.work-index .section-index { color: var(--signal-hot); }
.work-pin > .wall { padding-inline: var(--pad-section); }

/* ── the handoff: WORK built in the frame, not scrolled into it ──────────
   Where the process section holds one more pinned screen after BUILD
   (styles/process.css, and scripts/process/journey.js's HANDOFF_FRAME, the
   same condition), WORK is pinned under it instead of following it:

   · the section starts two screens up, inside the process box, so its top
     reaches the top of the window the frame the journey ends;
   · `.work-pin`, everything it shows, sticks there for the height of
     `.work-run`, one screen: that screen of scroll is the handoff, and
     nothing on the page moves through it. It lets go the frame the
     process stage does, and the two leave together, the stage already
     gone;
   · the section's ground is a layer under the pin that closes only at the
     end of the handoff (`--w-ground`), so the water, and its points in the
     air building the ring (the wave's own, scripts/wave/surface.js), are
     seen through it until then;
   · a link to #work lands at the end of the handoff, with WORK whole, not
     at its start with nothing there (`scroll-margin-top`, which also takes
     back the header's `scroll-padding-top`: the pin's own padding already
     clears the header, as it does the frame the handoff ends).

   `overflow: clip` rather than the section's `hidden`: a box that clips by
   scrolling is the scroller its sticky child sticks to, and it never
   scrolls, so the pin would never hold. The four numbers WORK arrives on
   (`--w-*`) are written on the section by scripts/studio/arrive.js. On a
   screen only: a printed page is the section as it always was. */
.work-run { display: none; }

@media screen and (scripting: enabled) and (min-width: 901px) and (min-height: 640px) and (min-aspect-ratio: 1/1) and (prefers-reduced-motion: no-preference) and (forced-colors: none) {
  .work-index {
    margin-top: -200svh;
    padding: 0;
    overflow: clip;
    background: none;
    scroll-margin-top: calc(-100svh - var(--header-h));
  }
  .work-index::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--ink);
    opacity: var(--w-ground, 1);
    pointer-events: none;
  }
  .work-pin {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: clamp(80px, 9vw, 140px) 0 clamp(48px, 6vh, 88px);
  }
  .work-run { display: block; height: 100svh; }

  /* What the points become. The copy's own lines rather than its block,
     which is a `.reveal` and has its own opacity to keep. */
  .work-pin .section-intro > * {
    opacity: var(--w-copy, 1);
    transform: translateY(calc((1 - var(--w-copy, 1)) * 18px));
  }
  .work-pin .ball__dots,
  .work-pin .ball__name { opacity: var(--w-balls, 1); }
  .work-pin .wall::after { opacity: calc(0.6 * var(--w-balls, 1)); }
  .work-pin .wall__omry,
  .work-pin .wall__back { opacity: var(--w-omry, 1); }
}