: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 */
}
.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));
}
@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;
}

/* Dots (optional) */
.kb-dots{
  position: absolute;
  left: 0; right: 0; bottom: 1rem;
  display: flex;
  justify-content: center;
  gap: .5rem;
  z-index: 5;
}
.kb-dot{
  width: 10px; height: 10px;
  border-radius: 50%;
  background: rgba(255,255,255,.4);
  border: 1px solid rgba(255,255,255,.7);
  cursor: pointer;
}
.kb-dot.is-active{ background: #fff; }