/* ============================================================
   Full-width homepage video hero — sits above the existing .hero
   section. Kept in its own file so styles.css stays untouched/diffable.
   ============================================================ */

.hero-video-section {
  position: relative;
  width: 100%;
  min-height: min(88vh, 780px);
  overflow: hidden;
  display: flex;
  align-items: center;
  background: var(--brand-deep, #12325E);
}

/* ---- Background layer (fallback base + optional video stack) ---- */
.hero-video-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

/* Desktop/mobile stacks are both rendered; only one is shown (and, per
   hero-video.js, only one actually plays) at a time. */
.hero-video-stack {
  position: absolute;
  inset: 0;
}
.hero-video-stack--mobile {
  display: none;
}

.hero-fallback-gradient,
.hero-fallback-image {
  position: absolute;
  inset: 0;
}
.hero-fallback-gradient {
  background: var(--grad-brand, linear-gradient(120deg, #12325E 0%, #1F4E8C 45%, #2E75B6 100%));
}
.hero-fallback-image {
  background-size: cover;
  background-position: center;
}

.hero-bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1s ease;
  pointer-events: none; /* no controls, no accidental interaction */
}
.hero-bg-video.is-active { opacity: 1; }

/* Dark scrim for text legibility, plus the same soft fade into the
   section below that the rest of the site's page-heroes use. */
.hero-video-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(100deg, rgba(9, 25, 47, 0.62) 0%, rgba(9, 25, 47, 0.34) 48%, rgba(9, 25, 47, 0.15) 100%),
    linear-gradient(180deg, rgba(9, 25, 47, 0.1) 0%, rgba(9, 25, 47, 0) 55%, rgba(255, 255, 255, 1) 100%);
  pointer-events: none;
}

/* ---- Foreground content ---- */
.hero-video-overlay {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: var(--space-8) 0 var(--space-9);
}

.hero-video-overlay-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: var(--space-7);
  align-items: center;
}

.hero-video-copy h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(26px, 2.9vw, 40px);
  line-height: 1.18;
  letter-spacing: -0.01em;
  color: #fff;
  text-shadow: 0 4px 28px rgba(0, 0, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.35);
  margin: 0 0 var(--space-4);
  max-width: 30ch;
}
.hero-video-title-accent {
  display: inline-block;
  /* Static golden gradient — no animation/sweep. */
  background: linear-gradient(120deg, #C5972E 0%, #E8B94A 30%, #FBE7A8 50%, #E8B94A 70%, #C5972E 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* The h1's shadow must not carry into the accent: with background-clip:text
     the gradient IS the element's background, and text-shadow paints above the
     background — so an inherited shadow lands on top of the gold and dulls it,
     rather than sitting behind the glyphs as it does for the white text. */
  text-shadow: none;
}
/* The h1/.lead/.hero-cta entrance is now driven by GSAP
   (public/assets/js/hero-title-reveal.js) — a per-line masked reveal
   sequenced with the paragraph/buttons, instead of the plain CSS
   rise-in fade this used to be. Elements stay visible by default here
   (no opacity:0) so the hero is never stuck invisible if the CDN
   script fails to load. */

.hero-video-copy .lead {
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.25);
  font-size: clamp(16px, 1.7vw, 20px);
  max-width: 50ch;
}

/* Right-hand column: the 3D character stage on top, the pricing card
   docked compactly below it. */
.hero-video-visual {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  min-width: 0;
}

.hero-video-card.hero-card {
  margin-top: 0;
  margin-left: auto;
  margin-right: 0;
  max-width: 340px;
}

/* ---- Hero pricing-card carousel: cycles through the featured plans ---- */
.hero-card-carousel {
  position: relative;
  display: grid;
  padding-bottom: var(--space-6);
}
.hero-card-carousel .hero-card {
  grid-area: 1 / 1;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s var(--ease-in), transform 0.6s var(--ease-in);
}
.hero-card-carousel .hero-card.is-active {
  opacity: 1;
  pointer-events: auto;
  transform: none;
}

