/* Client logo band on the homepage (index.html, intro section), loaded
   after tailwind.css. Static row by default that scrolls sideways; it only
   runs as a band with scripting (pause button, js/client-logos.js) and
   without reduced motion. Logos: assets/clients/ (SOURCES.md). */

.cl-block {
  margin-top: 64px;
}

@media (min-width: 1024px) {
  .cl-block {
    margin-top: 96px;
  }
}

.cl-logos {
  overflow-x: auto;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.cl-logos-track {
  display: flex;
  width: max-content;
}

.cl-logos ul {
  display: flex;
  align-items: center;
  gap: 72px;
  margin: 0;
  padding: 0 36px;
  list-style: none;
}

.cl-logos li {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  height: 72px;
}

.cl-logos img {
  display: block;
  opacity: 0.62;
}

/* .cl-logos ul sets display: flex, so the copy needs the same weight. */
.cl-logos .cl-logos-copy,
.cl-pause {
  display: none;
}

@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  .cl-logos {
    overflow: hidden;
  }

  .cl-logos .cl-logos-copy {
    display: flex;
  }

  /* The copy follows the original, so -50% lands on the same picture. */
  .cl-logos-track {
    animation: cl-marquee 48s linear infinite;
  }

  .cl-logos:hover .cl-logos-track,
  .cl-logos:focus-within .cl-logos-track,
  .cl-logos.is-paused .cl-logos-track {
    animation-play-state: paused;
  }

  .cl-pause:not([hidden]) {
    display: inline-block;
  }
}

@keyframes cl-marquee {
  to {
    transform: translateX(-50%);
  }
}

.cl-pause {
  min-height: 44px;
  margin-top: 8px;
  padding: 10px 0;
  border: 0;
  background: none;
  font: 600 14px/1.2 'Montserrat', sans-serif;
  color: #3a41e4;
  cursor: pointer;
}

.cl-logos:focus-visible,
.cl-pause:focus-visible {
  outline: 3px solid #3a41e4;
  outline-offset: 3px;
}