/* ==========================================================================
   MAVERICK — "The Pour" V13 hero (index.html only)
   Pour-only scroll film. Base styles = static poster hero (no-JS,
   reduced-motion, Save-Data, or any engine failure). Everything pinned/
   scrubbed is gated behind html.pour-enhanced, which the inline head gate
   adds pre-paint and hero-pour.js only ever removes.
   Tokens only — no raw hex (BUILD_SPEC §2).
   ========================================================================== */

/* ---------- base: static hero over the poster (all fallback modes) ------ */

.pour-hero {
  position: relative;
  background-color: var(--mav-charcoal);
  background-image:
    linear-gradient(100deg,
      rgba(20, 23, 28, .82) 0%,
      rgba(20, 23, 28, .55) 38%,
      rgba(20, 23, 28, .18) 62%,
      rgba(20, 23, 28, 0) 80%),
    var(--pour-poster);
  background-size: cover;
  background-position: center;
  color: #FFFFFF;
}

@media (max-width: 880px) {
  .pour-hero {
    background-image:
      linear-gradient(100deg,
        rgba(20, 23, 28, .82) 0%,
        rgba(20, 23, 28, .55) 48%,
        rgba(20, 23, 28, .22) 72%,
        rgba(20, 23, 28, .05) 90%),
      var(--pour-poster-sm);
  }
}

.pour-hero__stage {
  position: relative;
  min-height: 560px;
  display: flex;
  align-items: center;
  padding-block: 120px 128px;
}

.pour-hero__film,
.pour-hero__vignette {
  display: none;
}

.pour-hero__content {
  position: relative;
  z-index: 10;
  max-width: var(--maxw);
}

.pour-hero__content .hero__kicker {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .30em;
  text-indent: .30em;
  font-size: .95rem;
  color: var(--mav-blue-electric);
  margin-bottom: 14px;
}

.pour-hero__content h1 {
  max-width: 15.5ch;
  font-size: clamp(2.6rem, 7.4vw, 5.6rem);
  line-height: .94;
  overflow-wrap: break-word;
  text-wrap: balance;
  color: #FFFFFF;
  text-shadow: 0 2px 40px rgba(20, 23, 28, .35);
  margin-bottom: 20px;
}

.pour-hero__content .hero__lead {
  max-width: 560px;
  font-size: 1.06rem;
  color: rgba(255, 255, 255, .88);
  text-shadow: 0 1px 18px rgba(20, 23, 28, .45);
  margin-bottom: 30px;
}

.pour-hero__content .hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.pour-hero__content .btn--ghost {
  color: #FFFFFF;
  border-color: rgba(255, 255, 255, .85);
}

.pour-hero__content .btn--ghost:hover {
  background: rgba(255, 255, 255, .12);
  color: #FFFFFF;
}

/* ---------- enhanced: 300vh pinned scrub track ---------- */

html.pour-enhanced .pour-hero {
  height: 300vh;
  background-image: none; /* the canvas carries the picture */
}

@media (max-width: 880px) {
  html.pour-enhanced .pour-hero {
    height: 240vh;
  }
}

html.pour-enhanced .pour-hero__stage {
  position: sticky;
  top: var(--hdr, 0px);
  height: calc(100vh - var(--hdr, 0px));
  height: calc(100svh - var(--hdr, 0px));
  min-height: 0;
  padding-block: 0;
  overflow: hidden;
}

html.pour-enhanced .pour-hero__film {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}

/* scrim carries the headline, then ramps away (JS drives --scrim 1 -> .22)
   so the footage breathes once the copy has demoted */
html.pour-enhanced .pour-hero__stage::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background:
    linear-gradient(100deg,
      rgba(20, 23, 28, calc(.80 * var(--scrim, 1))) 0%,
      rgba(20, 23, 28, calc(.52 * var(--scrim, 1))) 34%,
      rgba(20, 23, 28, calc(.20 * var(--scrim, 1))) 58%,
      rgba(20, 23, 28, 0) 80%);
}

/* soft optical vignette + dissolve into the page below */
html.pour-enhanced .pour-hero__vignette {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  background:
    radial-gradient(120% 96% at 50% 44%,
      transparent 62%,
      rgba(20, 23, 28, .26) 100%),
    linear-gradient(to bottom,
      rgba(245, 247, 250, 0) 92%,
      var(--mav-bg) 100%);
}

html.pour-enhanced .pour-hero__content {
  width: 100%;
  margin-inline: auto;
  padding-inline: 24px;
  opacity: 1;
  visibility: visible;
  transform: none;
  transition:
    opacity .45s ease,
    transform .45s ease,
    visibility 0s 0s;
}

/* content demotes while the pour runs; visibility leaves the tab order so
   invisible CTAs can never take keyboard focus (WCAG 2.4.7) */
html.pour-enhanced .pour-hero--past-intro:not(.pour-hero--ended) .pour-hero__content {
  opacity: 0;
  transform: translateY(-26px);
  visibility: hidden;
  transition:
    opacity .45s ease,
    transform .45s ease,
    visibility 0s .45s;
}

/* keyboard users tabbing into the hero always get visible targets */
html.pour-enhanced .pour-hero .pour-hero__content:focus-within {
  opacity: 1;
  transform: none;
  visibility: visible;
}

/* end hold: film frozen on the final splash frame, content returns */
html.pour-enhanced .pour-hero--ended .pour-hero__stage::before {
  background:
    linear-gradient(100deg,
      rgba(20, 23, 28, .78) 0%,
      rgba(20, 23, 28, .50) 34%,
      rgba(20, 23, 28, .18) 58%,
      rgba(20, 23, 28, 0) 80%);
}

/* reduced motion: the head gate never adds pour-enhanced, so the static
   base above is the whole experience. This block is belt-and-braces for
   a runtime preference flip before JS tears down. */
@media (prefers-reduced-motion: reduce) {
  html.pour-enhanced .pour-hero {
    height: auto;
  }
  html.pour-enhanced .pour-hero__film,
  html.pour-enhanced .pour-hero__vignette {
    display: none;
  }
}