/* client-logo.css - Client logo carousel component */

.client-logo {
  padding: var(--space-md) 0;
  background: var(--color-bg);
}

.client-logo .container {
  position: relative;
  max-width: 100%;
  overflow: hidden;
}

.client-logo__inner {
  --row-height: clamp(36px, 5.2vw, 64px);
  --speed-pps: 80;
  --scroll-distance: 0px;
  --duration: 30s;

  display: flex;
  align-items: center;
  gap: 1.5rem;
  width: max-content;
  height: var(--row-height);
  will-change: transform;
}

.client-logo__item {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  height: 100%;
}

.client-logo__item img {
  width: 200px;
  height: 100%;
  object-fit: contain;
  transition: filter 0.2s ease, opacity 0.2s ease, transform 0.2s ease;
}

.client-logo__inner.is-animated {
  animation: clientlogo-marquee var(--duration) linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .client-logo__inner.is-animated {
    animation: none !important;
    transform: none !important;
  }
}

@keyframes clientlogo-marquee {
  to {
    transform: translateX(calc(-1 * var(--scroll-distance)));
  }
}

@media (max-width: 767px) {
  .client-logo {
    padding-top: var(--space-lg);
  }

  .client-logo__item img {
    width: 150px;
  }
}