/* ---------- Sequential scroll-reveal panels (mobile: image over text) ---------- */

:root {
  --reveal-bg-1: var(--color-navy, #045aa0);
  --reveal-bg-2: #012c4d;
  --reveal-bg-3: var(--color-navy, #045aa0);
  --reveal-fg-1: var(--color-white, #fff);
  --reveal-fg-2: var(--color-white, #fff);
  --reveal-fg-3: var(--color-white, #fff);
  --reveal-feather: 8px; /* soft-edge height at the bottom of the reveal, 4-12px */
}

.pin-wrap {
  position: relative;
  overflow: hidden;
  height: 100vh; /* fallback for browsers without dvh/svh support */
  /* svh (smallest possible viewport, address bar expanded) instead of dvh:
     the wrapper gets pinned via ScrollTrigger, and if its height tracked the
     *dynamic* viewport it would resize the moment the address bar collapses
     mid-scroll, jumping the pinned content. svh stays constant throughout. */
  height: 100svh;
  background: var(--reveal-bg-1);
  color: var(--reveal-fg-1);
}

.panel {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
  /* Equal top/bottom padding — same breathing room above the text as
     below the image, instead of the old 64px-top/0-bottom split. */
  padding: 24px var(--container-pad, 24px);
  /* base panel (first child): no mask, always fully visible */
}

/* Every panel except the base starts fully hidden and reveals bottom-up.
   Uses a mask (not clip-path) so the reveal edge can carry a soft fade
   instead of a hard cut: opaque from the top down to "100% - hidden -
   feather", then a feather-px gradient down to fully transparent at
   "100% - hidden". JS tweens --hidden from 100% to 0%, so the whole
   gradient — hard edge and soft band together — slides down in sync.
   The feather amount is min(hidden, reveal-feather), not a flat constant:
   without that clamp, the last "feather" px of the box stay permanently
   semi-transparent even once hidden reaches 0%, letting the panel
   underneath show through a thin sliver at the bottom forever after.
   Shrinking the feather along with the last bit of --hidden makes it
   reach exactly 0 by the time the reveal completes.
   -webkit- prefix is required for iOS/Safari; unprefixed covers the rest. */
.panel:not(:first-child) {
  --hidden: 100%;
  -webkit-mask-image: linear-gradient(
    to bottom,
    black 0%,
    black calc(100% - var(--hidden) - min(var(--hidden), var(--reveal-feather))),
    transparent calc(100% - var(--hidden))
  );
  mask-image: linear-gradient(
    to bottom,
    black 0%,
    black calc(100% - var(--hidden) - min(var(--hidden), var(--reveal-feather))),
    transparent calc(100% - var(--hidden))
  );
}

.panel .media {
  width: 100%;
  /* Fills whatever vertical space the text doesn't use, instead of
     dictating its own height via aspect-ratio — on a tall image that
     used to push the text block below the visible (pinned) area.
     The text box is a fixed height (below), so this ends up the same
     size on every panel too — not just "whatever's left over".
     flex-basis is 0% (not "auto"): an <img>'s auto basis falls back to
     its intrinsic aspect ratio, which some browsers then fight with
     flex-grow over, leaving a gap instead of filling the row. Starting
     the basis at 0 sidesteps that and hands 100% of the free space to
     flex-grow, unambiguously. */
  flex: 1 1 0%;
  min-height: 0; /* lets it shrink below its intrinsic size inside the flex column */
  object-fit: cover;
  border-radius: var(--radius-img, 16px);
}

.panel .text {
  /* Fixed height (not sized to content) so every panel's text box — and
     therefore every panel's image, which just fills what's left — is
     identical, regardless of how long any one panel's copy runs. Sized to
     fit the longest of the three About paragraphs at 1rem down to a
     360px-wide screen. */
  height: 175px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.panel .text p {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
}

/* prefers-reduced-motion fallback: initScrollReveal() adds this class
   instead of pinning + clip-path — panels return to normal document flow,
   each keeping its own data-bg/data-fg as a static color band. */
.pin-wrap.is-static {
  height: auto;
  overflow: visible;
}

.pin-wrap.is-static .panel {
  position: relative;
  inset: auto;
  -webkit-mask-image: none;
  mask-image: none;
}