.facteus-logo-strip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
}

.facteus-logo-strip__label {
  margin: 0;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.facteus-logo-strip__track {
  position: relative;
  width: 100%;
  height: 104px;
  border-radius: 999px;
  overflow: hidden;
  display: flex;
  align-items: center;
}

.facteus-logo-strip__viewport {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.facteus-logo-strip__row {
  display: flex;
  align-items: center;
  gap: 72px;
  width: 100%;
  height: 100%;
  justify-content: center;
  padding: 0 40px;
}

/* Scrolling: the row holds the logo set twice, so translating it by exactly
   half its width lands the copy precisely where the original began — a
   seamless loop with no JS stepping and no per-frame work. */
@keyframes facteus-logo-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.facteus-logo-strip.is-scrolling .facteus-logo-strip__row {
  width: max-content;
  justify-content: flex-start;
  padding: 0;
  animation: facteus-logo-marquee var(--logo-strip-duration, 8s) linear infinite;
  will-change: transform;
}

.facteus-logo-strip.is-scrolling.is-reversed .facteus-logo-strip__row {
  animation-direction: reverse;
}

/* Hover pause and the off-screen pause share one mechanism. */
.facteus-logo-strip.is-paused .facteus-logo-strip__row {
  animation-play-state: paused;
}

/* Slides span the band so a logo can be capped against it. */
.facteus-logo-strip .facteus-logo-strip__slide {
  height: 100%;
  width: auto;
  max-width: none;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Height comes from the Logo Height control; width must stay proportional.
   Themes commonly ship `img { width: 100%; height: auto }`, which would
   override a single-class rule, so keep this at two classes too. */
.facteus-logo-strip .facteus-logo-strip__logo {
  display: block;
  height: 56px;
  /* A Logo Height larger than the Band Height would otherwise be clipped by
     the band's overflow. Cap it so the two controls cannot contradict. */
  max-height: 100%;
  width: auto;
  max-width: none;
  object-fit: contain;
  align-self: center;
  opacity: 0.92;
}

/* Fade the logos into the band colour. Overlays rather than a mask, so the
   band stays solid and keeps its rounded ends. */
.facteus-logo-strip__track.has-edge-fade::before,
.facteus-logo-strip__track.has-edge-fade::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: var(--logo-fade-width, 48px);
  z-index: 2;
  pointer-events: none;
}

.facteus-logo-strip__track.has-edge-fade::before {
  left: 0;
  background: linear-gradient(to right, var(--logo-strip-bg, transparent), transparent);
}

.facteus-logo-strip__track.has-edge-fade::after {
  right: 0;
  background: linear-gradient(to left, var(--logo-strip-bg, transparent), transparent);
}

/* Fail open: the strip is visible by default. JS adds `is-measuring` for the
   one frame it needs to size the row, so a JS failure leaves a static strip
   rather than an invisible one. */
.facteus-logo-strip.is-measuring .facteus-logo-strip__viewport {
  opacity: 0;
}
.facteus-logo-strip__viewport {
  transition: opacity 200ms;
}

@media (prefers-reduced-motion: reduce) {
  .facteus-logo-strip__track.has-edge-fade::before,
  .facteus-logo-strip__track.has-edge-fade::after {
    display: none;
  }
  /* Belt and braces: JS already declines to scroll, but if the preference
     changes after load the animation stops without needing a re-init. */
  .facteus-logo-strip.is-scrolling .facteus-logo-strip__row {
    animation: none;
  }
}