/* ====== Marquee Base ====== */
.marquee-wrapper {
  --marquee-speed: 30s;          /* Lower = faster. Try 12s–30s */
  --marquee-gap: clamp(1rem, 3vw, 3rem);
  --logo-h: clamp(28px, 6vw, 265px);

  position: relative;
  overflow: hidden;
}
/* ====== Tracks ====== */
.marquee-track {
  display: flex;
  align-items: center;
  gap: var(--marquee-gap);
  /* Two child rows: the real sequence + the duplicate. We’ll animate both together. */
  width: max-content; /* allow track to expand naturally */
  /* Put the track inside a scroller row */
  position: relative;
  z-index: 1;
  /* We’ll wrap the animated row in a flex container */
}

/* Individual logos */
.logo {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
}
.logo img {
  height: var(--logo-h);
  width: auto;
  display: block;
  transition: transform .2s ease, opacity .2s ease;
  will-change: transform;
}
.logo img:hover,
.logo img:focus {
  transform: translateY(-2px);
  opacity: 1;
  filter: saturate(1.1) contrast(1.05);
}

/* ====== Animation ====== */
/* The distance must equal the width of the original sequence.
   Since we duplicated it, translating by 50% of the combined width
   seamlessly loops to the duplicate. We use translate3d for GPU hinting. */
@keyframes marquee-slide {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(-33%, 0, 0); /* move left by half of total (orig+dup) */
  }
}

/* Create a wrapper row that we can animate as a whole.
   We’ll use a helper class via :where() to avoid specificity wars. */
.marquee-wrapper .marquee-track {
  animation: marquee-slide var(--marquee-speed) linear infinite;
}

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

/* Respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .marquee-wrapper .marquee-track {
    animation: none;
    transform: none;
  }
  .marquee-toggle { display: none; }
}

/* ====== Variants: speed by viewport ====== */
/* Slightly faster on very wide screens so it doesn’t feel sluggish */
@media (min-width: 1200px) {
  .marquee-wrapper { --marquee-speed: 18s; }
}

/* Slightly slower on small screens to reduce motion intensity */
@media (max-width: 480px) {
  .marquee-wrapper { --marquee-speed: 24s; }
}