/* Background slideshow (WordPress only). The photos sit inside .bg-video-wrap, under its
 * ::after scrim (style.css). The first is a normal <img> from header.php; bg-slideshow.js adds
 * each following photo on top, fades it in, then removes the one underneath. */
.bg-video-wrap .bg-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* The wrapper's inline poster shows for an instant; the first photo fades in over it. */
.bg-video-wrap .bg-slide.is-first {
  animation: bg-slide-in 0.9s ease-out both;
}

/* Every later photo starts invisible and fades in on top of the previous one.
 * Keep the 1.6s in step with `fade` in bg-slideshow.js. */
.bg-video-wrap .bg-slide.is-next {
  opacity: 0;
  transition: opacity 1.6s ease-in-out;
  will-change: opacity;
}
.bg-video-wrap .bg-slide.is-next.is-on {
  opacity: 1;
}

@keyframes bg-slide-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* The navy layer over the photos: style.css's scrim, with its middle raised from .28 to .5. The
 * daylight photos read much brighter behind the card than the old dusk video did (Peter, 8 Oct). */
.bg-video-wrap::after {
  background:
    linear-gradient(180deg, rgba(6,15,35,.72) 0%, rgba(6,15,35,.5) 22%, rgba(6,15,35,.5) 72%, rgba(6,15,35,.78) 100%);
}

@media (prefers-reduced-motion: reduce) {
  .bg-video-wrap .bg-slide.is-first { animation: none; }
}