/* Scroll-driven build hero. All scrub rules are keyed off html.hero-scroll-on
   (set by the inline gate script before first paint). Without that class this
   file is inert and the hero renders as the static poster hero. */

.hero-scroll {
  position: relative;
}

.hero-scroll__canvas,
.hero-scroll__captions,
.hero-scroll__hint {
  display: none;
}

/* ---- Scrub mode ---- */

html.hero-scroll-on .hero-scroll {
  height: 300vh;
}

/* Pages that opt into a final-frame hold (data-hold) get extra scroll length so
   the dwell on the finished home has room without speeding up the build. */
html.hero-scroll-on .hero-scroll[data-hold] {
  height: 360vh;
}

html.hero-scroll-on .hero-scroll__stage {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  height: 100svh;
  min-height: 0;
  z-index: 1;
}

html.hero-scroll-on .hero-scroll--above .hero-scroll__stage {
  position: absolute;
  top: 0;
  bottom: auto;
}

html.hero-scroll-on .hero-scroll--below .hero-scroll__stage {
  position: absolute;
  top: auto;
  bottom: 0;
}

html.hero-scroll-on .hero-scroll__canvas {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  background: #0f1e30 url(../assets/images/hero-scroll/v1/frame-000.webp) center / cover no-repeat;
}

html.hero-scroll-on [data-hero-video] {
  display: none;
}

/* Copy beats: sub, CTAs and trust strip hold their layout space but stay
   invisible until the finale so the H1 owns the empty lot. */
/* Progressive copy reveal: elements tagged [data-reveal="<progress>"] fade and
   rise in when the scrub passes their threshold (JS toggles .is-revealed).
   The trust strip holds its layout (no translate) to avoid nudging the strip. */
html.hero-scroll-on [data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .5s ease, transform .5s ease;
}

html.hero-scroll-on .hero-rebuild__trust[data-reveal] {
  transform: none;
}

html.hero-scroll-on [data-reveal].is-revealed {
  opacity: 1;
  transform: none;
}

html.hero-scroll-on [data-cta] {
  pointer-events: none;
}

html.hero-scroll-on [data-cta].is-revealed {
  pointer-events: auto;
}

html.hero-scroll-on .hero-scroll--complete .hero-rebuild__trust {
  border-top-color: rgba(201, 159, 98, .9);
  transition: border-color .4s ease, opacity .45s ease .16s;
}

/* Stage captions: Georgia italic, lower right, one at a time. */
html.hero-scroll-on .hero-scroll__captions {
  display: block;
  position: absolute;
  right: clamp(24px, 5vw, 64px);
  bottom: 32%;
  z-index: 2;
  text-align: right;
  pointer-events: none;
}

html.hero-scroll-on .hero-scroll__caption {
  position: absolute;
  right: 0;
  bottom: 0;
  white-space: nowrap;
  font-family: Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-size: clamp(22px, 3vw, 34px);
  color: rgba(255, 255, 255, .95);
  text-shadow: 0 2px 18px rgba(15, 30, 48, .8);
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .35s ease, transform .35s ease;
}

html.hero-scroll-on .hero-scroll__caption.is-active {
  opacity: 1;
  transform: none;
}

/* Scroll hint: bottom center, fades once the scrub starts. */
html.hero-scroll-on .hero-scroll__hint {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  position: absolute;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%);
  z-index: 2;
  pointer-events: none;
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .75);
  opacity: 1;
  transition: opacity .4s ease;
}

html.hero-scroll-on .hero-scroll__hint i {
  width: 10px;
  height: 10px;
  border-right: 2px solid rgba(201, 159, 98, .9);
  border-bottom: 2px solid rgba(201, 159, 98, .9);
  transform: rotate(45deg);
  animation: hero-scroll-hint 1.6s ease-in-out infinite;
}

@keyframes hero-scroll-hint {
  0%, 100% { transform: rotate(45deg) translate(0, 0); opacity: .9; }
  50% { transform: rotate(45deg) translate(5px, 5px); opacity: .4; }
}

html.hero-scroll-on .hero-scroll--started .hero-scroll__hint {
  opacity: 0;
}

/* Belt and suspenders: reduced motion never gets hero-scroll-on from the gate,
   but if anything slips through, force the static hero. */
@media (prefers-reduced-motion: reduce) {
  html.hero-scroll-on .hero-scroll {
    height: auto;
  }
  html.hero-scroll-on .hero-scroll__stage {
    position: relative;
    height: auto;
    min-height: clamp(560px, 88vh, 880px);
  }
  html.hero-scroll-on .hero-scroll__canvas,
  html.hero-scroll-on .hero-scroll__captions,
  html.hero-scroll-on .hero-scroll__hint {
    display: none;
  }
  html.hero-scroll-on [data-hero-video] {
    display: block;
  }
  html.hero-scroll-on [data-reveal] {
    opacity: 1;
    transform: none;
    pointer-events: auto;
    transition: none;
  }
}