.sv-eiticker{
  --sv-eiticker-gap: 24px;
  --sv-eiticker-speed: 28s;
  --sv-eiticker-height: 60px;
  --sv-eiticker-fade: 48px;
  overflow: hidden;
  width: 100%;
}

/* Fade mask (werkt bovenop elke achtergrond) */
.sv-eiticker--fade{
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 var(--sv-eiticker-fade),
    #000 calc(100% - var(--sv-eiticker-fade)),
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 var(--sv-eiticker-fade),
    #000 calc(100% - var(--sv-eiticker-fade)),
    transparent 100%
  );
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.sv-eiticker__track{
  display: flex;
  gap: var(--sv-eiticker-gap);
  align-items: center;
  width: max-content;
  animation: svEitickerLeft var(--sv-eiticker-speed) linear infinite;
  will-change: transform;
  transform: translate3d(0,0,0);
}

.sv-eiticker--right .sv-eiticker__track{
  animation-name: svEitickerRight;
}

.sv-eiticker__item{
  flex: 0 0 auto;
  display: flex;
  align-items: center;
}

.sv-eiticker__item img{
  height: var(--sv-eiticker-height);
  width: auto;
  display: block;
  object-fit: contain;
}

.sv-eiticker__link{
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.sv-eiticker--pause:hover .sv-eiticker__track{
  animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce){
  .sv-eiticker__track{ animation: none; }
}

/* Oneindig, naadloos (2 sets in track) */
@keyframes svEitickerLeft{
  from { transform: translate3d(0,0,0); }
  to   { transform: translate3d(-50%,0,0); }
}

@keyframes svEitickerRight{
  from { transform: translate3d(-50%,0,0); }
  to   { transform: translate3d(0,0,0); }
}