/* =============================================================================
   CLIENTS  |  Scrolling client-name strip.
   HTML: index.html -> <!-- SECTION: CLIENTS -->     JS: js/clients.js
   Edit only this file when you want to change how clients looks.
   ============================================================================= */

@keyframes slide{to{transform:translateX(-50%)}}
.clients{padding:clamp(1.8rem,4vw,3rem);text-align:center;overflow:hidden}
.clients h2{font-size:clamp(1.4rem,3vw,2rem);margin-bottom:1.6rem}
.marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.track{display:flex;gap:3rem;width:max-content;animation:slide 30s linear infinite}
.track span{font-size:1.4rem;font-weight:700;letter-spacing:-.03em;color:rgba(10,10,10,.4);white-space:nowrap}
[data-theme=dark] .track span{color:rgba(255,255,255,.38)}