/* Four photos, eight seconds each, crossfading with a slow Ken Burns pan/zoom. */
.hero-band .hero-bg img.hero-slide {
  position: absolute;
  inset: 0;
  display: block;
  transform-origin: 50% 50%;
  animation: none;
}

.hero-band .hero-bg img.hero-slide:not(:first-child) {
  opacity: 0;
}

.hero-band .hero-bg .hero-overlay {
  z-index: 1;
}

@media (prefers-reduced-motion: no-preference) {
  /* Slow continuous zoom, ping-ponging so the loop never jump-cuts. */
  .hero-band .hero-bg img.hero-slide {
    animation-name: hero-slide-zoom;
    animation-duration: 18s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate;
  }

  .hero-band .hero-bg img.hero-slide:not(:first-child) {
    animation-name: hero-photo-fade, hero-slide-zoom;
    animation-duration: 32s, 18s;
    animation-timing-function: ease-in-out, ease-in-out;
    animation-iteration-count: infinite, infinite;
    animation-direction: normal, alternate;
  }

  .hero-band .hero-bg img.hero-slide:nth-child(1) {
    transform-origin: 42% 35%;
  }

  .hero-band .hero-bg img.hero-slide:nth-child(2) {
    animation-delay: 6s, 6s;
    transform-origin: 68% 42%;
  }

  .hero-band .hero-bg img.hero-slide:nth-child(3) {
    animation-delay: 14s, 14s;
    transform-origin: 28% 58%;
  }

  .hero-band .hero-bg img.hero-slide:nth-child(4) {
    animation-delay: 22s, 22s;
    transform-origin: 55% 28%;
  }
}

@keyframes hero-photo-fade {
  0%, 31.25%, 100% { opacity: 0; }
  6.25%, 25% { opacity: 1; }
}

@keyframes hero-slide-zoom {
  from { transform: scale(1); }
  to { transform: scale(1.12); }
}