[data-hero-photo] {
  --hero-photo-drift: 0px;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--color-dark-brown);
}

[data-hero-photo]::before,
[data-hero-photo]::after {
  content: '';
  position: absolute;
  pointer-events: none;
}

[data-hero-photo][data-hero-photo]::before {
  inset: -12%;
  z-index: 0;
  background-image: var(--hero-photo-image);
  background-position: var(--hero-photo-position, center);
  background-size: cover;
  filter: brightness(0.8) saturate(0.92);
  transform: translate3d(0, var(--hero-photo-drift), 0) scale(1.08);
  transition: transform 700ms var(--ease-out-expo), filter 500ms var(--ease-out-expo);
  will-change: transform;
}

[data-hero-photo][data-hero-photo]::after {
  inset: 0;
  z-index: 1;
  background: var(--color-overlay);
}

[data-hero-photo][data-hero-photo] > * {
  position: relative;
  z-index: 2;
}

body[data-page-entrance] [data-hero-photo]::before {
  animation: hero-photo-page-settle 280ms var(--ease-out-expo) both;
}

body[data-page-entrance] [data-hero-photo] > * {
  animation: hero-content-page-settle 260ms var(--ease-out-expo) 35ms both;
}

@keyframes hero-photo-page-settle {
  from {
    filter: brightness(0.74) saturate(0.88);
    transform: translate3d(0, 0, 0) scale(1.11);
  }

  to {
    filter: brightness(0.8) saturate(0.92);
    transform: translate3d(0, var(--hero-photo-drift), 0) scale(1.08);
  }
}

@keyframes hero-content-page-settle {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (hover: hover) and (pointer: fine) {
  [data-hero-photo]:hover::before {
    filter: brightness(0.88) saturate(1);
    transform: translate3d(0, calc(var(--hero-photo-drift) - 3px), 0) scale(1.095);
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-hero-photo][data-hero-photo]::before {
    transform: scale(1.08);
    transition: none;
  }

  body[data-page-entrance] [data-hero-photo]::before,
  body[data-page-entrance] [data-hero-photo] > * {
    animation: none;
  }
}