/* ==========================================================================
   Klantenslider — restant

   De beweging zit in de builder: Divi's animatie-optie met stijl "slide",
   herhaling "loop" en snelheidscurve "linear". Ook het verbergen van de
   overloop, het wit uitvullen van de logo's en het raster van vijf kolommen
   staan daar. Hieronder alleen wat Divi niet als instelling aanbiedt.
   ========================================================================== */

/* 1. Vervaagde randen, zodat logo's niet hard afgesneden in beeld komen.
      Divi kent geen maskering op een element. Het meegroeien en de ondergrens
      van nul staan wel in de builder, onder Formaat op de groep "Venster". */
.kit-marquee {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 60px, #000 calc(100% - 60px), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 60px, #000 calc(100% - 60px), transparent 100%);
}

/* 2. s3 heeft een bredere vervaging dan de smallere banden. */
.kit-clients--section .kit-marquee {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 70px, #000 calc(100% - 70px), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 70px, #000 calc(100% - 70px), transparent 100%);
}

/* 3. Een Divi-kolom is een flex-item dat zich naar zijn inhoud voegt; zonder
      dit groeit de baan de pagina uit en ontstaat horizontale scroll.
      Let op: dit mag NIET op de bewegende baan zelf. Die moet zijn volle
      natuurlijke breedte houden, want de verschuiving wordt daaruit berekend:
      een --kit-sets-de deel ervan, oftewel precies een reeks. Knijp je de baan
      af, dan klopt die afstand niet meer en springt hij zichtbaar terug. */
.kit-clients .et_pb_column,
.kit-clients .et_pb_group.kit-marquee { min-width: 0; max-width: 100%; }

.kit-marquee .et_animated {
  width: max-content !important;
  max-width: none !important;
  flex: 0 0 auto;
}

/* 4. De afgelegde weg. Divi's eigen slideLeft is een intro-animatie en
      verschuift 100% van de elementbreedte; voor een band is dat te ver, want
      dan schuift de baan helemaal uit beeld voor hij terugspringt. Een band
      mag precies een reeks opschuiven - dan valt de sprong samen met de
      volgende kopie en is hij onzichtbaar.

      --kit-sets is het aantal reeksen dat marquee.js heeft neergezet. Duur,
      curve en herhaling komen nog gewoon uit de builder. */
@keyframes kit-marquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(calc(-100% / var(--kit-sets, 2)), 0, 0); }
}

/* De baan naar links laten lopen met die keyframe, in plaats van
      Divi's intro-animatie. Divi's script zet ook een beginpositie als inline
      stijl; zolang de animatie loopt wint die van de inline transform.

      De herhaling zelf komt uit assets/css/divi-aanvullingen.css. */
.kit-marquee .et_animated {
  animation-name: kit-marquee;
  animation-direction: normal;
}

/* 5. Streepje voor de bovenkop in s3. */
.kit-eyebrow__dash {
  display: inline-block;
  width: 30px;
  height: 4px;
  margin-right: 10px;
  vertical-align: middle;
  background: #E6551E;
}

/* 6. Divi's animatie blijft ook lopen wanneer de bezoeker beweging heeft
      uitgezet; die voorkeur respecteren we alsnog. */
@media (prefers-reduced-motion: reduce) {
  /* transform er ook af: zonder animatie blijft anders de beginpositie staan
     die Divi's script inline zet, en is de baan uit beeld geschoven. */
  .kit-marquee .et_animated {
    animation: none !important;
    transform: none !important;
  }
}