/* Root + defaults */
.clients-slider {
  position: relative;
  --gap: 60px;           /* space between logos */
  --logo-w: 180px;       /* max logo box width */
  --logo-h: 72px;        /* max logo box height */
  width: 100%;
  z-index: 200;
}

.clients-viewport {
  overflow: hidden;
  width: 100%;
}

.clients-track {
  display: inline-flex;          /* width grows to fit content */
  align-items: center;
  gap: var(--gap);
  width: max-content;            /* important for marquee width */
  animation: marquee var(--duration, 40s) linear infinite;
  will-change: transform;
  cursor: pointer;
}

@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }  /* half, because we duplicated items */
}

.clients-slide {
  /* Let each slide size to its content; no flex-basis */
  display: flex;
  align-items: center;
  justify-content: center;
}

.logo-box {
  /* A consistent bounding box so logos look uniform */
  width: var(--logo-w);
  height: var(--logo-h);
  display: flex;
  align-items: center;
  justify-content: center;
}

.logo-box img {
  /* Preserve aspect ratio, no distortion */
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  display: block;
}

/* Responsive adjustments */
@media (max-width: 1280px) {
  .clients-slider { --logo-w: 170px; --logo-h: 68px; --gap: 20px; }
}
@media (max-width: 1024px) {
  .clients-slider { --logo-w: 160px; --logo-h: 64px; --gap: 18px; }
}
@media (max-width: 640px) {
  .clients-slider { --logo-w: 140px; --logo-h: 60px; --gap: 16px; }
}

/* Optional: pause on hover and respect reduced motion */
.clients-track.clients-track--paused {
  animation-play-state: paused;
}
@media (prefers-reduced-motion: reduce) {
  .clients-track { animation: none; transform: none; }
}