/* ==========================================================================
   Hero v2
   --------------------------------------------------------------------------
   One idea: the fund's three steps told as three photographs, cut into the
   brand's capsule shape and stood on a shared baseline. Heights vary, the
   baseline does not, so the trio reads as a measured column rhythm rather
   than a collage. The rail underneath names each step, which is what gives
   the photographs a reason to be there.

   Loaded after design-system-demo1.css. Every rule here is scoped to .hero
   and overrides the v1 hero by source order.
   ========================================================================== */

/* ── Shell ───────────────────────────────────────────────────────────────── */
.hero {
  --hero-accent: #93cfb2;
  --hero-rule: rgba(255, 255, 255, 0.13);
  --hero-gap: clamp(0.5rem, 0.9vw, 0.85rem);
  /* Every bar height and drift distance is a fraction of this. */
  --reel-h: clamp(19rem, 54vh, 32rem);
  /* How long one photograph holds before the next crossfades in. */
  --swap: 21s;

  position: relative;
  display: grid;
  align-items: center;
  min-height: 100vh;
  /* Capped so a tall monitor does not strand the composition in empty space. */
  min-height: min(100dvh, 68rem);
  overflow: hidden;
  border-bottom: 0;
  color: var(--color-inverse);
  padding-block:
    calc(var(--header-height) + clamp(2rem, 5vh, 3.5rem))
    clamp(2.5rem, 6vh, 4.5rem);
  background:
    radial-gradient(ellipse 66% 54% at 4% -6%, rgba(58, 130, 96, 0.34), transparent 64%),
    radial-gradient(ellipse 58% 66% at 100% 108%, rgba(45, 110, 80, 0.26), transparent 66%),
    radial-gradient(ellipse 80% 60% at 72% 46%, rgba(31, 79, 58, 0.18), transparent 70%),
    linear-gradient(168deg, #0c1a14 0%, #08140f 48%, #0a1612 100%);
}

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(2rem, 4vw, 4.25rem);
  align-items: center;
}

/* ── Copy ────────────────────────────────────────────────────────────────── */
.hero__lead {
  max-width: 40rem;
}

.hero__eyebrow {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0 0 clamp(1.25rem, 2.6vh, 2rem);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--hero-accent);
}



.hero__title {
  margin: 0 0 clamp(1.2rem, 2.4vh, 1.75rem);
  max-width: none;
  font-family: var(--font-display);
  font-size: clamp(2.375rem, 4.5vw + 0.2rem, 4.75rem);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -0.042em;
  color: #ffffff;
}

/* Accent carries the mission half of the sentence. */
.hero__title em {
  font-style: normal;
  color: var(--hero-accent);
}

.hero__lede {
  margin: 0 0 clamp(1.75rem, 3.4vh, 2.5rem);
  max-width: 42ch;
  font-size: 1.0625rem;
  line-height: 1.72;
  color: rgba(255, 255, 255, 0.62);
}

.hero .btn-group {
  gap: 0.875rem;
}

/* ── Gallery ─────────────────────────────────────────────────────────────── */
.hero__gallery {
  display: flex;
  flex-direction: column;
  gap: clamp(0.95rem, 2vh, 1.4rem);
}

/* The stage is the fixed frame of reference. Bars drift inside it; the
   photographs are pinned to it and do not move at all. */
.hero__reel {
  display: flex;
  align-items: center;
  gap: var(--hero-gap);
  height: var(--reel-h);
}

/* The column owns the width and the entrance, so the bar inside is free to
   use `transform` for nothing but its drift. */
.hero__col {
  /* Longhands, not the `flex` shorthand: a var() inside the shorthand is
     invalid at computed-value time and silently drops the whole declaration. */
  flex-grow: var(--w, 1);
  flex-shrink: 1;
  flex-basis: 0;
  min-width: 0;
  height: 100%;
  display: flex;
  align-items: center;
}

.hero__bar {
  position: relative;
  width: 100%;
  /* --hf is the bar's share of the stage height, --af how far it travels
     either side of centre. Keep --hf + 2 * --af at or below 1 so a bar never
     runs past the end of the stage. */
  height: calc(var(--reel-h) * var(--hf, 0.6));
  --amp: calc(var(--reel-h) * var(--af, 0.1));
  overflow: hidden;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.09);
}

.hero__bar--photo {
  background: #0f1d17;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.09),
    0 22px 56px rgba(0, 0, 0, 0.45);
}

.hero__bar--mint {
  background: linear-gradient(175deg, #8ad7ae 0%, #5fb489 55%, #479a71 100%);
}

/* Mid tone: deep enough to sit behind the mint, light enough that the right
   edge of the reel does not read as a hole in the composition. */
.hero__bar--forest {
  background: linear-gradient(175deg, #55a37d 0%, #3d7a5f 55%, #2c6248 100%);
}

/* Each photograph is sized and placed against the stage, not against the bar
   that happens to be showing it, which is what lets the bar slide over it.
   --shot-h is its height as a multiple of the stage and --shot-y nudges the
   crop down so the subject sits inside the band the bar travels through. */
.hero__shot {
  position: absolute;
  left: 0;
  right: 0;
  height: calc(var(--reel-h) * var(--shot-h, 1.3));
  top: calc(
    50% - (var(--reel-h) * var(--shot-h, 1.3)) / 2 +
      var(--reel-h) * var(--shot-y, 0)
  );
  display: block;
  opacity: 0;
}

.hero__shot img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: 56% 50%;
}

/* First photograph of each capsule is visible before the carousel starts, so
   the hero is never a set of empty capsules. */
.hero__shot:first-of-type {
  opacity: 1;
}

/* Seats the photographs into the dark field at top and bottom. */
.hero__bar--photo::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  background: linear-gradient(
    180deg,
    rgba(8, 20, 15, 0.32) 0%,
    rgba(8, 20, 15, 0) 26%,
    rgba(8, 20, 15, 0) 64%,
    rgba(8, 20, 15, 0.5) 100%
  );
  pointer-events: none;
}


