/* ============================================================
   Hero scrub stage — index.html only
   ============================================================ */

.hero-pin{
  position:relative;
  /* 580vh - 100vh viewport = 480vh of scroll. Band ranges in index.html are
     fractions of that: bands 2 and 3 each take 0.354 -> ~1.7 screens apiece. */
  height:580vh;
}
.hero-stage{
  position:fixed; top:0; left:0;
  width:100%; height:100vh;
  overflow:hidden;
  background:var(--canvas-deep);
  z-index:0;
}
.page-body{
  position:relative;
  z-index:2;
  background:var(--canvas);
}

/* ============================================================
   EXPERIMENTAL - hero bleed-through
   .page-body is normally an opaque curtain that hides the fixed stage the
   moment the hero ends. Here it starts clear and resolves to solid before the
   body copy, so the port footage carries through the stat bar and first
   heading. A gradient's final stop extends to the bottom of the box, so one
   declaration covers both the fade and the solid remainder.
   TO REVERT: delete this block. The rule above restores the hard cut.
   ============================================================ */
.page-body{
  /* Stops are tuned to the content: the stat bar occupies 0-94px and the first
     paragraph starts at ~412px. Solid lands at 390px so body copy never sits on
     moving footage, while the stat bar still reads against the port. */
  background:linear-gradient(to bottom,
    rgba(42,26,71,0)   0,
    rgba(42,26,71,.24) 80px,
    rgba(42,26,71,.58) 200px,
    rgba(42,26,71,.88) 310px,
    var(--canvas)      390px);
}
/* over footage rather than flat colour, these need their own contrast */
.page-body > .stat-bar{
  text-shadow:0 1px 3px rgba(5,2,8,.9), 0 2px 12px rgba(5,2,8,.7);
  border-top-color:rgba(217,178,115,.34);
}

/* Scroll-phased entrance, matching the hero bands' language. Defaults to 1 so
   the copy is visible if the script never runs (mobile gate, JS off). */
.phase-in{
  --pk:clamp(0,var(--k,1) * 1.5,1);
  opacity:var(--pk);
  transform:translateY(calc((1 - var(--pk)) * 34px));
}
.phase-in .brand-cred-panel{
  --ck:clamp(0,(var(--k,1) - .2) * 2.2,1);
  opacity:var(--ck);
  transform:translateY(calc((1 - var(--ck)) * 26px));
}
@media (prefers-reduced-motion: reduce){
  .phase-in, .phase-in .brand-cred-panel{ opacity:1 !important; transform:none !important; }
}
.site-footer{
  position:relative;
  z-index:2;
}

/* The source footage is graded very dark. Poster and video carry the identical
   filter so the handoff at canplay is invisible. */
.hero-stage video,
.hero-poster{
  filter:brightness(1.32) contrast(.96) saturate(1.06);
}

.hero-stage video{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  opacity:0;
  transition:opacity .6s var(--ease-soft);
  will-change:transform;
  transform:translate3d(0,0,0);
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}
.hero-stage.video-ready video{ opacity:1; }

.hero-poster{
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  transition:opacity .6s var(--ease-soft);
}
.hero-stage.video-ready .hero-poster{ opacity:0; }

/* global base scrim */
.hero-scrim{
  position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse 120% 90% at 50% 45%, rgba(31,19,57,0) 44%, rgba(31,19,57,.28) 100%);
}

/* loading ring */
.hero-ring{
  position:absolute; top:50%; left:50%; width:48px; height:48px;
  transform:translate(-50%,-50%);
  color:var(--gold); z-index:5;
  transition:opacity .4s var(--ease-soft);
}
.hero-stage.video-ready .hero-ring,
.hero-stage.video-failed .hero-ring{ opacity:0; pointer-events:none; }

.hero-scroll-cue{
  position:absolute; bottom:36px; left:50%; transform:translateX(-50%);
  color:var(--text-secondary); z-index:5;
  display:flex; flex-direction:column; align-items:center; gap:8px;
  font-family:var(--font-mono); font-size:.68rem; letter-spacing:.18em; text-transform:uppercase;
  opacity:0; transition:opacity .6s var(--ease-soft) .3s;
}
.hero-stage.video-ready .hero-scroll-cue,
.hero-stage.video-failed .hero-scroll-cue{ opacity:.8; }
.hero-scroll-cue svg{ width:16px; height:22px; animation:cuebob 2.4s ease-in-out infinite; }
@keyframes cuebob{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(6px);} }
@media (prefers-reduced-motion: reduce){ .hero-scroll-cue svg{ animation:none; } }

