@keyframes clients-title-enter {
  from {
    opacity: 0;
    transform: translateY(28px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.clients-section {
  position: relative;
  isolation: isolate;
  --clients-edge: max(6vw, 36px);
  --clients-gap: clamp(32px, 4vw, 56px);
  overflow: hidden;
  padding: clamp(72px, 10vw, 128px) 0;
  background: var(--paper);
  color: var(--primary);
}

.clients-heading {
  width: min(100% - var(--clients-edge) * 2, 1280px);
  margin: 0 auto clamp(40px, 6vw, 72px);
  text-align: center;
}

.clients-eyebrow {
  margin: 0 0 12px;
  color: var(--secondary);
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 2vw, 1.5rem);
  font-weight: 600;
  letter-spacing: .08em;
  opacity: 0;
  text-transform: uppercase;
}

.clients-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(3rem, 8vw, 7rem);
  font-weight: 700;
  line-height: .95;
  opacity: 0;
  transform: translateY(28px);
  text-transform: uppercase;
}

.clients-title span {
  display: inline-block;
  padding: .06em .16em 0;
  background: var(--yellow);
  rotate: -2deg;
}

.clients-section.is-visible .clients-eyebrow {
  animation: clients-title-enter 650ms cubic-bezier(.22, 1, .36, 1) both;
}

.clients-section.is-visible .clients-title {
  animation: clients-title-enter 850ms cubic-bezier(.22, 1, .36, 1) 100ms both;
}

.clients-rows {
  display: grid;
  gap: clamp(20px, 3vw, 36px);
}

/* Two copies of each list (the second cloned in JS) slide together by
   their own width, so the loop is seamless at any screen size. */
.clients-row {
  --clients-enter: 1;
  display: flex;
  overflow: hidden;
  opacity: 0;
  translate: calc(var(--clients-enter) * 80px) 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}

.clients-row[data-direction="right"] {
  --clients-enter: -1;
}

.clients-section.is-visible .clients-row {
  opacity: 1;
  translate: 0 0;
  transition:
    opacity 900ms ease calc(250ms + var(--row, 0) * 120ms),
    translate 1200ms cubic-bezier(.16, 1, .3, 1) calc(250ms + var(--row, 0) * 120ms);
}

.clients-track {
  display: flex;
  min-width: 100%;
  flex-shrink: 0;
  align-items: center;
  justify-content: space-around;
  margin: 0;
  padding: 0;
  list-style: none;
}

.clients-row.is-looping .clients-track {
  animation: clients-marquee calc(var(--clients-count, 11) * 4s) linear infinite;
}

.clients-row[data-direction="right"].is-looping .clients-track {
  animation-direction: reverse;
}

.clients-row:hover .clients-track {
  animation-play-state: paused;
}

.client-logo {
  position: relative;
  width: clamp(104px, 11vw, 160px);
  height: clamp(64px, 7vw, 96px);
  flex: 0 0 auto;
  margin-right: var(--clients-gap);
}

.client-logo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: grayscale(1);
  transition: scale 400ms cubic-bezier(.22, 1, .36, 1);
}

/* On hover the colour fills each logo from the bottom up, like the bulb
   filling with light: a full-colour copy (added in clients.js) is revealed
   over the grey one, and drains back down when the pointer leaves. */
.client-logo-color {
  position: absolute;
  inset: 0;
  clip-path: inset(100% 0 0 0);
  transition: clip-path 700ms cubic-bezier(.22, 1, .36, 1);
  pointer-events: none;
}

.client-logo .client-logo-color img {
  filter: none;
}

.client-logo:hover .client-logo-color {
  clip-path: inset(0);
}

.client-logo:hover img {
  scale: 1.12;
}

@keyframes clients-marquee {
  to {
    transform: translate3d(-100%, 0, 0);
  }
}

@media (max-width: 680px) {
  .clients-section {
    --clients-gap: 28px;
    padding: 64px 0;
  }

  .clients-title {
    font-size: clamp(2.75rem, 13vw, 4.5rem);
  }

  .client-logo {
    width: 84px;
    height: 56px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .clients-row {
    display: block;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .clients-row .clients-track {
    flex-wrap: wrap;
    row-gap: 24px;
    justify-content: center;
    padding-inline: var(--clients-edge);
    animation: none !important;
  }

  .clients-track[aria-hidden="true"] {
    display: none;
  }
}