/*
 * Flamingo 5 — Hero (Video)
 *
 * Full-bleed hero video. The chevron overlay is composited into the video clip
 * itself, so there is NO CSS clip-path/mask here — the clip plays edge to edge
 * on the dark section and the chevron animates as authored.
 */

.flm-f5hero {
  padding-inline: 0;            /* full-bleed; no 390px overflow */
  background-color: var(--wp--preset--color--surface-deep);
  font-size: 0;                /* kill inline-element whitespace under the video */
}

.flm-f5hero__video {
  display: block;
  width: 100%;
  height: auto;
  /* Reserve the box before the clip's dimensions arrive. Without this the
     element is 0px tall for ~1s, so the Flamingo 5 icons below render at the
     top of the page and then get shoved down when the video pops in — the
     "glitchy loading, icons show then the chevron goes" report (BugHerd #183;
     measured CLS 0.395 before / ~0 after). Source clip is 16:9. */
  aspect-ratio: 16 / 9;
  /* Cap the hero below full-screen so there's a clear "scroll down" cue
     (BugHerd #64). max-height only bites on wide screens where the 16:9 clip
     would otherwise fill the viewport; on phones the natural (shorter) height
     stays, so nothing is over-cropped. object-fit:cover keeps it full-bleed. */
  /* 74svh (was 82vh): the "Welcome to the Flamingo 5" heading now peeks into
     the first viewport (BugHerd g30638354). */
  max-height: 74svh;
  object-fit: cover;
  object-position: center;
}