/* Rotating transition types — the carousel's own class picks which one
   the *next* card enters with, cycling fade -> slide -> scale -> fade. */
.hero-card-carousel.transition-slide .hero-card { transform: translateX(36px); }
.hero-card-carousel.transition-slide .hero-card.is-active { transform: translateX(0); }

.hero-card-carousel.transition-scale .hero-card { transform: scale(0.92); }
.hero-card-carousel.transition-scale .hero-card.is-active { transform: scale(1); }

.hero-card-dots {
  position: absolute;
  left: 50%;
  bottom: var(--space-2);
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 1;
}
.hero-card-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(31, 78, 140, 0.25);
  cursor: pointer;
  transition: background 0.3s var(--ease), transform 0.3s var(--ease);
}
.hero-card-dot.is-active {
  background: var(--brand-primary);
  transform: scale(1.35);
}

@media (prefers-reduced-motion: reduce) {
  .hero-card-carousel .hero-card {
    transition: none;
  }
}

@media (max-width: 960px) {
  .hero-video-overlay-grid {
    grid-template-columns: 1fr;
  }
  .hero-video-card.hero-card {
    margin-left: 0;
    max-width: 420px;
  }
}

@media (max-width: 640px) {
  /* Mobile: the video is fully visible, full-width, at the top of the
     page (nothing covers it at rest), with the copy/CTA/wizard panel
     laid out normally BELOW it. The video is then pinned in place with
     `position: sticky`, so as the user scrolls, that panel slides up
     and over the stationary video. Pure CSS — no JS involved.

     The video's box keeps its own capped aspect-ratio size, decoupled
     from the (much taller, because of the wizard) panel's height on
     purpose — letting it stretch to match that content was an earlier
     bug (badly cropped/zoomed square video via object-fit:cover). */
  .hero-video-section {
    display: block;
    min-height: 0;
    overflow: visible; /* the base rule's `overflow: hidden` is an ancestor
                          of the video and would disable sticky on it */
  }
  .hero-video-bg {
    position: sticky;
    inset: auto; /* must come BEFORE `top` — as a shorthand it would
                    otherwise reset the sticky offset back to auto */
    top: var(--header-h); /* pins flush under the fixed site header */
    width: 100%;
    aspect-ratio: 1 / 1;
    max-height: calc(100vh - var(--header-h)); /* guards short/landscape viewports */
    z-index: 0;
    overflow: hidden;
    isolation: isolate;
    /* NOTE: `transform: translateZ(0)` deliberately omitted here — a
       transform on the sticky element itself can interfere with sticky in
       some engines. It originally worked around video-layer bleed-through;
       the pause-when-offscreen IntersectionObserver in hero-video.js
       already covers that. Re-add only if bleed-through reappears. */
  }
  .hero-video-bg::after {
    /* Light bottom fade only — at rest no text sits over the video, so it
       should read clean and bright rather than scrimmed down. */
    background: linear-gradient(180deg, rgba(9, 25, 47, 0) 62%, rgba(9, 25, 47, 0.38) 100%);
  }
  .hero-video-overlay {
    /* No negative margin — the panel starts BELOW the video so the video
       is fully visible at scroll 0. Sticky then holds the video in place
       while this panel scrolls up over it. Kept semi-transparent so the
       video stays faintly visible through it.

       `backdrop-filter: blur()` was considered here for extra text
       contrast, but blurring a live <video> backdrop every frame is
       costly on mobile GPUs for a fairly subtle gain. These alphas are
       instead tuned high enough to keep the white copy legible over any
       video frame on their own. */
    padding: var(--space-6) 0 var(--space-8);
    background: linear-gradient(160deg, rgba(14, 36, 64, 0.88) 0%, rgba(18, 50, 94, 0.89) 60%, rgba(23, 60, 110, 0.88) 100%);
  }
  .hero-video-stack--desktop {
    display: none;
  }
  .hero-video-stack--mobile {
    display: block;
  }
  .hero-video-stack--mobile .hero-bg-video {
    object-fit: cover;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-bg-video {
    display: none;
  }
}