/* ============ Scroll-scrubbed construction timelapse hero ============
   A tall .scroll-hero section pins a fullscreen video whose currentTime
   is driven by scroll progress (see js/scroll-hero.js). Video is the
   lowest layer; captions sit above it; the site header stays above all.
   No full-frame overlays/tints — only a short bottom scrim for caption
   legibility. Styled with brand tokens. */

/* On the scroll-hero page the header overlays the hero (rather than taking
   flow space above it) so the timelapse sits flush at the very top of the
   viewport. Without this the hero starts below the header and the first
   ~header-height of scroll is a dead zone before the sticky pins. This rule
   is scoped to pages that load scroll-hero.css. */
.site-header {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
}

.scroll-hero {
  position: relative;
  /* Tall scroll track — each ~100vh maps to a slice of the timelapse.
     Read by JS via offsetHeight to compute progress. */
  height: 450vh;
  background: var(--raw-navy-900);
}

/* Shorter track on phones: less scroll distance, less memory pressure. */
@media (max-width: 767.98px) {
  .scroll-hero { height: 320vh; }
}

/* Reduced motion / error: collapse the dead scroll, show one frame. */
.scroll-hero.is-static { height: 100vh; }

.scroll-hero-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh; /* avoid mobile URL-bar height jumps where supported */
  overflow: hidden;
  background: var(--raw-navy-900);
}

/* Poster still beneath the video: first frame while loading, final frame
   as the reduced-motion / error fallback. */
.scroll-hero-fallback {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.scroll-hero-video {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Entrance: revealed once JS marks the hero ready. */
  opacity: 0;
  transform: scale(1.03);
  transition: opacity 1s ease, transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.scroll-hero.is-ready .scroll-hero-video {
  opacity: 1;
  transform: scale(1);
}

/* Short bottom scrim — legibility only. Never covers the build. */
/* Light touch only — the caption glass panels carry legibility, so this
   just grounds the bottom a little. Kept subtle so it doesn't read as a
   heavy dark band. */
.scroll-hero-scrim {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 1;
  height: 32%;
  pointer-events: none;
  background: linear-gradient(
    to top,
    rgb(5 15 36 / 0.34),
    rgb(5 15 36 / 0)
  );
}

/* ---- Captions ---- */
.scroll-hero-captions {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.scroll-hero-caption {
  position: absolute;
  inset: auto 0 clamp(3.5rem, 12vh, 9rem) 0;
  padding-inline: var(--inset, 1.5rem);
  text-align: center;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.scroll-hero-caption.is-visible {
  opacity: 1;
  transform: none;
}

.scroll-hero-caption p {
  display: inline-block;
  margin: 0 auto;
  max-width: 26ch;
  color: var(--raw-white);
  font-size: clamp(1.6rem, 3.3vw, 2.6rem);
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -0.02em;
  text-wrap: balance;
  /* Subtle glass panel so the narration stays readable over any frame —
     bright sky, pale framing, or dark night — without a heavy overlay. */
  padding: 0.5em 0.85em;
  border-radius: 16px;
  background: rgb(5 15 36 / 0.4);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 10px 40px rgb(5 15 36 / 0.28);
  text-shadow: 0 1px 3px rgb(0 0 0 / 0.55);
}

.scroll-hero-caption .accent { color: var(--raw-teal-300); }

/* CTA buttons that land with the final narration line over the finished home.
   The captions layer is pointer-events:none, so re-enable it on the buttons. */
.scroll-hero-cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 1.4rem;
  pointer-events: auto;
}

/* The secondary CTA needs light-on-dark treatment to read over the video —
   the default .btn-secondary uses dark text for light surfaces. */
.scroll-hero-cta .btn-secondary {
  color: var(--raw-white);
  border-color: rgb(255 255 255 / 0.55);
  background: rgb(255 255 255 / 0.08);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.scroll-hero-cta .btn-secondary:hover {
  color: var(--raw-white);
  border-color: rgb(255 255 255 / 0.85);
  background: rgb(255 255 255 / 0.16);
}

/* ---- Scroll cue (fades out once scrubbing begins) ---- */
.scroll-hero-cue {
  position: absolute;
  inset: auto 0 clamp(1.25rem, 3vh, 2rem) 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  color: rgb(255 255 255 / 0.82);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  pointer-events: none;
  transition: opacity 0.5s ease;
}

.scroll-hero.is-scrolled .scroll-hero-cue { opacity: 0; }

.scroll-hero-cue span {
  width: 22px;
  height: 34px;
  border: 2px solid rgb(255 255 255 / 0.55);
  border-radius: 12px;
  position: relative;
}

.scroll-hero-cue span::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 6px;
  width: 3px;
  height: 7px;
  margin-left: -1.5px;
  border-radius: 2px;
  background: var(--raw-teal-300);
  animation: scroll-hero-cue 1.6s ease-in-out infinite;
}

@keyframes scroll-hero-cue {
  0%, 100% { transform: translateY(0); opacity: 1; }
  50% { transform: translateY(9px); opacity: 0.35; }
}

/* ---- Loading state ---- */
.scroll-hero-loader {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  place-items: center;
  background: var(--raw-navy-900);
  transition: opacity 0.5s ease;
}

.scroll-hero.is-ready .scroll-hero-loader {
  opacity: 0;
  pointer-events: none;
}

.scroll-hero-spinner {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 3px solid rgb(255 255 255 / 0.22);
  border-top-color: var(--raw-teal-300);
  animation: scroll-hero-spin 0.8s linear infinite;
}

@keyframes scroll-hero-spin {
  to { transform: rotate(360deg); }
}

/* Honor reduced-motion for the incidental UI animations too. */
@media (prefers-reduced-motion: reduce) {
  .scroll-hero-video { transition: opacity 0.4s ease; transform: none; }
  .scroll-hero.is-ready .scroll-hero-video { transform: none; }
  .scroll-hero-cue span::after,
  .scroll-hero-spinner { animation: none; }
  .scroll-hero-caption { transition: opacity 0.4s ease; transform: none; }
}