/*
 * Customer logo ticker on the marketing home page: one slow row of small white logos on the
 * dark band (#1f2b34 background, #f4f6f8 text, #00a9e0 label), as wide as the old Featured In
 * press band (1200px, centred). Loaded only on static_pages#home via
 * app/views/layouts/static_page.html.erb.
 */

section.customer-ticker {
  background: #1f2b34;
  color: #f4f6f8;
  text-align: center;
  font-weight: 600;
  -webkit-font-smoothing: antialiased;
  padding: 2em 0;
  overflow: hidden;
}

.customer-ticker h3 {
  color: #00a9e0;
  font-weight: 600;
  font-size: 1.17em;
  margin: 0 0 1.5em;
}

/* Viewport: same width as the old press band; clips the track and fades the edges. */
.customer-ticker__viewport {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
}

/* Track: both copies of the list side by side, scrolled by exactly one copy's width.
   The partial sets animation-duration inline (4s per logo); 150s here is only the fallback. */
.customer-ticker__track {
  display: flex;
  width: max-content;
  animation: customer-ticker-scroll 150s linear infinite;
  will-change: transform;
}

.customer-ticker__list {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  list-style: none;
  margin: 0;
  padding: 0;
}

.customer-ticker__list li {
  flex: 0 0 auto;
  margin: 0 22px; /* 44px between neighbouring logos */
}

.customer-ticker__list img {
  display: block;
  height: 36px;
  width: auto;
  max-width: 200px;
  object-fit: contain; /* a wordmark wider than the cap scales down inside it instead of being squashed */
  opacity: 0.92;
}

@keyframes customer-ticker-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Windows High Contrast / forced colors: keep the dark band so the white logos stay visible. */
@media (forced-colors: active) {
  section.customer-ticker {
    forced-color-adjust: none;
  }
}

/* Phones: smaller logos, tighter spacing. */
@media (max-width: 480px) {
  .customer-ticker__list img {
    height: 28px;
    max-width: 150px;
  }

  .customer-ticker__list li {
    margin: 0 14px;
  }
}

/* Reduced motion: no animation; show each logo once, wrapped into rows. */
@media (prefers-reduced-motion: reduce) {
  .customer-ticker__viewport {
    -webkit-mask-image: none;
    mask-image: none;
  }

  .customer-ticker__track {
    animation: none;
    width: auto;
    justify-content: center;
    will-change: auto;
  }

  .customer-ticker__list {
    flex-wrap: wrap;
    justify-content: center;
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
  }

  .customer-ticker__list--duplicate {
    display: none;
  }

  .customer-ticker__list li {
    margin: 0.5em 1.25em;
  }
}