/* ---------- Caption bands ---------- */
.band{
  position:absolute; inset:0;
  display:flex; align-items:center;
  padding:72px 5vw 200px; /* 72px top clears the fixed nav; heavier bottom lifts the centered block upward */
  opacity:0;
  pointer-events:none;
}
/* Local scrim behind the caption copy. Deliberately stronger than the footage
   needs on its own: the stage now carries a brightness filter, which eats the
   contrast white text was relying on. */
.band::before{
  content:""; position:absolute; inset:-4%; pointer-events:none;
  opacity:calc(.25 + .75 * var(--k,1));
  background:radial-gradient(ellipse 74% 62% at 50% 50%, rgba(15,7,20,.62) 0%, rgba(15,7,20,.42) 46%, rgba(15,7,20,0) 76%);
}
.band-inner{
  position:relative; max-width:44ch;
  transform:translateY(calc(var(--lp,0) * -90px));
  will-change:transform;
}
.band[data-align="right"] .band-inner{ margin-left:auto; text-align:right; }
.band[data-align="center"]{ justify-content:center; text-align:center; }
.band[data-align="center"] .band-inner{ max-width:56ch; }

/* The nav is fixed over the stage, so centring in the full viewport puts the
   kicker behind it - badly so on short windows. Reserve the bar's height and
   centre the drift on rest rather than pulling only upward. */
.band[data-align="center"]{
  padding-top:clamp(64px,9vh,112px);
}
/* The leading constant nudges the block down off the nav; padding only moves a
   centred flex item half a pixel per pixel, a transform moves it 1:1. */
.band[data-align="center"] .band-inner{
  transform:translateY(calc(30px + (0.5 - var(--lp,0)) * 64px));
}

/* On a short window the centre band's block is taller than the space left under
   the nav, so it starts out already clipped and no amount of drift tuning helps.
   Scale the type and the gaps down until it fits. */
@media (max-height:760px){
  .band h2{ font-size:clamp(1.5rem,3.3vw,2.25rem); }
  .band .band-sub{ font-size:1rem; margin-top:.5em; }
  .band .band-kicker{ margin-bottom:.5em; }
  .band .band-cta{ margin-top:1.1em; }
  .hero-creed{ font-size:clamp(.95rem,1.7vw,1.2rem); margin-top:.5em; }
  .band[data-align="center"]{ padding-top:clamp(48px,7vh,72px); }
  /* Short windows need a bigger push and a shorter travel: there is simply less
     room between the nav and the fold. */
  .band[data-align="center"] .band-inner{
    transform:translateY(calc(70px + (0.5 - var(--lp,0)) * 24px));
  }
}

.band h2{
  font-size:clamp(1.9rem,4.6vw,3.4rem);
  text-shadow:var(--tshadow);
  margin:0;
}
.band .band-kicker{
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--gold); text-shadow:var(--tshadow); display:inline-block; margin-bottom:.8em;
}
.band .band-sub{
  font-size:clamp(1rem,1.6vw,1.2rem); color:var(--text-secondary);
  text-shadow:var(--tshadow); max-width:42ch; margin:.7em 0 0;
}
.band .band-cta{ margin-top:1.6em; }

/* small italic scripture quote (band 1), distinct from the main tagline */
.band .hero-quote{
  font-family:var(--font-display);
  font-style:italic;
  font-size:clamp(1rem,1.8vw,1.3rem);
  line-height:1.4;
  color:var(--text-secondary);
  text-shadow:var(--tshadow);
  max-width:32ch;
  margin:.6em 0 0;
}

/* ---------- Band 2: headline + review column ---------- */
.band-reviews .band-inner{
  max-width:none; width:100%;
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);
  gap:clamp(28px,5vw,72px);
  align-items:center;
  /* This band runs ~1.7 screens, so the shared -90px drift reads as almost
     static. Travel is widened, but centred on the resting position (+70 to -70)
     rather than pulling only upward — a one-way drift of this size slides the
     first card up behind the fixed nav by the end of the band. */
  transform:translateY(calc((0.5 - var(--lp,0)) * 140px));
}
/* Creed line under the band-2 headline. Arrives after it, on the same --k. */
.hero-creed{
  font-family:var(--font-display);
  font-style:italic;
  font-size:clamp(1.05rem,2vw,1.6rem);
  line-height:1.35;
  color:var(--gold);
  text-shadow:var(--tshadow);
  margin:.7em 0 0;
  max-width:26ch;
  --crk:clamp(0,(var(--k,0) - .34) * 2.6,1);
  opacity:var(--crk);
  transform:translateY(calc((1 - var(--crk)) * 16px));
}
@media (prefers-reduced-motion: reduce){
  .hero-creed{ opacity:1; transform:none; }
}

