.ref-marquee {
  position: relative;
  overflow: hidden;
  --mask-size: 80px;
  -webkit-mask: linear-gradient(90deg,
    transparent 0, #000 var(--mask-size),
    #000 calc(100% - var(--mask-size)), transparent 100%);
          mask: linear-gradient(90deg,
    transparent 0, #000 var(--mask-size),
    #000 calc(100% - var(--mask-size)), transparent 100%);
}

.ref-track {
  display: flex;
  align-items: center;
  gap: var(--ref-gap, 3rem);
  will-change: transform;
  animation: ref-scroll var(--ref-duration, 30s) linear infinite;
}

.ref-set {
  display: inline-flex;
  align-items: center;
  gap: var(--ref-gap, 3rem);
}

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

.ref-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 52px;
  flex: 0 0 auto;
  filter: grayscale(100%) opacity(.85);
  transition: filter .2s ease, transform .2s ease;
}
.ref-item img {
  height: 100%;
  width: auto;
  object-fit: contain;
}
.ref-item:hover,
.ref-item:focus-visible {
  filter: grayscale(0%) opacity(1);
  transform: translateY(-2px);
  outline: none;
}

/* Right-to-left smooth loop: distance = width of one set (set via JS) */
@keyframes ref-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-1 * var(--ref-distance, 600px))); }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .ref-track { animation: none !important; }
}

/* Responsive sizes */
@media (max-width: 991.98px) { .ref-item { height: 48px; } }
@media (max-width: 575.98px) { .ref-item { height: 40px; } }

/* Optional: slight tuning for dark mode */
:root[data-bs-theme="dark"] .ref-item {
  filter: grayscale(100%) opacity(.9) brightness(1.05);
}