/* ==========================================================================
   Customer-logo carousel (about.html and index.html)
   Auto-scrolling strip, pauses on hover, real logos slot in via
   assets/images/clients/client-<n>.webp - falls back to a generic icon
   until a real file exists (same onload/onerror pattern used site-wide).

   Seamless-loop technique: the HTML repeats the full logo set 3 times
   (1 real + 2 aria-hidden copies) and the keyframe below scrolls exactly
   1/3 of the track's width (one set) before restarting. Only 2 copies
   would leave zero lookahead buffer once the container is wider than a
   single set (~1420px at the default item width) - the track would run
   out of content right at the loop boundary and show a blank gap. If the
   item count or width ever changes enough to make one set noticeably
   wider or narrower than typical viewport widths, keep at least 3 copies
   in the HTML and this stays correct automatically (it always scrolls
   exactly one set-width, regardless of how many copies exist).
   ========================================================================== */

.client-carousel {
  overflow: hidden;
  position: relative;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  /* Force LTR on the mask container itself (not just the track): translateX()
     is a physical (direction-agnostic) transform, but this page is dir="rtl",
     and it's the PARENT's direction that decides which edge an oversized
     in-flow child block anchors to - a rtl parent right-anchors the track,
     so shifting it further left opens a growing gap on the right instead of
     smoothly revealing more content. Setting direction here (inherited by
     the track) left-anchors it so the marquee math below works correctly.
     Content is just logos, no RTL text, so this has no visual side effect
     beyond fixing the anchor. */
  direction: ltr;
}

.client-carousel__track {
  display: flex;
  align-items: center;
  width: max-content;
  gap: 20px;
  animation: client-marquee 34s linear infinite;
}

.client-carousel:hover .client-carousel__track {
  animation-play-state: paused;
}

.client-carousel__item {
  flex: none;
  width: 160px;
  height: 88px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--idis-border);
  border-radius: var(--radius);
  background: var(--idis-white);
}

.client-carousel__logo {
  max-width: 120px;
  max-height: 46px;
  width: auto;
  height: auto;
  filter: grayscale(100%);
  opacity: 0.7;
  transition: filter var(--transition), opacity var(--transition);
}

.client-carousel__item:hover .client-carousel__logo {
  filter: grayscale(0%);
  opacity: 1;
}

.client-carousel__placeholder {
  color: #d5d9de;
  font-size: 26px;
}

@keyframes client-marquee {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-33.3334%);
  }
}

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

@media (max-width: 640px) {
  .client-carousel__item {
    width: 130px;
    height: 76px;
  }
}