/* ============================================================
   ENDUROCROSS — HOME · "THE FILM" hero (2025 promo reel)
   Loaded AFTER home.css; the stage swaps the photo-layer phases
   for the real EX2025 promo, scrubbed by scroll (all-intra
   encode in assets/video/, engine in film-experience.js).
   Reuses home.css primitives: .gx-phase(+__tag), .gx-wall,
   .gx-telemetry/.gx-card, .gx-lineage, .gx-exit, staging.

   Same contract as home.css: default styles are the COMPLETE
   static composition (reduced motion / no-JS — the film shows
   its poster frame, chapters read stacked); .is-animated layout
   only positions, GSAP owns every initial state.
   ============================================================ */

/* ---- The film ------------------------------------------------- */
/* No src until JS picks the size variant, so no-JS visitors get
   the poster attribute — never a black box. */
.gx-film {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--ink);
}
.gauntlet.is-animated .gx-film {
  position: absolute;
  inset: 0;
  height: 100%;
  aspect-ratio: auto;
}

/* Dim plate above the film, below the frame — GSAP drives its
   opacity per chapter so type always clears AA over the footage. */
.fx-dim {
  position: absolute;
  inset: 0;
  background: var(--ink);
  opacity: 0.62;
  pointer-events: none;
}
.gauntlet:not(.is-animated) .fx-dim { display: none; }

/* ---- Staging swap (Trevor 2026-09-03 v2) ----------------------
   The tagline is the headline; the wordmark drops to a footnote in
   the old sub slot. Overrides home.css staging sizes — this sheet
   loads after it. */
.gx-hero-line {
  position: relative;
  z-index: 1;
  margin: 0;
  max-width: 16ch;
  font-size: clamp(2.3rem, 5.4vw, 4.6rem);
  font-weight: 900;
  line-height: 0.98;
  text-transform: uppercase;
  text-wrap: balance;
  text-shadow: 0 4px 40px oklch(0% 0 0 / 0.6);
}
.gauntlet .gx-title--footnote { margin-top: var(--space-8); }
.gauntlet .gx-title--footnote .gx-title__mark { width: min(34vw, 13rem); }

/* ---- Chapters -------------------------------------------------- */
/* Static: chapters flow under the poster in lap order; hairline
   separators come from home.css .gx-frame > .gx-phase rules. */
.fx-ch { padding: var(--space-16) var(--gutter); }
.gauntlet.is-animated .fx-ch { padding: 0; }

/* THE DROP — wall lines land lower-left, over the terrain beat. */
.fx-wallset { max-width: var(--page-max); margin-inline: auto; }
.gauntlet.is-animated .fx-drop .fx-wallset {
  position: absolute;
  left: var(--gutter);
  bottom: max(4rem, 12svh);
  margin: 0;
}
/* home.css .gx-wall has no static margins of its own — give the
   stacked read some air between lines. */
.gauntlet:not(.is-animated) .fx-wallset .gx-wall + .gx-wall { margin-top: var(--space-2); }

/* BAR TO BAR — telemetry cards; animated position comes from
   home.css .gauntlet.is-animated .gx-telemetry untouched. */

/* THE FLAG — one centered statement. */
.fx-line {
  font-size: clamp(1.9rem, 1.1rem + 3.6vw, 4rem);
  font-weight: 900;
  color: var(--bone);
  text-shadow: 0 4px 40px oklch(0% 0 0 / 0.85);
  text-align: center;
}
/* Block, not grid — the lineage marquee's max-content track would
   blow a grid column past the container (seen 2026-09-03). */
.fx-flag__inner {
  position: relative;
  max-width: min(92vw, 64rem);
  margin-inline: auto;
  text-align: center;
}
/* The brand X behind the champions statement (Trevor 2026-09-03) —
   same mask pattern as the staging lockup. */
.fx-flag__x {
  position: absolute;
  left: 50%;
  top: 44%;
  width: clamp(13rem, 28vw, 21rem);
  height: clamp(13rem, 28vw, 21rem);
  transform: translate(-50%, -50%);
  background: var(--x-red);
  -webkit-mask: url("../img/brand/x-mark.svg") center / contain no-repeat;
  mask: url("../img/brand/x-mark.svg") center / contain no-repeat;
  opacity: 0.9;
  z-index: -1;
}
.fx-flag__inner .gx-lineage { margin-top: var(--space-6); }
/* Centering transform is GSAP-owned (xPercent/yPercent, like the old
   podium, D-01) — a CSS translate here would be clobbered by the
   scale/y tweens. */
.gauntlet.is-animated .fx-flag__inner {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(92vw, 64rem);
}

/* THE CROWN — reuses .gx-exit type; adds the ticket CTA row. The old
   exit sat on flat ink; over champagne highlights it needs the same
   shadow the flag statement carries. */
.fx-crown-cta {
  margin-top: var(--space-8);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-4);
}
.gx-exit__big .fx-red { color: var(--x-red); }
.gauntlet .gx-exit__big,
.gauntlet .gx-exit__sub { text-shadow: 0 4px 40px oklch(0% 0 0 / 0.85); }

/* Phones: keep the statements off the header bar and give the
   wall lines room over 9:16-cropped footage. */
@media (max-width: 760px) {
  /* Clear of the consent banner's first-visit footprint. */
  .gauntlet.is-animated .fx-drop .fx-wallset { bottom: max(3rem, 22svh); }
}