:root{
  --logo-height: 64px;
  --logo-max-width: 240px;
  --gap: 2rem;
  --sequence-gap: 1rem;
  --marquee-speed-px-per-sec: 50; /* slower by default */
}

/* Container */
.marquee { width:100%; overflow:hidden; }

/* Track */
.marquee-track {
  display:flex;
  width: max-content;
  align-items:center;
  gap: 0;
  will-change: transform;
  transform: translateZ(0);
}

/* Sequence block (one full set) */
.marquee-content {
  display:flex;
  gap: var(--gap);
  align-items:center;
  white-space: nowrap;
  padding: 1rem 0;
}

/* spacer that sits at end of each .marquee-content */
.marquee-spacer {
  flex: 0 0 var(--sequence-gap);
  width: var(--sequence-gap);
  height: 1px;              /* visually invisible but keeps box in layout */
  pointer-events: none;
  display: block;
}

/* logo box */
.client-logo {
  display:flex;
  align-items:center;
  justify-content:center;
  height: var(--logo-height);
  min-width: calc(var(--logo-height) * 0.9);
  padding: 0 .25rem;
  box-sizing: border-box;
}

.client-logo img {
  display:block;
  max-height:100%;
  max-width: var(--logo-max-width);
  width:auto;
  height:auto;
  object-fit:contain;
  filter: grayscale(100%);
  transition: filter .18s ease, transform .18s ease;
  backface-visibility: hidden;
}

/* hover reveal */
.client-logo:hover img,
.client-logo:focus img,
.marquee-wrapper:hover .client-logo img,
.marquee-wrapper:focus-within .client-logo img {
  filter: grayscale(0%);
  transform: scale(1.03);
}

/* pause on interaction */
.marquee-wrapper:hover .marquee-track,
.marquee-wrapper:focus-within .marquee-track { animation-play-state: paused; }

/* keyframes animate by exactly one sequence width (JS sets --marquee-single-width) */
@keyframes scroll-by-single {
  0%   { transform: translateX(0); }
  100% { transform: translateX(calc(var(--marquee-single-width) * -1)); }
}

/* animation applied when JS sets --marquee-duration and --marquee-single-width */
.marquee-track[style*="--marquee-duration"][style*="--marquee-single-width"] {
  animation-name: scroll-by-single;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-duration: var(--marquee-duration);
  /* animation-direction will be set inline by JS (normal/reverse) */
}

@media (max-width:640px) {
  :root { --logo-height:48px; --gap:1rem; }
  .client-logo img { max-width:140px; }
}

@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none !important; }
}