/* =========================================================
   Media Slider (GLOBAL)
   - JS sätter CSS vars: --ms-interval, --ms-fade, --ms-zoom
   ========================================================= */

@keyframes kenburns {
  from { transform: scale(1) translate3d(0,0,0); }
  to   { transform: scale(var(--ms-zoom, 1.08)) translate3d(-1.5%, -1%, 0); }
}

.media-slider{
  position: absolute;
  inset: 0;
  overflow: hidden;
}

/* Slides ligger ovanpå varandra */
.media-slide{
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity var(--ms-fade, 1600ms) linear;
  will-change: opacity, transform;
  transform-origin: center center;
}

.media-slide.is-visible{
  opacity: 1;
}

/* Ken burns zoom (JS togglar is-animating för att restart:a) */
.media-slide.is-animating{
  animation-name: kenburns;
  animation-timing-function: linear;
  animation-fill-mode: both;

  /* ✅ Ingen delay => ingen "stillastående" i början */
  animation-delay: 0ms;

  /* ✅ Zoomar även under fade-out => ingen "stannar tidigt" */
  animation-duration: calc(var(--ms-interval, 8000ms) + var(--ms-fade, 1600ms));
}

/* Single image: visa, ingen fade-loop */
.media-slider.is-single .media-slide{
  opacity: 1;
  transition: none;
}
.media-slider.is-single .media-slide.is-animating{
  animation: none;
}

/* Bilden fyller ytan */
.media-slide img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .media-slide{
    transition: none !important;
  }
  .media-slide.is-animating{
    animation: none !important;
    transform: none !important;
  }
}