/* ============================================================
   FORGE — sections.css
   00 Entry · 01 Manifesto · 02 Forging · 03 Programs ·
   04 Cards · 05 Facility · 06 Numbers · 07 Coaches ·
   08 Schedule · 09 Membership · 10 Journal
   Grid breaks live here (§04)
   ============================================================ */

/* ---------------------------------------------------------
   00 — ENTRY (Level 3)
   Full-bleed: the image is the section — edge to edge, top to
   bottom — and the content sits on top of it. Scrims carry the
   read; no boxed media, no split layout.
--------------------------------------------------------- */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  padding-top: calc(var(--nav-h) + clamp(1.25rem, 3vh, 2.5rem));
  padding-bottom: clamp(2rem, 5vh, 4rem);
  overflow: clip;
  background: var(--forge-black);
}

.hero__media {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--forge-carbon);
}

.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 70% 50%;
  transform: scale(1.14);   /* headroom for the scroll zoom; covers every edge */
}

/* Scrim, three jobs: the nav rail on top, the read column on
   the left, the title + CTAs at the base. */
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to top,  rgba(9, 9, 9, .92) 0%, rgba(9, 9, 9, .55) 32%, rgba(9, 9, 9, 0) 62%),
    linear-gradient(to bottom, rgba(9, 9, 9, .5) 0%, rgba(9, 9, 9, 0) 24%),
    linear-gradient(to right, rgba(9, 9, 9, .55) 0%, rgba(9, 9, 9, 0) 58%);
}

.hero__inner {
  position: relative;
  z-index: 2;
  flex: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
}

.hero__meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .75rem 2rem;
  padding-bottom: clamp(.75rem, 1.5vh, 1.25rem);
  border-bottom: 1px solid var(--forge-line);
}

.hero__title {
  margin-top: auto;          /* meta pins to the top, everything else to the base */
  padding-top: clamp(2.5rem, 8vh, 6rem);
}

.hero__title .line { white-space: nowrap; }

.hero__title .indent { padding-left: .06em; }

.hero__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.75rem 3rem;
  margin-top: clamp(2rem, 5vh, 3.5rem);
}

.hero__ctas { display: flex; flex-wrap: wrap; gap: 1rem; }

.hero__scroll { display: none; align-items: center; gap: .9rem; }

.hero__scroll .tick {
  width: 1px;
  height: 46px;
  background: var(--forge-line-lit);
  position: relative;
  overflow: hidden;
}

.hero__scroll .tick::after {
  content: "";
  position: absolute;
  left: 0; top: -50%;
  width: 100%; height: 50%;
  background: var(--forge-ember);
  animation: tickfall 2.4s var(--ease-mechanical) infinite;
}

@keyframes tickfall {
  0%   { transform: translateY(0); }
  70%  { transform: translateY(300%); }
  100% { transform: translateY(300%); }
}

@media (min-width: 1024px) {
  .hero__scroll { display: flex; }
}

/* ---------------------------------------------------------
   01 — MANIFESTO (Level 1)
--------------------------------------------------------- */

.manifesto { padding-block: var(--space-section); }

.manifesto__text {
  margin-top: clamp(2.5rem, 6vh, 4.5rem);
  max-width: 18ch;
}

.manifesto__text .mask > * { will-change: transform; }

.manifesto__rule {
  display: block;
  width: clamp(6rem, 18vw, 16rem);
  height: 2px;
  background: var(--forge-ember);
  margin-block: clamp(1.25rem, 3vh, 2.25rem);
  transform-origin: left;
}

.manifesto__foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem 3rem;
  margin-top: clamp(3rem, 8vh, 6rem);
}

.manifesto__foot p { max-width: 42ch; }

/* ---------------------------------------------------------
   02 — FORGING SEQUENCE (Level 3, signature, pinned)
--------------------------------------------------------- */

.forging {
  position: relative;
  height: 420vh;
  background: var(--forge-black);
}

.forging__pin {
  position: sticky;
  top: 0;
  height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(1.25rem, 3vh, 2.5rem);
  overflow: hidden;
  padding-block: calc(var(--nav-h) + 1rem) 2rem;
}

.forging__tag {
  width: min(100% - (var(--outer) * 2), 1100px);
  margin-inline: auto;
}

.forging__stages {
  width: min(100% - (var(--outer) * 2), 1100px);
  margin-inline: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .75rem 1.5rem;
}

.stage {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-family: var(--font-mono);
  font-size: .75rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--forge-muted);
  transition: color var(--motion-fast) var(--ease-out);
}

.stage::before {
  content: "";
  width: 8px;
  height: 8px;
  background: var(--forge-line-lit);
  transition: background var(--motion-fast) var(--ease-out),
              transform var(--motion-fast) var(--ease-out);
}

.stage.is-on { color: var(--forge-ember); }
.stage.is-on::before { background: var(--forge-ember); transform: rotate(45deg); }

