/*************************************
 * Logo Marquee
 * Auto-scrolling strip of client / partner logos with faded edges.
 ************************************/

.logo-marquee {
  background: var(--light-grey);
  overflow: hidden;
  padding-top: 4rem;
  padding-bottom: 4rem;
}

.logo-marquee-title {
  margin: 0 0 48px;
}

/* ---- Track ---- */

.logo-marquee-track-wrap {
  position: relative;
  width: 100%;
  overflow: hidden;
  /* Fade the left/right edges so logos enter and leave smoothly */
  -webkit-mask-image: linear-gradient(to right, transparent 0, black 80px, black calc(100% - 80px), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, black 80px, black calc(100% - 80px), transparent 100%);
}

.logo-marquee-track {
  display: flex;
  align-items: center;
  gap: 60px;
  width: max-content;
  animation: logo-marquee-scroll var(--marquee-duration, 30s) linear infinite;
  will-change: transform;
}

/* ---- Logo items ---- */

.logo-marquee-item {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 60px;
  width: 180px;
  transition:
    opacity 200ms ease,
    filter 200ms ease;
}

.logo-marquee-svg {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.logo-marquee-svg svg {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  overflow: visible;
}

/* ---- Animation ---- */

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

@media (prefers-reduced-motion: reduce) {
  .logo-marquee-track {
    animation: none;
    /* Allow horizontal scrolling instead of auto-animation */
    overflow-x: auto;
  }
  .logo-marquee-track-wrap {
    -webkit-mask-image: none;
    mask-image: none;
  }
}

/* ---- Breakpoints ---- */

@media screen and (min-width: 50em) {
  .logo-marquee {
    padding-top: 5.5rem;
    padding-bottom: 5.5rem;
  }

  .logo-marquee-title {
    margin-bottom: 80px;
  }

  .logo-marquee-track {
    gap: 100px;
  }

  .logo-marquee-item {
    height: 70px;
    width: 220px;
  }
}

@media screen and (min-width: 64em) {
  .logo-marquee {
    padding-top: 7rem;
    padding-bottom: 7rem;
  }

  .logo-marquee-title {
    margin-bottom: 96px;
  }

  .logo-marquee-item {
    height: 80px;
    width: 240px;
  }
}