/* about/pull.css: the pull section of about.html. Owned by pull.
   The hinge into Nairobi, and the page's only pinned layer. One verified
   sentence arrives with base's time based arrival (data-reveal on the text,
   so it never waits on the wheel and never rests blurred). Then the stage
   holds still while the Nairobi sheet (z-index 2) slides up over it, and
   recedes in step with that scroll: it scales back a little, rounds into a
   card and dims, like the view under an iOS sheet. Nothing else moves here.

   One number drives the recede: --a-pull-out, 0 to 1 through the hold,
   linear to scroll. A native scroll timeline writes it here; about/pull.js
   writes it where there is none. Its initial value is the resting state, so
   with no script, no timeline or reduced motion the section simply shows.

   The old strip, ghost quote mark, reused OR photo, blue second half and the
   attribution to Rod are gone on purpose (council round 1); the unsourced
   statement went in round 2 (story critic). */

@property --a-pull-out { syntax: '<number>'; inherits: true; initial-value: 0; }
@keyframes a-pull-out { from { --a-pull-out: 0; } to { --a-pull-out: 1; } }

/* ── The resting section (also reduced motion and no script) ───────────────
   The card keeps the pull's ground from before this round (#06091A, already
   on this page), the darkest navy here, so any sheet that slides over it
   reads as the raised layer. The section tucks 32px under the next one so
   the sheet's rounded corners sit over dark ground, never over white. */
.about-pull {
  background: #06091A;
  color: #fff;
  margin-bottom: -32px;
}
.a-pull-card {
  position: relative;
  display: grid;
  place-items: center;
  background: #06091A;
  padding: 8rem 5vw calc(8rem + 32px);
}
.a-pull-text {
  margin: 0;
  max-width: 24em;
  font-family: var(--display);
  font-size: clamp(1.6rem, 0.95rem + 2.45vw, 3.15rem);
  font-weight: 600;
  line-height: 1.16;
  letter-spacing: -0.02em;
  text-align: center;
  color: #fff;
}
/* Two lines of nearly equal measure: who and since when, then the place. */
.a-pull-line { display: block; text-wrap: balance; }

/* ── The pinned layer ───────────────────────────────────────────────────────
   pull.js adds .a-pull-on when the next section is the Nairobi sheet and
   tells us its height (--a-pull-nh). Two lengths, both capped by that height
   so the held stage can never sit over whatever follows the sheet:
     --a-pull-m  how far the sheet tucks under this section (76 percent of a
                 screen): when the stage takes hold the sheet already shows
                 in the bottom 28 percent, so the navy is never a full screen
     --a-pull-d  how long the stage holds (48 percent of a screen): the sheet
                 rises from 72 to 24 percent of the screen, over the sentence
   Net, the section adds 72 percent of a screen to the page. Sticky lives on
   the inner stage, so the hold ends with this section: a sticky section
   would stay stuck, at z-index 1, over the rest of the page. Nothing
   captures the wheel. */
@media screen and (prefers-reduced-motion: no-preference) and (min-height: 28em) {
  .about-pull.a-pull-on {
    --a-pull-m: min(76svh, var(--a-pull-nh, 0px));
    --a-pull-d: max(0px, var(--a-pull-m) - 28svh);
    position: relative;
    z-index: 1;
    /* what shows round the card as it recedes: black, as under an iOS sheet */
    background: #000;
    height: calc(100svh + var(--a-pull-d));
    margin-bottom: calc(-1 * var(--a-pull-m));
  }
  .a-pull-on .a-pull-stage {
    position: sticky;
    top: 0;
    height: 100svh;
  }
  /* The recede, kept to two things: back to 95 percent with its corners
     rounding (they finish in the first third, so only those frames repaint),
     and a black scrim over it (a shade, never text opacity). Smoothstep, so it
     leaves rest gently and lands gently as the hold ends. The sentence is
     centred in the part of the screen the sheet has not yet reached. */
  .a-pull-on .a-pull-card {
    --a-pull-s: calc(var(--a-pull-out) * var(--a-pull-out) * (3 - 2 * var(--a-pull-out)));
    position: absolute;
    inset: 0;
    padding: 6rem 5vw 28svh;
    scale: calc(1 - 0.05 * var(--a-pull-s));
    border-radius: calc(24px * min(1, var(--a-pull-out) * 3));
  }
  /* ::after, so it paints over the text even while the arrival holds the
     text in its own layer. */
  .a-pull-on .a-pull-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: #000;
    opacity: calc(0.45 * var(--a-pull-s));
    pointer-events: none;
  }

  @supports (animation-timeline: view()) {
    .about-pull.a-pull-on:not(.a-pull-js) {
      animation: a-pull-out linear both;
      animation-timeline: view();
      animation-range: contain 0% contain 100%;
    }
  }
}