/* ─────────────────────────────────────────────────────────────────
   LogoLoop — infinite marquee with JS RAF velocity smoothing
   Loop is 100% JS-driven (no @keyframes) — no CSS rewind on hover.
   Fade color matches #partners background: var(--cb) = #7B56FF
   ───────────────────────────────────────────────────────────────── */

.logoloop {
  position: relative;
  overflow: hidden;
  width: 100%;

  --logoloop-gap:        64px;
  --logoloop-logoHeight: 36px;
  --logoloop-fadeColor:  #7B56FF;
}

/* ── Track: JS sets transform each frame ── */
.logoloop__track {
  display: flex;
  width: max-content;
  will-change: transform;
  user-select: none;
  position: relative;
  z-index: 0;
}

/* ── List (one sequence copy) ── */
.logoloop__list {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
  flex-shrink: 0;
}

/* ── Item ── */
.logoloop__item {
  flex: 0 0 auto;
  margin-right: var(--logoloop-gap);
  display: inline-flex;
  align-items: center;
  line-height: 1;
}

/* Last item keeps its gap so the boundary between copies is invisible */
.logoloop__item:last-child {
  margin-right: var(--logoloop-gap);
}

/* ── Logo image ── */
.logoloop__item img {
  height: var(--logoloop-logoHeight);
  width: auto;
  display: block;
  object-fit: contain;
  image-rendering: -webkit-optimize-contrast;
  -webkit-user-drag: none;
  pointer-events: none;
  opacity: 0.82;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              opacity  0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Scale on hover ── */
.logoloop--scale-hover .logoloop__item {
  overflow: visible;
}

.logoloop--scale-hover .logoloop__item:hover img {
  transform: scale(1.2);
  transform-origin: center center;
  opacity: 1;
}

/* ── Edge fades ── */
.logoloop--fade::before,
.logoloop--fade::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: clamp(24px, 8%, 120px);
  pointer-events: none;
  z-index: 10;
}

.logoloop--fade::before {
  left: 0;
  background: linear-gradient(to right,
    var(--logoloop-fadeColor) 0%,
    rgba(123,86,255,0) 100%
  );
}

.logoloop--fade::after {
  right: 0;
  background: linear-gradient(to left,
    var(--logoloop-fadeColor) 0%,
    rgba(123,86,255,0) 100%
  );
}

/* ── Reduced motion: freeze the track ── */
@media (prefers-reduced-motion: reduce) {
  .logoloop__track {
    transform: translate3d(0,0,0) !important;
  }
  .logoloop__item img {
    transition: none !important;
  }
}