/* IJssel Panorama Slider (front) */
.ij-panorama {
  --ij-panorama-height: 300px;
  --ij-panorama-duration: 30s;
  --ij-panorama-zoom: 200;
  width: 100%;
}

.ij-panorama__viewport{
  height: var(--ij-panorama-height);
  overflow: hidden;
  position: relative;
  width: 100%;
}

.ij-panorama__inner{
  display: flex;
  flex-wrap: nowrap;
  width: max-content;
  height: 100%;
  will-change: transform;
  animation: ij-panorama-scroll var(--ij-panorama-duration) linear infinite;
}

.ij-panorama__set{
  display: flex;
  flex-wrap: nowrap;
  height: 100%;
}

.ij-panorama__slide{
  height: 100%;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ij-panorama__slide img{
  height: 100%;
  width: auto;
  display: block;
  transform: scale(calc(var(--ij-panorama-zoom) / 100));
  transform-origin: center center;
  /* voorkomt 'witte randen' bij schaal */
  backface-visibility: hidden;
}

/* Beweeg 1 set (50%) naar links. Omdat we set + set renderen, blijft het naadloos. */
@keyframes ij-panorama-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Optioneel: pauze bij hover */
.ij-panorama:hover .ij-panorama__inner{
  animation-play-state: paused;
}

/* Respecteer voorkeur voor minder animatie */
@media (prefers-reduced-motion: reduce){
  .ij-panorama__inner{
    animation: none;
    transform: translateX(0);
  }
}