/* ============================================================================
 * Logo Marquee — dual-direction, pure CSS, GPU-friendly.
 *
 *   .wb-marquee                → outer mask with edge fade
 *   .wb-marquee__track         → flexible inline list that scrolls
 *   .wb-marquee--reverse       → opposite direction
 *   .wb-marquee--slow|fast     → speed presets
 *   .wb-marquee__item          → individual logo cell
 *
 * Mark the duplicated set with aria-hidden="true" so screen readers
 * read each logo only once.
 *
 * Implementation note: the markup MUST duplicate the items twice
 * inside the track for seamless looping (50% translateX keyframe).
 * ========================================================================== */

.wb-marquee {
  --wb-marquee-duration: 40s;
  --wb-marquee-gap: var(--wb-space-8);

  position: relative;
  width: 100%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.wb-marquee__track {
  display: flex;
  align-items: center;
  gap: var(--wb-marquee-gap);
  width: max-content;
  animation: wb-marquee-scroll var(--wb-marquee-duration) linear infinite;
  will-change: transform;
}

.wb-marquee--reverse .wb-marquee__track {
  animation-direction: reverse;
}

.wb-marquee--slow { --wb-marquee-duration: 60s; }
.wb-marquee--fast { --wb-marquee-duration: 24s; }

.wb-marquee:hover .wb-marquee__track {
  animation-play-state: paused;
}

.wb-marquee__item {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  opacity: 0.7;
  filter: grayscale(1);
  transition:
    opacity var(--wb-duration-base) var(--wb-ease),
    filter var(--wb-duration-base) var(--wb-ease);
}
.wb-marquee__item:hover {
  opacity: 1;
  filter: grayscale(0);
}
.wb-marquee__item img,
.wb-marquee__item svg {
  max-height: 100%;
  width: auto;
  display: block;
}

@media (min-width: 768px) {
  .wb-marquee__item { height: 48px; }
}

@keyframes wb-marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-50% - (var(--wb-marquee-gap) / 2))); }
}

.wb-reduce-motion .wb-marquee__track {
  animation: none;
}