/* ============================================
   CLIENT LOGO MARQUEE
   Infinite CSS Scroll Animation
   ============================================ */

.marquee-section {
  padding: var(--section-gap-sm) 0;
  border-top: 1px solid var(--glass-border);
  border-bottom: 1px solid var(--glass-border);
  background-color: var(--black); /* Always dark bg for monochrome logos */
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
  width: 100vw;
  margin-left: 50%;
  transform: translateX(-50%);
}

.marquee-container {
  display: flex;
  width: fit-content;
  animation: scrollMarquee 100s linear infinite; /* Slowed down for long list */
  white-space: nowrap;
}

/* Pause on hover for readability */
.marquee-container:hover {
  animation-play-state: paused;
}

.marquee-track {
  display: flex;
  align-items: center;
  gap: 4vw; /* Responsive gap */
  padding-right: 4vw;
}

.marquee-item {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: clamp(24px, 4vw, 42px);
  letter-spacing: var(--track-section);
  text-transform: uppercase;
  color: var(--w-20); /* Subdued light grey */
  transition: color var(--dur-fast) var(--ease-standard);
  cursor: default;
}

.marquee-item:hover {
  color: var(--w-100);
}

@keyframes scrollMarquee {
  0% { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(-50%, 0, 0); } /* We duplicate the track, so -50% shifts it exactly one track length */
}