/* ──────────────────────────────────────────────────────────
   About media — two pieces, both in the About section.

   1. The clip stack. Three videos sitting on top of each other in the
      slot the chrome render used to hold. All three play at once and
      each loops on its own; there is nothing to click through.

   2. The snapshot strip. A column of square photos looping upward to
      the right of the two portraits.

   Both are muted/silent by definition — the videos carry the muted
   attribute and there is no audio control anywhere.

   home.css owns where these sit (.story-lead-wrap for the stack, the
   third .story-grid column for the strip). Everything here is what
   goes inside them.
   ────────────────────────────────────────────────────────── */

/* ═══ 1. Clip stack ═══════════════════════════════════════ */

.story-lead-reel { position: relative; }

.story-reel-stack {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.story-reel-video {
  display: block;
  width: 100%;
  aspect-ratio: 672 / 848;
  object-fit: cover;
  /* Never taller than a third of the stack's cap (see the desktop rule
     below), so the clips shrink rather than growing up into the fixed
     home icon on a short window. */
  min-height: 0;
  border-radius: 12px;
  background: var(--bg2);
  border: 1px solid var(--border);
  /* home.css mirrors this slot with scaleX(-1) so the chrome character
     faced the text column. Footage can't be flipped — it would put the
     climbing wall and the golf swing on the wrong hand. */
  transform: none !important;
}

/* ═══ 2. Snapshot strip ═══════════════════════════════════
   Same trick as the tattoo wall, turned on its side: the track is
   duplicated in JS and translated by -50%, which lands exactly on the
   copy and makes the loop seamless. A CSS animation rather than a
   requestAnimationFrame loop, so it runs on the compositor — the
   homepage has enough rAF loops already (see PERFORMANCE.md). */

.story-me-strip {
  overflow: hidden;
  /* Fade both ends so photos enter and leave rather than being cut off
     against the section background. */
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 7%, #000 93%, transparent);
}

.story-me-track {
  display: flex;
  flex-direction: column;
  gap: 12px;
  list-style: none;
  margin: 0;
  padding: 0;
  animation: story-me-drift linear infinite;
  will-change: transform;
}

@keyframes story-me-drift {
  from { transform: translateY(0); }
  to   { transform: translateY(-50%); }
}

/* Hovering holds it still, so a snapshot that caught your eye can be
   looked at. Paused off-screen too — about-reel.js sets is-paused. */
.story-me-strip:hover .story-me-track,
.story-me-strip.is-paused .story-me-track {
  animation-play-state: paused;
}

.story-me-item { margin: 0; flex: none; }

.story-me-item img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;     /* the files are already square — this holds
                              the box before they load */
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid var(--border);
}

/* ─── Desktop ─────────────────────────────────────────── */
@media (min-width: 901px) {
  /* The stack is driven by HEIGHT here, not width. The About block
     scales as one unit, but the floating home icon at the top left is
     fixed-size and does not scale with it — so on a short window a
     width-driven stack grew tall enough to ride up underneath the icon.
     Capping the height and deriving each clip's width from it means the
     clips shrink on short windows instead of colliding, and sit at their
     full size whenever there is room. */
  .story-reel-stack {
    /* The px term is the full size; the vh term only bites on a short
       window, where it shrinks the clips rather than letting them grow
       up into the icon. It is measured in the block's own pre-scale
       space and then shrinks again with the block, so it bites harder
       than the number suggests. */
    height: min(668px, 84vh);
  }
  .story-reel-video {
    flex: 1 1 0;
    height: auto;
    width: auto;
    max-width: 100%;
    margin: 0 auto;
  }

  /* Matched to the two portraits beside it (they measure ~698px
     unscaled), so the three columns end on the same line. Height is not
     the binding constraint on the About block's scale — width is — so
     this costs nothing. */
  .story-me-strip { height: 698px; }
}

/* A short desktop window is the one case where the clips, the fixed home
   icon and the section floor all compete. The block scales down there, but
   the icon does not, so the cap tightens to buy back the clearance —
   the clips get smaller rather than colliding or being cut off. */
@media (min-width: 901px) and (max-height: 700px) {
  .story-reel-stack { height: min(668px, 70vh); }
}

/* ─── Mobile ──────────────────────────────────────────────
   The grid collapses to one column, where a tall vertical strip would
   read as an endless tail below the photos. It turns on its side into
   a horizontal band instead. */
@media (max-width: 900px) {
  .story-reel-stack { gap: 10px; }

  .story-me-strip {
    height: auto;
    margin-top: 16px;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  }
  .story-me-track {
    flex-direction: row;
    width: max-content;
    animation-name: story-me-drift-x;
  }
  .story-me-item { width: 116px; }
}

@keyframes story-me-drift-x {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ─── Reduced motion ──────────────────────────────────────
   No drift, and about-reel.js leaves the clips on their first frame.
   The strip becomes an ordinary scroller so every snapshot is still
   reachable, under the reader's own control. */
@media (prefers-reduced-motion: reduce) {
  .story-me-track { animation: none; }
  .story-me-strip {
    overflow-y: auto;
    scrollbar-width: none;
  }
  .story-me-strip::-webkit-scrollbar { display: none; }
}
@media (prefers-reduced-motion: reduce) and (max-width: 900px) {
  .story-me-strip { overflow-x: auto; overflow-y: hidden; }
}