:root{
  --kb-slide-duration: 4500ms;   /* how long each slide stays visible */
  --kb-fade-duration: 1500ms;     /* crossfade overlap time */
  --kb-scale-from: 1;            /* start zoom */
  --kb-scale-to: 1.05;           /* end zoom */
}

/* Accessibility: respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  :root{
    --kb-slide-duration: 3000ms;
    --kb-fade-duration: 0ms;
    --kb-scale-from: 1;
    --kb-scale-to: 1;
  }
}

/* Layout */
.kb-hero{
  position: relative;
  height: 100%;
  width: 100%;
  overflow: hidden;
  background: #000;
}
.kb-slides{
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Crossfade base styles */
.kb-slide{
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity var(--kb-fade-duration) linear; /* linear = smoother crossfade */
  will-change: opacity;
}
.kb-slide.is-active{ opacity: 1; }
/* During overlap we DIM the outgoing slide but keep it active so its zoom continues */
.kb-slide.is-active.is-dim{ opacity: 0; }

/* Zoom animation */
.kb-slide img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(var(--kb-scale-from));
  will-change: transform;
}
@keyframes kbZoomIn{
  0%   { transform: scale(var(--kb-scale-from)); }
  100% { transform: scale(var(--kb-scale-to)); }
}
.kb-slide.is-active img{
  animation: kbZoomIn var(--kb-slide-duration) linear forwards;
}