.slide-photos {
  padding: 0;
  background: #000;
}

.slide-photos .photo-stage {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

/* Each crossfade layer holds a blurred backdrop + a sharp contained image.
   The whole layer fades opacity 0↔1 to crossfade between photos. */
.slide-photos .photo-layer {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 800ms ease-in-out;
  will-change: opacity;
}

.slide-photos .photo-layer.is-front { opacity: 1; }

/* Blurred backdrop fills the screen with the image's own colors so a
   non-16:9 photo doesn't sit on stark black bars. Scaled up so the blur
   doesn't show a hard edge against the viewport bounds. */
.slide-photos .photo-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: blur(40px) brightness(0.55) saturate(1.1);
  transform: scale(1.15);
  will-change: filter, transform;
}

/* Sharp foreground — the actual photo, contained so nothing is cropped.
   Ken Burns zoom applies here only. */
.slide-photos .photo-fg {
  position: absolute;
  inset: 0;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  transform-origin: center;
  animation: photo-kenburns 12s ease-out forwards;
  will-change: transform;
}

@keyframes photo-kenburns {
  from { transform: scale(1.0); }
  to   { transform: scale(1.10); }
}

.slide-photos .photo-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 70%, rgba(0,0,0,0.45) 100%);
}

.slide-photos .photo-title {
  position: absolute;
  top: 4vh;
  right: 5vw;
  max-width: 50vw;
  color: #fff;
  font-size: 2.4vw;
  font-weight: 700;
  letter-spacing: -0.005em;
  text-align: right;
  pointer-events: none;
  opacity: 0;
  transition: opacity 800ms ease-in-out;

  -webkit-text-stroke: 2px #000;
  text-shadow:
    -2px -2px 0 #000,
     2px -2px 0 #000,
    -2px  2px 0 #000,
     2px  2px 0 #000,
     0 2px 12px rgba(0, 0, 0, 0.6);
  paint-order: stroke fill;
}

.slide-photos .photo-title.is-front { opacity: 1; }
.slide-photos .photo-title:empty { display: none; }