/* Purpose: Hero section. Full-bleed video/image, soft white overlay, centred headline.
   Ported from the WV reference; mobile-first. */

.section-hero {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  width: 100%;
  overflow: hidden;
  background: var(--bg-deep);
  /* Content is top-anchored (NOT vertically centred) so the headline sits high over the
     video and never overlaps the subject — matches reference WV_Homepage.html .hero. */
}

/* Media wrap — same as Ixolyn's .fda-hero-v1-image-wrap: full-bleed absolute box that
   clips the scaling image (position:absolute; inset:0; overflow:hidden). */
.section-hero__media { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.section-hero__video,
.section-hero__img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
}
/* Video is visible from the first paint — its poster frame covers the load gap. */
.section-hero__video { opacity: 1; }
.section-hero__video.is-ready { opacity: 1; }

/* Zoom-out reveal on every page load — the hero media starts at 1.2x and settles to 1x.
   The nav + headings animate in WHILE this is scaling (see the delays below). */
.section-hero__video,
.section-hero__img {
  transform-origin: center;
  /* The image scales inside the wrap (which clips it). ease-in-out + a long 4s so the
     scale is slow and clearly visible the whole way, instead of snapping instantly. */
  animation: wv-hero-zoom 4s cubic-bezier(0.42, 0, 0.58, 1) both;
  will-change: transform;
}
@keyframes wv-hero-zoom {
  from { transform: scale(1.5); }
  to   { transform: scale(1); }
}

/* Hero intro — eyebrow, title, sub and CTAs drift up in sequence, mid-zoom.
   Slow + gentle ease (easeOutQuad) so it feels soothing, not snappy. */
@keyframes wv-hero-rise {
  from { opacity: 0; transform: translateY(34px); }
  to   { opacity: 1; transform: translateY(0); }
}
.section-hero__eyebrow,
.section-hero__title,
.section-hero__sub,
.section-hero__ctas {
  opacity: 0;
  animation: wv-hero-rise 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
.section-hero__eyebrow { animation-delay: 0.6s; }
.section-hero__title   { animation-delay: 0.9s; }
.section-hero__sub     { animation-delay: 1.25s; }
.section-hero__ctas    { animation-delay: 1.6s; }

@media (prefers-reduced-motion: reduce) {
  .section-hero__video,
  .section-hero__img { animation: none; transform: none; }
  .section-hero__eyebrow,
  .section-hero__title,
  .section-hero__sub,
  .section-hero__ctas { opacity: 1; animation: none; transform: none; }
}

.section-hero__overlay {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to bottom,
    rgba(255, 255, 255, 0.92) 0%,
    rgba(255, 255, 255, 0.55) 35%,
    rgba(255, 255, 255, 0.10) 70%,
    rgba(255, 255, 255, 0.55) 100%);
}

.section-hero__inner {
  position: relative; z-index: 2;
  max-width: var(--max-content);
  margin: 0 auto; width: 100%;
  padding: 120px 24px 88px;            /* mobile base */
  text-align: center;
  display: flex; flex-direction: column; align-items: center;
}
@media (min-width: 768px) {
  .section-hero__inner { padding: 156px 24px 160px; }
}

.section-hero__eyebrow {
  font-family: var(--font-body);
  color: var(--muted);
  margin-bottom: 28px;
  letter-spacing: 0.2em;
}

.section-hero__title {
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  color: var(--ink);
  font-size: var(--page-hero-h1);   /* 96px desktop */
  line-height: 1.0;
  letter-spacing: -0.022em;
  /* Wide enough that each editor-authored line stays whole; the 2-line break is the
     ACF newline (nl2br), so we never cap it tight enough to force a 3rd line. */
  max-width: 18em;
  text-wrap: balance;
}
.section-hero__title em { color: var(--muted); font-style: italic; }

.section-hero__sub {
  font-family: var(--font-body);
  font-size: 16px;                 /* description → 16px */
  font-weight: var(--weight-regular);
  color: var(--ink-72);            /* soft gray, readable but lighter than the heading */
  line-height: 1.6;
  max-width: 44rem;
  margin: 28px auto 0;
  text-shadow: 0 1px 14px rgba(245, 239, 224, 0.7);  /* soft cream halo lifts text off the video */
}

.section-hero__ctas {
  display: flex; gap: 16px; flex-wrap: wrap; justify-content: center;
  margin-top: 48px;
}
@media (max-width: 559px) {
  .section-hero__ctas { flex-direction: column; align-items: stretch; width: 100%; }
}
/* Hero CTAs use the unified .btn / .btn-A / .btn-B system (components.css). */