/* Beat 07 — Close. The aperture shuts back down to the gold 9:16 where Focus began. */
.beat-close { height: 200vh; }

/* Three rows, and the middle one belongs to the aperture.

   The Portalith is absolutely positioned and centred, so it claims no track of its own;
   with the stage centring everything into one stack the closing line ran straight across
   the gold rectangle and the button straddled its edge. Ivory Beige on Golden Blaze is a
   very low-contrast pair — "your" and "foreg" were close to unreadable on the page's
   final frame, which is also its call to action.

   So the aperture gets a reserved row and the words sit clear of it, above and below. The
   gold 9:16 becomes the full stop between them rather than something to read through.

   --close-aperture MUST match HEIGHTS_VH[0] in portalith.js, which is what openFrame(0)
   resolves to. If that constant moves, this row moves with it or the overlap returns. */
.beat-close__stage {
  --close-aperture: 30vh;

  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  display: grid;
  grid-template-rows: 1fr var(--close-aperture) 1fr;
  justify-items: center;
  align-items: center;
  gap: 2rem;
  background: var(--c-aperture);
  text-align: center;
}

.beat-close .portalith { position: absolute; }

.close__line {
  position: relative;
  z-index: 10;
  grid-row: 1;
  align-self: end;
  max-width: 16ch;
  font-family: var(--f-display);
  font-size: var(--t-statement);
  line-height: 1.04;
  color: var(--c-ground);
}

.close__door {
  position: relative;
  z-index: 10;
  grid-row: 3;
  align-self: start;
  padding: 0.85rem 1.75rem;
  border: 1px solid var(--c-ground);
  border-radius: 999px;
  color: var(--c-ground);
  text-decoration: none;
  font-size: var(--t-nav);
  letter-spacing: var(--tracking-nav);
  text-transform: uppercase;
  transition:
    background-color 0.3s var(--ease-out),
    color 0.3s var(--ease-out),
    border-color 0.3s var(--ease-out),
    transform 0.3s var(--ease-out);
}

/* Fills with the Portalith's own gold. The page closes on a gold aperture; the one thing
   you can do here should be the same colour as it. */
.close__door:hover,
.close__door:focus-visible {
  background-color: var(--c-portalith);
  border-color: var(--c-portalith);
  color: var(--c-ink);
  /* Composed, not replaced: this element is a .plane, and .plane owns transform for the
     depth scale. A bare translate here wins on specificity and drops that channel, so the
     button would snap to full size the moment you hovered it mid-arrival. */
  transform: translateY(-2px) scale(var(--p-scale, 1));
}

/* The sign-off, under the gold Portalith the page shuts down to.

   Centred with left/right rather than translateX(-50%), and that is not a style
   preference: .plane owns `transform` for its scale channel, so any transform declared
   here would be overwritten by it — or would silently kill the depth scale if it won.
   .statement centres the same way, for the same reason. Anything given .plane must leave
   transform alone.

   The mark ships black and this ground is the aperture, so it is inverted to Ivory Beige
   rather than shipping a second asset — the same treatment .lockup__wordmark uses. */
.close__signoff {
  position: absolute;
  z-index: 10;
  left: 0;
  right: 0;
  bottom: 7vh;
  margin: 0;
  text-align: center;
  line-height: 0;
}

.close__signoff img {
  display: inline-block;
  width: min(20vw, 230px);
  height: auto;
  filter: invert(1);
}

/* Reduced motion has no scrub, so the runway would become N viewport-heights of an
   unchanging frame. Collapse it and let the stage flow normally. */
:root[data-motion="reduced"] .beat-close { height: 100vh; }
:root[data-motion="reduced"] .beat-close__stage {
  position: relative;
  height: 100vh;
}