/*
 * Logo Marquee: the "As Seen On" strip from crownbridge.com.
 *
 * The track holds identical copies of the row. One linear animation slides it
 * by exactly one copy and starts again, so the loop has no visible seam. Only
 * transform changes, which the browser draws on the graphics card: no layout
 * work on any frame, so the row cannot stutter.
 */

.cbt-lm {
  --cbt-lm-gap: 72px;
  --cbt-lm-duration: 40s;
  --cbt-lm-copies: 2;

  position: relative;
  width: 100%;
  overflow: hidden;
  overflow: clip;
}

.cbt-lm *,
.cbt-lm *::before,
.cbt-lm *::after {
  box-sizing: border-box;
}

.cbt-lm .cbt-lm__track {
  display: flex;
  align-items: center;
  width: max-content;
  will-change: transform;
  backface-visibility: hidden;
  animation: cbt-lm-slide var(--cbt-lm-duration) linear infinite;
}

.cbt-lm--right .cbt-lm__track {
  animation-direction: reverse;
}

.cbt-lm--pause:hover .cbt-lm__track,
.cbt-lm--pause:focus-within .cbt-lm__track {
  animation-play-state: paused;
}

.cbt-lm .cbt-lm__group {
  display: flex;
  flex: none;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cbt-lm .cbt-lm__item {
  flex: none;
  margin: 0;
  padding: 0 calc(var(--cbt-lm-gap) / 2);
  list-style: none;
}

.cbt-lm .cbt-lm__item::before {
  display: none;
}

.cbt-lm .cbt-lm__item a {
  display: block;
}

.cbt-lm .cbt-lm__item img {
  display: block;
  max-width: none;
  height: auto;
  border: 0;
  box-shadow: none;
}

.cbt-lm .cbt-lm__item--white img {
  filter: brightness(0) invert(1);
}

@keyframes cbt-lm-slide {
  to {
    transform: translate3d(calc(-100% / var(--cbt-lm-copies)), 0, 0);
  }
}

/* People who ask for less motion get a row they can swipe instead. */
@media (prefers-reduced-motion: reduce) {
  .cbt-lm {
    overflow-x: auto;
  }

  .cbt-lm .cbt-lm__track {
    animation: none;
  }
}

.cbt-lm-notice {
  padding: 12px 16px;
  border-left: 4px solid #d63638;
  background: #fff;
  color: #1d2327;
  font-size: 14px;
}