/**
 * Home hero — combined CSS from three source modules, all scoped under .s-hero:
 *   HeroScrollShrink.module.css  (.wrap  → .s-hero, the pin/scale wrapper root)
 *   FilmHero.module.css          (.filmHero, .copy, .texture, .fallback → .s-hero *)
 *   HeroVideo.module.css         (.media, .video, .cta → .s-hero *)
 *
 * url() image refs unchanged (inline data: URIs). @keyframes renamed hero-*.
 */

/* ── HeroScrollShrink.module.css → root .wrap becomes .s-hero ─────────── */
.s-hero {
  transform-origin: center top;
  overflow: hidden;
  will-change: transform;
}

/* ── FilmHero.module.css ─────────────────────────────────────────────── */
.s-hero .filmHero {
  position: relative;
  isolation: isolate;
  width: 100%;
  min-height: 92vh;
  overflow: hidden;
  background: var(--c-midnight);
}

/* Hero caption — visually hidden on desktop (film carries the message), a real
   block on mobile (under the letterboxed film). Base = sr-only. */
.s-hero .copy {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.s-hero .copyCta {
  display: none;
}

@media (max-width: 767px) {
  .s-hero .filmHero {
    min-height: 0;
    display: flex;
    flex-direction: column;
  }
  /* The full-viewport grain/scanlines read as noise over the stacked layout. */
  .s-hero .texture {
    display: none;
  }
  .s-hero .copy {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    padding: var(--s-10) var(--gutter) var(--s-12);
    overflow: visible;
    clip: auto;
    white-space: normal;
    display: flex;
    flex-direction: column;
    gap: var(--s-5);
    background: var(--c-midnight);
    color: var(--c-text-on-dark);
  }
  .s-hero .copy h1 {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(2rem, 8.5vw, 2.9rem);
    line-height: 1.05;
    letter-spacing: -0.02em;
    text-wrap: balance;
  }
  .s-hero .copy p {
    margin: 0;
    max-width: 42ch;
    font-size: var(--fs-base);
    line-height: var(--lh-normal);
    color: var(--c-text-on-dark-muted);
  }
  .s-hero .copyCta {
    display: inline-flex;
    margin-top: var(--s-2);
  }
}

/* ── Analog film texture overlaid on the video (CSS, not baked into the mp4) ──
   Vignette on the element, animated grain (::before), scanlines (::after). */
.s-hero .texture {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(
    120% 120% at 50% 45%,
    transparent 55%,
    rgba(5, 7, 10, 0.5) 100%
  );
}

.s-hero .texture::before {
  content: "";
  position: absolute;
  inset: -150%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
  opacity: 0.13;
  mix-blend-mode: overlay;
  animation: hero-grain 0.7s steps(1) infinite;
}

.s-hero .texture::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    0deg,
    rgba(0, 0, 0, 0.18) 0,
    rgba(0, 0, 0, 0.18) 1px,
    transparent 1px,
    transparent 3px
  );
  opacity: 0.45;
  mix-blend-mode: multiply;
}

@keyframes hero-grain {
  0% { transform: translate(0, 0); }
  10% { transform: translate(-5%, -10%); }
  20% { transform: translate(-15%, 5%); }
  30% { transform: translate(7%, -25%); }
  40% { transform: translate(-5%, 25%); }
  50% { transform: translate(-15%, 10%); }
  60% { transform: translate(15%, 0); }
  70% { transform: translate(0, 15%); }
  80% { transform: translate(3%, 35%); }
  90% { transform: translate(-10%, 10%); }
}

/* Shown only when no film/poster is configured — keeps the hero meaningful. */
.s-hero .fallback {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--s-6);
  min-height: 92vh;
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.s-hero .fallback h1 {
  font-family: var(--font-display);
  font-size: var(--fs-hero);
  line-height: 1;
  letter-spacing: -0.025em;
  max-width: 20ch;
  margin: 0;
}

.s-hero .fallback p {
  max-width: var(--max-w-prose);
  font-size: var(--fs-lg);
  color: var(--c-text-on-dark-muted);
  margin: 0;
}

/* ── HeroVideo.module.css ────────────────────────────────────────────── */
.s-hero .media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: var(--c-midnight);
}

.s-hero .video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ── Overlaid CTA (real DOM, sits over the end-card beat) ─────────────── */
.s-hero .cta {
  position: absolute;
  z-index: 3; /* above the media (0) and the film texture (1) */
  /* Anchored bottom-left to the page gutter — the film's end card is also
     bottom-left, so object-fit:cover keeps them paired. */
  left: var(--gutter);
  bottom: clamp(1.75rem, 6vh, 3.5rem);
  display: flex;
  justify-content: flex-start;
  /* Hidden + non-focusable until the end-card beat; visibility delays so it
     fades out, then drops out of the tab order. */
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--d-base) var(--e-standard),
    visibility 0s linear var(--d-base);
}
.s-hero .ctaVisible {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--d-base) var(--e-standard), visibility 0s;
}

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

/* Mobile: the 16:9 film can't fill a portrait hero without cropping its baked
   end-card, so letterbox it to its natural ratio at the top of the stack, and
   drop the overlaid CTA (FilmHero's caption block carries the Donate instead). */
@media (max-width: 767px) {
  .s-hero .media {
    position: relative;
    inset: auto;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9; /* fallback if no portrait source is configured */
  }
  /* A dedicated portrait (9:16) source — full-bleed, story-format film. */
  .s-hero .mediaPortrait {
    aspect-ratio: 9 / 16;
  }
  /* The portrait film composes its own end card bottom-left, so the overlaid
     Donate would collide with it — the sticky header carries the donate CTA on
     mobile instead. */
  .s-hero .cta {
    display: none;
  }
}