.forging__frame {
  position: relative;
  width: min(100% - (var(--outer) * 2), 1100px);
  margin-inline: auto;
  aspect-ratio: 16 / 9;
  background: var(--forge-carbon);
  border: none;
  border-radius: var(--radius-sm);
  overflow: hidden;
}

/* pinned mode only: keep the whole pin (tag + stages + frame + progress)
   inside the viewport on short screens — the frame gives way, not the chrome */
@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
  .forging__frame {
    width: max(280px, min(100% - (var(--outer) * 2), 1100px, (100svh - 360px) * 16 / 9));
  }
}

.forge-layer {
  position: absolute;
  inset: 0;
  margin: 0;
}

.forge-layer img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.forge-layer figcaption { display: none; }

.forge-layer:nth-child(1) { z-index: 1; }
.forge-layer:nth-child(2) { z-index: 2; }
.forge-layer:nth-child(3) { z-index: 3; }
.forge-layer:nth-child(4) { z-index: 4; }

.forging__end {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1.5rem;
  background: rgba(9, 9, 9, .62);
  opacity: 0;
}

.forging__end .h2 { max-width: 14ch; }

.forging__progress {
  width: min(100% - (var(--outer) * 2), 1100px);
  margin-inline: auto;
  height: 1px;
  background: var(--forge-line);
}

.forging__progress i {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--forge-ember);
  transform: scaleX(0);
  transform-origin: left center;
}

/* mobile / reduced motion: un-pin into 4 static stages (§21) */
@media (max-width: 1023px), (prefers-reduced-motion: reduce) {
  .forging { height: auto; }

  .forging__pin {
    position: static;
    height: auto;
    padding-block: var(--space-section);
  }

  .forging__stages { display: none; }
  .forging__progress { display: none; }

  .forging__frame {
    aspect-ratio: auto;
    display: flex;
    flex-direction: column;
    gap: 1px;
    background: var(--forge-line);
    overflow: visible;
  }

  .forge-layer {
    position: relative;
    inset: auto;
    background: var(--forge-black);
  }

  .forge-layer img { aspect-ratio: 16 / 10; }

  .forge-layer figcaption {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .85rem 1rem;
    font-family: var(--font-mono);
    font-size: .75rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--forge-bone);
    background: var(--forge-black);
  }

  .forge-layer figcaption::before {
    content: "";
    width: 8px;
    height: 8px;
    background: var(--forge-ember);
  }

  .forging__end {
    position: relative;
    inset: auto;
    opacity: 1;
    background: var(--forge-black);
    padding: clamp(2.5rem, 8vw, 4rem) 1.5rem;
    border-top: 1px solid var(--forge-line);
  }
}

/* ---------------------------------------------------------
   03 — PROGRAMS INDEX + 04 TRAINING CARDS
--------------------------------------------------------- */

.programs__intro {
  max-width: 44ch;
  color: var(--forge-muted);
}

/* ---------------------------------------------------------
   05 — FACILITY FILM STRIP (Level 3, pinned horizontal)
--------------------------------------------------------- */

.facility {
  position: relative;
  height: 520vh;
  background: var(--forge-carbon);
}

.facility__pin {
  position: sticky;
  top: 0;
  height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  padding-block: calc(var(--nav-h) + 1rem) 2rem;
}

.facility__head {
  width: min(100% - (var(--outer) * 2), var(--layout-max));
  margin-inline: auto;
  margin-bottom: clamp(1.5rem, 4vh, 3rem);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .75rem 2rem;
}

.facility__track {
  display: flex;
  gap: clamp(1.5rem, 4vw, 4rem);
  padding-inline: var(--outer);
  will-change: transform;
}

.spread {
  flex: 0 0 min(84vw, 1120px);
  display: flex;
  flex-direction: column;
  gap: clamp(1rem, 2vh, 1.75rem);
}

.spread__img {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: var(--forge-steel);
}

/* pinned mode only: cap the plate so image + title + text always fit the
   100svh pin (would clip ~60–190px at 1366×768 / 1440×900 otherwise) */
@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
  .spread__img { max-height: max(220px, calc(100svh - 370px)); }
}

.spread__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.spread__img .idx {
  position: absolute;
  top: 1rem;
  left: 1rem;
  padding: .45em .7em;
  background: rgba(9, 9, 9, .78);
  border: 1px solid var(--forge-line);
  border-radius: 2px;
  font-family: var(--font-mono);
  font-size: .6875rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--forge-bone);
}

.spread__title { font-size: clamp(2.5rem, 5.5vw, 5rem); }

.spread__text { max-width: 42ch; color: var(--forge-muted); }

