.kb-slider {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.kb-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.6s ease-in-out;
}

.kb-slide.active {
  opacity: 1;
}

.kb-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  will-change: transform;
}

/* Ken Burns animations — each slide gets a different pan/zoom direction */
.kb-slide.active .kb-anim-1 {
  animation: kb1 9s linear forwards;
}
.kb-slide.active .kb-anim-2 {
  animation: kb2 9s linear forwards;
}
.kb-slide.active .kb-anim-3 {
  animation: kb3 9s linear forwards;
}
.kb-slide.active .kb-anim-4 {
  animation: kb4 9s linear forwards;
}

/* Slide 1 (aerial): zoom in 100%→110%, pan toward center-right/down */
@keyframes kb1 {
  from { transform: scale(1) translate(0, 0); }
  to   { transform: scale(1.1) translate(2%, 2%); }
}

/* Slide 2 (pool): zoom in 100%→105%, pan left */
@keyframes kb2 {
  from { transform: scale(1) translate(0, 0); }
  to   { transform: scale(1.05) translate(-3%, 0); }
}

/* Slide 3 (courtyard): zoom out 110%→100%, pan right */
@keyframes kb3 {
  from { transform: scale(1.1) translate(-3%, 0); }
  to   { transform: scale(1) translate(0, 0); }
}

/* Slide 4 (beach): zoom out 110%→100%, pan up */
@keyframes kb4 {
  from { transform: scale(1.1) translate(0, 3%); }
  to   { transform: scale(1) translate(0, 0); }
}

/* Reposition the overlay relative to the slider */
.kb-slider-wrap {
  position: relative;
}

.kb-slider-wrap .global-layer {
  z-index: 10;
}