/* ===== Photo Container ===== */
#photo-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #000;
}

/* ===== Photo Slides ===== */
.photo-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  will-change: transform, opacity;
}

.photo-slide.active {
  opacity: 1;
  z-index: 2;
}

.photo-slide.exiting {
  z-index: 1;
}

/* ===== Ken Burns Animations ===== */
/* Each animation provides a different pan/zoom path */

@keyframes kenBurns1 {
  0% { transform: scale(1) translate(0, 0); }
  100% { transform: scale(1.15) translate(-3%, -2%); }
}

@keyframes kenBurns2 {
  0% { transform: scale(1.1) translate(-2%, 1%); }
  100% { transform: scale(1) translate(2%, -1%); }
}

@keyframes kenBurns3 {
  0% { transform: scale(1) translate(2%, 2%); }
  100% { transform: scale(1.12) translate(-2%, 0%); }
}

@keyframes kenBurns4 {
  0% { transform: scale(1.15) translate(-1%, -2%); }
  100% { transform: scale(1.02) translate(1%, 2%); }
}

@keyframes kenBurns5 {
  0% { transform: scale(1.02) translate(3%, 0%); }
  100% { transform: scale(1.18) translate(-1%, -3%); }
}

@keyframes kenBurns6 {
  0% { transform: scale(1.12) translate(0%, 3%); }
  100% { transform: scale(1) translate(0%, -1%); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

/* Applied dynamically via JS */
.photo-slide.kb-1 { animation: kenBurns1 30s ease-in-out forwards, fadeIn 1.5s ease-in forwards; }
.photo-slide.kb-2 { animation: kenBurns2 30s ease-in-out forwards, fadeIn 1.5s ease-in forwards; }
.photo-slide.kb-3 { animation: kenBurns3 30s ease-in-out forwards, fadeIn 1.5s ease-in forwards; }
.photo-slide.kb-4 { animation: kenBurns4 30s ease-in-out forwards, fadeIn 1.5s ease-in forwards; }
.photo-slide.kb-5 { animation: kenBurns5 30s ease-in-out forwards, fadeIn 1.5s ease-in forwards; }
.photo-slide.kb-6 { animation: kenBurns6 30s ease-in-out forwards, fadeIn 1.5s ease-in forwards; }

.photo-slide.exiting {
  animation: fadeOut 1.5s ease-out forwards;
}

/* ===== No Photos Fallback ===== */
#photo-container .no-photos {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 24px;
  color: rgba(255, 255, 255, 0.3);
  font-weight: 200;
}