/* ── Step rail ───────────────────────────────────────────────────────────── */
.hero__rail {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--hero-gap);
  margin: 0;
  padding: clamp(0.85rem, 1.7vh, 1.15rem) 0 0;
  list-style: none;
  border-top: 1px solid var(--hero-rule);
}

.hero__rail li {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.hero__step-num {
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  color: rgba(255, 255, 255, 0.48);
}

.hero__step-label {
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.005em;
  color: rgba(255, 255, 255, 0.74);
}

/* ── Motion ──────────────────────────────────────────────────────────────── */
/* Entrance is CSS only, so the hero is never blank if the script fails. */
@media (prefers-reduced-motion: no-preference) {
  .hero__eyebrow,
  .hero__title,
  .hero__lede,
  .hero .btn-group,
  .hero__rail {
    animation: heroRise 0.85s var(--ease-out) both;
  }

  .hero__eyebrow { animation-delay: 0.04s; }
  .hero__title { animation-delay: 0.1s; }
  .hero__lede { animation-delay: 0.18s; }
  .hero .btn-group { animation-delay: 0.26s; }
  .hero__rail { animation-delay: 0.62s; }

  /* Entrance lives on the column so the bar keeps `transform` for its drift. */
  .hero__col {
    animation: heroRise 0.9s var(--ease-out) both;
  }

  .hero__col:nth-child(1) { animation-delay: 0.14s; }
  .hero__col:nth-child(2) { animation-delay: 0.21s; }
  .hero__col:nth-child(3) { animation-delay: 0.28s; }
  .hero__col:nth-child(4) { animation-delay: 0.35s; }
  .hero__col:nth-child(5) { animation-delay: 0.42s; }
  .hero__col:nth-child(6) { animation-delay: 0.49s; }

  /* The bar slides; the photograph slides the opposite way by exactly the
     same amount, so it reads as pinned to the stage while the capsule
     uncovers a different part of it. Identical duration, easing, delay and
     direction on both is what keeps them locked together. */
  .hero__bar {
    animation: barDrift var(--dur, 8s) var(--ease-in-out) var(--phase, 0s)
      infinite alternate;
    will-change: transform;
  }

  .hero__shot {
    animation:
      barDriftBack var(--dur, 8s) var(--ease-in-out) var(--phase, 0s) infinite
        alternate,
      shotSwap var(--swap, 21s) linear var(--swap-delay, 0s) infinite;
  }

  /* The carousel drives every photograph, so the resting opacity above is
     only there for the first paint and for reduced motion. */
  .hero__shot:first-of-type {
    opacity: 0;
  }
}

@keyframes heroRise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

@keyframes barDrift {
  from { transform: translateY(calc(var(--amp) * -1)); }
  to { transform: translateY(var(--amp)); }
}

@keyframes barDriftBack {
  from { transform: translateY(var(--amp)); }
  to { transform: translateY(calc(var(--amp) * -1)); }
}

/* Three photographs share each capsule. Delays are one third of the cycle
   apart, so one is always at full opacity and the hand-overs overlap. */
@keyframes shotSwap {
  0%, 27% { opacity: 1; }
  33%, 94% { opacity: 0; }
  100% { opacity: 1; }
}

/* Paused while the hero is off screen; hero-v2.js toggles this. */
.hero.is-idle .hero__bar,
.hero.is-idle .hero__shot {
  animation-play-state: paused;
}


/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 1023px) {
  .hero {
    /* Header is sticky below this width, so it already occupies its own space. */
    min-height: 0;
    padding-block: clamp(2rem, 5vh, 3rem) clamp(2.5rem, 6vh, 3.5rem);
  }

  .hero__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(2.25rem, 6vw, 3rem);
  }

  .hero__lead {
    max-width: 36rem;
  }

  .hero__br {
    display: none;
  }

  /* Stacked, the stage is sized from its width rather than the viewport
     height, which is what keeps the bars pill-shaped rather than oval. */
  .hero__gallery {
    max-width: 34rem;
  }

  .hero {
    --reel-h: clamp(20rem, 66vw, 31rem);
  }
}

@media (max-width: 639px) {
  .hero {
    --reel-h: clamp(21rem, 88vw, 31rem);
  }

  /* The two narrowest accents go, so the three photographs keep enough width
     to read at phone size. */
  .hero__col:nth-child(4),
  .hero__col:nth-child(6) {
    display: none;
  }

  .hero__rail {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.6rem;
  }

  .hero__rail li {
    flex-direction: row;
    align-items: baseline;
    gap: 0.75rem;
    padding-inline: 0;
  }

  .hero__step-num {
    flex: none;
  }
}

@media (max-width: 479px) {
  .hero .btn-group {
    flex-direction: column;
    align-items: stretch;
  }

  .hero .btn-group .btn {
    width: 100%;
  }
}

/* Nothing drifts and nothing swaps: each capsule holds its first photograph,
   still, at the resting position. */
@media (prefers-reduced-motion: reduce) {
  .hero__bar,
  .hero__shot {
    animation: none;
    transform: none;
  }
}

/* The responsive header is fixed, so the hero must reserve its vertical space. */
@media (max-width: 1199px) {
  .hero {
    padding-top: calc(var(--header-height) + clamp(2rem, 5vh, 3rem));
  }
}