/* Client logo ticker ("Trainingen en coaching gegeven bij onder meer").
   Logos are masks filled with the ink colour; a slow holographic sheen runs through them.
   Moves slowly, pauses on hover/focus, and stands still for prefers-reduced-motion. */
.clients{margin-top:clamp(40px,6vw,80px);padding-block:clamp(20px,3vw,36px) clamp(28px,4vw,48px);border-top:1px solid var(--color-rule)}
.clients-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 24px;margin-bottom:clamp(14px,2vw,22px)}
.clients-head .overline{margin:0}
.clients-head .caption{margin:0;color:var(--color-text-secondary)}
.clients-view{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.clients-track{display:flex;width:max-content;animation:clients-scroll 70s linear infinite}
.clients:hover .clients-track,.clients:focus-within .clients-track{animation-play-state:paused}
.clients-list{display:flex;align-items:center;gap:clamp(36px,5vw,64px);margin:0;padding:0 clamp(18px,2.5vw,32px);list-style:none}
.clients-list li{flex:none;display:flex;align-items:center;height:48px}
.clients-list li.client-stack{flex-direction:column;justify-content:center;gap:5px;height:auto}
.client-name.client-name-sm{font-size:11px;letter-spacing:.14em}
.client-logo,.client-name{--holo:linear-gradient(100deg,#101010 0%,#101010 38%,#5BC8F5 45%,#C77DFF 50%,#F5C26B 55%,#101010 62%,#101010 100%);opacity:.62;background:var(--holo);background-size:320% 100%;background-position:100% 0;animation:clients-sheen 9s ease-in-out infinite;animation-delay:calc(var(--i,0) * .55s)}
.client-logo{display:block;height:var(--h,30px);aspect-ratio:var(--r,3);-webkit-mask:var(--src) center/contain no-repeat;mask:var(--src) center/contain no-repeat}
.client-name{font-family:var(--font-heading);font-weight:600;font-size:clamp(16px,1.25vw,19px);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;-webkit-background-clip:text;background-clip:text;color:transparent}
@keyframes clients-scroll{to{transform:translateX(-50%)}}
@keyframes clients-sheen{0%,55%{background-position:100% 0}85%,100%{background-position:0 0}}
@media (prefers-reduced-motion:reduce){
  .clients-track{animation:none;width:auto}
  .clients-view{-webkit-mask-image:none;mask-image:none}
  .clients-list{flex-wrap:wrap;justify-content:center;row-gap:18px}
  .clients-list[aria-hidden="true"]{display:none}
  .client-logo,.client-name{animation:none;background:#101010}
}