@media (max-width: 1023px), (prefers-reduced-motion: reduce) {
  .facility { height: auto; }

  .facility__pin {
    position: static;
    height: auto;
    overflow: visible;
    padding-block: var(--space-section);
  }

  .facility__track {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 1.5rem;
    -webkit-overflow-scrolling: touch;
    transform: none !important;
  }

  .spread {
    flex-basis: 86vw;
    scroll-snap-align: start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .facility { height: auto; }
  .facility__pin { position: static; height: auto; padding-block: var(--space-section); }
  .facility__track { overflow-x: auto; transform: none !important; }
}

/* ---------------------------------------------------------
   06 — NUMBERS
--------------------------------------------------------- */

.numbers__list { margin-top: clamp(2rem, 5vw, 4rem); }

/* ---------------------------------------------------------
   07 — COACHES
   Portrait height must fit BELOW the section head in one
   viewport so the bottom-aligned info column (name + controls)
   is never stranded. Height H = 100svh − space-section − head
   margin − chrome, so at an anchor position (nav-h + .75rem)
   total = 84 + 20 + H + margin ≤ 100svh − 36.
   -140px (2-col ≥1024): info sits BESIDE the portrait.
   -420px (stacked): 84 anchor + 20 head + ~280 info+gap + slack.
   Ratio stays 4/5 (width derived) — no face crop.
--------------------------------------------------------- */

.coaches { scroll-margin-top: calc(var(--nav-h) + .75rem); }

.coaches__media {
  width: min(100%, max(240px, calc((100svh - var(--space-section) - clamp(2.5rem, 6vw, 5rem) - 420px) * 4 / 5)));
}

@media (min-width: 1024px) {
  .coaches__media {
    width: min(100%, max(240px, calc((100svh - var(--space-section) - clamp(2.5rem, 6vw, 5rem) - 140px) * 4 / 5)));
  }
}

/* ---------------------------------------------------------
   08 — SCHEDULE
--------------------------------------------------------- */

/* ---------------------------------------------------------
   09 — MEMBERSHIP
--------------------------------------------------------- */

.membership__note {
  max-width: 40ch;
  color: var(--forge-muted);
}

/* ---------------------------------------------------------
   10 — JOURNAL TEASER
--------------------------------------------------------- */

.journal__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}

@media (min-width: 1024px) {
  .journal__grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
}

.journal__text { display: flex; flex-direction: column; gap: 1.5rem; }

.journal__title { max-width: 12ch; }

.journal__meta {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem 2rem;
  padding-top: .5rem;
  border-top: 1px solid var(--forge-line);
}

.journal__media {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: var(--forge-carbon);
}

.journal__media img { width: 100%; height: 100%; object-fit: cover; }

.journal__media .badge {
  position: absolute;
  top: 1rem;
  left: 1rem;
  padding: .45em .7em;
  background: rgba(9, 9, 9, .8);
  border: 1px solid var(--forge-line);
  border-radius: 2px;
  font-family: var(--font-mono);
  font-size: .6875rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--forge-bone);
}

/* ---------------------------------------------------------
   STATIC FALLBACK — JS off, reduced motion, or GSAP missing.
   `anim` is only present once motion.js has fully initialized
   (head timeout removes it otherwise), so `html:not(.anim)`
   un-pins both Level-3 sections exactly like the mobile rules:
   content stays visible and reachable instead of scrolling
   through a dead pinned stage.
--------------------------------------------------------- */

html:not(.anim) .forging { height: auto; }

html:not(.anim) .forging__pin {
  position: static;
  height: auto;
  padding-block: var(--space-section);
}

html:not(.anim) .forging__stages,
html:not(.anim) .forging__progress { display: none; }

html:not(.anim) .forging__frame {
  width: min(100% - (var(--outer) * 2), 1100px);
  aspect-ratio: auto;
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--forge-line);
  overflow: visible;
}

html:not(.anim) .forge-layer {
  position: relative;
  inset: auto;
  background: var(--forge-black);
}

html:not(.anim) .forge-layer img { aspect-ratio: 16 / 10; }

html:not(.anim) .forge-layer figcaption {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .85rem 1rem;
  font-family: var(--font-mono);
  font-size: .75rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--forge-bone);
  background: var(--forge-black);
}

html:not(.anim) .forge-layer figcaption::before {
  content: "";
  width: 8px;
  height: 8px;
  background: var(--forge-ember);
}

html:not(.anim) .forging__end {
  position: relative;
  inset: auto;
  opacity: 1;
  background: var(--forge-black);
  padding: clamp(2.5rem, 8vw, 4rem) 1.5rem;
  border-top: 1px solid var(--forge-line);
}

html:not(.anim) .facility { height: auto; }

html:not(.anim) .facility__pin {
  position: static;
  height: auto;
  overflow: visible;
  padding-block: var(--space-section);
}

html:not(.anim) .facility__track {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 1.5rem;
  transform: none !important;
  -webkit-overflow-scrolling: touch;
}

html:not(.anim) .spread { scroll-snap-align: start; }

html:not(.anim) .spread__img { max-height: none; }