.review-stack{
  list-style:none; margin:0 0 0 auto; padding:0;
  display:flex; flex-direction:column; gap:13px;
  width:100%; max-width:440px;
}
.review-card{
  background:rgba(59,39,101,.58);
  border:1px solid var(--gold-soft);
  border-radius:10px;
  padding:15px 18px;
  box-shadow:0 14px 34px rgba(0,0,0,.4);
  --kc:clamp(0,(var(--k,0) - var(--th,0)) * 3.4,1);
  opacity:var(--kc);
  transform:translateY(calc((1 - var(--kc)) * 20px));
}
.review-stars{ display:flex; gap:3px; margin-bottom:.55em; }
.rs{
  width:15px; height:15px; display:block; fill:var(--gold);
  --sc:clamp(0,(var(--k,0) - var(--th,0) - var(--si,0)) * 9,1);
  opacity:var(--sc);
  transform:scale(calc(.35 + .65 * var(--sc))) rotate(calc((1 - var(--sc)) * -40deg));
}
.review-text{
  margin:0 0 .55em; font-size:.92rem; line-height:1.5;
  color:var(--text-primary); text-shadow:0 1px 3px rgba(5,2,8,.8);
}
.review-by{
  margin:0; font-family:var(--font-mono); font-size:.66rem;
  letter-spacing:.12em; text-transform:uppercase; color:var(--gold);
}
.review-by span{ color:var(--text-dim); }

/* below this the two columns get too tight; keep the headline, drop the cards */
@media (max-width:1040px){
  .band-reviews .band-inner{ grid-template-columns:1fr; }
  .review-stack{ display:none; }
}

/* word / char split spans */
.band .w{ display:inline-block; }
.band .c{ display:inline-block; }

/* entrance: drift-down (echoes the descent), word-level only to keep this light on older hardware */
.entrance-drift .w{
  --kc:clamp(0,(var(--k,0) - var(--th,0))*2.6,1);
  opacity:var(--kc);
  transform:translateY(calc((1 - var(--kc)) * -26px));
}

/* entrance: blur-to-sharp (echoes mist clearing) */
.entrance-blur{ position:relative; }
.entrance-blur .soft{
  position:absolute; inset:0; filter:blur(10px);
  opacity:calc(1 - var(--k,0));
}
.entrance-blur .sharp{ opacity:var(--k,0); }

/* entrance: settle stagger (headline rise, subline fade, cta fade) */
.entrance-settle .w{
  --kc:clamp(0,(var(--k,0) - var(--th,0))*2.8,1);
  opacity:var(--kc);
  transform:translateY(calc((1 - var(--kc)) * 22px));
}
.entrance-settle .band-sub{
  opacity:clamp(0,(var(--k,0) - .55)*4,1);
  transform:translateY(calc((1 - clamp(0,(var(--k,0) - .55)*4,1)) * 14px));
}
.entrance-settle .band-cta{
  opacity:clamp(0,(var(--k,0) - .7)*5,1);
  transform:translateY(calc((1 - clamp(0,(var(--k,0) - .7)*5,1)) * 14px));
}

@media (prefers-reduced-motion: reduce){
  .band-inner, .band .c, .band .w, .review-card, .rs, .entrance-blur .soft, .entrance-blur .sharp, .entrance-settle .band-sub, .entrance-settle .band-cta{
    opacity:1 !important; transform:none !important; filter:none !important;
  }
}

/* ---------- Static hero (five gates) ---------- */
.hero-static{
  display:none;
  position:relative; height:100vh; min-height:560px;
  background-size:cover; background-position:center;
  align-items:flex-end;
}
.hero-static::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(24,14,44,.60) 0%, rgba(24,14,44,.18) 55%, rgba(24,14,44,.05) 100%);
}
.hero-static-inner{ position:relative; padding:0 24px 64px; max-width:640px; }
.hero-static .kicker{ text-shadow:var(--tshadow); }
.hero-static h1{ text-shadow:var(--tshadow); }
.hero-static p{ text-shadow:var(--tshadow); color:var(--text-secondary); }

@media (max-width:720px),
       (orientation:portrait) and (max-width:1024px),
       (orientation:portrait) and (pointer:coarse),
       (orientation:landscape) and (pointer:coarse) and (max-height:560px){
  .hero-pin{ display:none; }
  .hero-static{ display:flex; }
}
@media (prefers-reduced-motion: reduce){
  .hero-pin{ display:none; }
  .hero-static{ display:flex; }
}
@media (max-height:560px){
  .hero-scroll-cue, .hero-ring{ display:none; }
}