/* ===== Photo backgrounds ===== */

.hero_media {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  background: var(--brand-navy);
}

.hero_photo {
  position: absolute;
  inset: -8% 0 auto;
  width: 100%;
  height: 116%;
  max-width: none;
  object-fit: cover;
  will-change: transform;
}

.hero_scrim {
  position: absolute;
  inset: 0;
}

/* ----- hero ----- */

.is_hero .hero_photo {
  transform: translate3d(0, calc(var(--hero-p, 0) * 14%), 0) scale(calc(1.08 - var(--hero-p, 0) * 0.08));
  transform-origin: 50% 30%;
}

/* Navy from the copy side, thinning towards the photo, slightly darker at the foot. */
.is_hero .hero_scrim {
  background:
    linear-gradient(to bottom, transparent 60%, rgb(11 31 58 / 0.5) 100%),
    linear-gradient(
      100deg,
      rgb(11 31 58 / 0.94) 0%,
      rgb(11 31 58 / 0.82) 38%,
      rgb(11 31 58 / 0.45) 72%,
      rgb(11 31 58 / 0.3) 100%
    );
  opacity: calc(0.9 + var(--hero-p, 0) * 0.1);
}

@supports (animation-timeline: scroll()) {
  .is_hero .hero_photo {
    transform: none;
    animation: hero-photo linear both;
    animation-timeline: scroll(root);
    animation-range: 0 100svh;
  }

  .is_hero .hero_scrim {
    opacity: 1;
    animation: hero-scrim linear both;
    animation-timeline: scroll(root);
    animation-range: 0 100svh;
  }
}

@keyframes hero-photo {
  from {
    transform: translate3d(0, 0, 0) scale(1.08);
  }
  to {
    transform: translate3d(0, 14%, 0) scale(1);
  }
}

@keyframes hero-scrim {
  from {
    opacity: 0.9;
  }
  to {
    opacity: 1;
  }
}

/* ----- section, panel: pan while crossing the viewport ----- */

.is_section,
.is_panel {
  view-timeline: --photo block;
}

.is_section .hero_photo,
.is_panel .hero_photo {
  inset: -12% 0 auto;
  height: 124%;
}

@supports (animation-timeline: view()) {
  .is_section .hero_photo,
  .is_panel .hero_photo {
    animation: photo-pan linear both;
    animation-timeline: --photo;
    animation-range: cover;
  }
}

@keyframes photo-pan {
  from {
    transform: translate3d(0, -7%, 0);
  }
  to {
    transform: translate3d(0, 7%, 0);
  }
}

.is_section .hero_scrim {
  background: linear-gradient(
    100deg,
    rgb(11 31 58 / 0.95) 0%,
    rgb(11 31 58 / 0.88) 45%,
    rgb(11 31 58 / 0.7) 100%
  );
}

.is_panel .hero_scrim {
  background: linear-gradient(
    90deg,
    rgb(11 31 58 / 0.98) 0%,
    rgb(11 31 58 / 0.92) 45%,
    rgb(11 31 58 / 0.55) 100%
  );
}

/* ----- phones ----- */

@media (max-width: 768px) {
  .is_hero .hero_scrim {
    background:
      linear-gradient(to bottom, transparent 60%, rgb(11 31 58 / 0.5) 100%),
      linear-gradient(rgb(11 31 58 / 0.86), rgb(11 31 58 / 0.78));
  }

  /* Copy spans the whole panel on phones, so the scrim does too. */
  .is_panel .hero_scrim,
  .is_section .hero_scrim {
    background: rgb(11 31 58 / 0.9);
  }

  @keyframes hero-photo {
    from {
      transform: translate3d(0, 0, 0) scale(1.04);
    }
    to {
      transform: translate3d(0, 6%, 0) scale(1);
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero_photo,
  .hero_scrim {
    animation: none !important;
    transform: none !important;
  }
}