/* ============================================================
   HERO EXIT · bottom-third pixel seam
   ============================================================
   Companion to js/hero-exit.js. Linked, not rebuilt on
   system.css — same standing as the aperture: a generated
   cell overlay, a scrub and a parallax transform are mechanics
   of one beat, not tokens the rest of the page could share.

   The photograph leaves by scrolling — there is no sticky pin.
   ScrollTrigger's pin injects a spacer and would then argue
   with Lenis about how tall the document is; beat 04 already
   settled this, and the comment above the GSAP tags in
   index.html forbids it here too.

   The well is inert until JS adds --armed. Reduced motion and
   no-JS keep a normal 100vh hero and a record that starts
   below it, which is the page without this beat.
   ============================================================ */

.k-hero-well--armed {
  position: relative;
  z-index: 3;
}

.k-hero-well--armed .k-hero--solo {
  overflow: hidden;
  /* 100svh, not the 100dvh system.css gives the plain hero. dvh
     tracks the phone's URL bar, so on mobile the hero's height
     changed on every scroll step the bar moved — the mask was
     redrawn at each of those heights and the plate blinked. The
     small-viewport height is the one height a scroll cannot
     move. Desktop is unaffected: there svh, dvh and vh agree. */
  height: 100svh;
  background: transparent;
  /* The punch is a CSS mask, not a clip-path. */
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  /* Stretch, deliberately: the mask is drawn once per cell flip
     in the box measured at build time, and 100% 100% absorbs any
     residual viewport wobble as a few px of scale instead of a
     new image to decode. */
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-position: 0 0;
  mask-position: 0 0;
}

/* Extra image so a few percent of translateY has somewhere to
   come from. Identity at rest — the aperture measures this
   box, and a scale at p=0 would desync the lens from the plate. */
.k-hero-well--armed .k-hero__frame {
  will-change: transform;
  transform-origin: 50% 50%;
}

.k-hero-well--armed .k-hero__foot {
  /* Written from JS as --k-exit-foot; the fade is a fact about
     progress, not a CSS animation of its own. */
  opacity: var(--k-exit-foot, 1);
}

/* Layout only. The squares never paint — they are the stencil
   JS punches out of the photograph, so the Pep pitch behind
   the page keeps running through the seam. */
.k-hero-px {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 8;
  pointer-events: none;
  opacity: 0;
}

.k-hero-px__panel {
  display: flex;
  flex-direction: row;
  width: 100%;
}

.k-hero-px__col {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: stretch;
  flex: 1 1 0%;
  min-width: 0;
}

.k-hero-px__cell {
  aspect-ratio: 1;
  width: 100%;
  border: 0;
  outline: none;
  box-shadow: none;
}

/* ---- THE IDENTITY WELL'S RUN ------------------------------
   470vh in tokens.css, and on this build that is a corridor:
   the hand-over's beats occupy the back half of the timeline,
   so the front half was a static lockup scrolling past for two
   and a half screens. Shorter well, same beats - the scrub maps
   the whole timeline onto less travel, so everything moves
   about a third faster and nothing waits. */
/* THE RUN GREW WITH THE TIMELINE. 380vh carried a ~9.75-unit
   scrub; the orbit and the quote wall put it near 11.8, and
   leaving the run alone would simply have played the same number
   of beats faster. Scaled by the same ratio, not rounded up for
   comfort: this section is already the longest on the page. */
.k-ident-well { --kdb-ident-run: 500vh; height: var(--kdb-ident-run); }