/* Client logos — homepage proof strip */

.section--client-logos {
  min-height: auto;
  justify-content: flex-start;

  padding-top: calc(var(--section-archetype-padding-y) + var(--space-6));
  padding-bottom: calc(var(--section-archetype-padding-y) + var(--space-6));
}

.client-logos {
  container-type: inline-size;

  --client-logos-gap: clamp(var(--space-7), 6cqw, 7.5rem);
  --client-logos-natural-width: 656; /* unitless — sum of Figma logo widths in px */
  --client-logos-mark: var(--mineral-soft);
  --client-logos-enter-delay: 120ms;
  --client-logos-stagger: 72ms;

  width: 100%;
}

.client-logos__header .section-title {
  max-width: 38ch;

  font-size: clamp(var(--text-base), 3vw, var(--text-lg));
  font-weight: var(--weight-regular);
  line-height: clamp(var(--leading-base), 1.2 + 0.45vw, var(--leading-heading));
  letter-spacing: clamp(0.02em, 0.55vw, var(--tracking-body));
}

.client-logos__header .section-title::after {
  content: "";
  display: block;

  width: 9.375rem;
  height: var(--space-0-5);
  margin-top: var(--space-3);

  background: var(--signal);
}

.client-logos__grid {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--client-logos-gap);

  width: 100%;
  min-height: 3rem;
  margin: clamp(var(--space-6), 5vw, var(--space-8)) 0 0;
  padding: 0;

  list-style: none;
}

.client-logos__item {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;

  padding: 0;
}

.section--client-logos:not(.client-logos--revealed) .client-logos__item,
[data-client-logos-section]:not(.client-logos--revealed) .client-logos__item {
  opacity: 0;
  transform: translateY(var(--space-2));
}

.section--client-logos.client-logos--revealed:not(.client-logos--entering) .client-logos__item,
[data-client-logos-section].client-logos--revealed:not(.client-logos--entering) .client-logos__item {
  opacity: 1;
  transform: translateY(0);
}

.section--client-logos.client-logos--revealed.client-logos--entering .client-logos__item,
[data-client-logos-section].client-logos--revealed.client-logos--entering .client-logos__item {
  opacity: 0;
  transform: translateY(var(--space-2));
  animation: client-logos-mark-in 720ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.section--client-logos.client-logos--revealed.client-logos--entering .client-logos__item:nth-child(1),
[data-client-logos-section].client-logos--revealed.client-logos--entering .client-logos__item:nth-child(1) {
  animation-delay: calc(var(--client-logos-enter-delay) + var(--client-logos-stagger) * 0);
}

.section--client-logos.client-logos--revealed.client-logos--entering .client-logos__item:nth-child(2),
[data-client-logos-section].client-logos--revealed.client-logos--entering .client-logos__item:nth-child(2) {
  animation-delay: calc(var(--client-logos-enter-delay) + var(--client-logos-stagger) * 1);
}

.section--client-logos.client-logos--revealed.client-logos--entering .client-logos__item:nth-child(3),
[data-client-logos-section].client-logos--revealed.client-logos--entering .client-logos__item:nth-child(3) {
  animation-delay: calc(var(--client-logos-enter-delay) + var(--client-logos-stagger) * 2);
}

.section--client-logos.client-logos--revealed.client-logos--entering .client-logos__item:nth-child(4),
[data-client-logos-section].client-logos--revealed.client-logos--entering .client-logos__item:nth-child(4) {
  animation-delay: calc(var(--client-logos-enter-delay) + var(--client-logos-stagger) * 3);
}

.section--client-logos.client-logos--revealed.client-logos--entering .client-logos__item:nth-child(5),
[data-client-logos-section].client-logos--revealed.client-logos--entering .client-logos__item:nth-child(5) {
  animation-delay: calc(var(--client-logos-enter-delay) + var(--client-logos-stagger) * 4);
}

.section--client-logos.client-logos--revealed.client-logos--entering .client-logos__item:nth-child(6),
[data-client-logos-section].client-logos--revealed.client-logos--entering .client-logos__item:nth-child(6) {
  animation-delay: calc(var(--client-logos-enter-delay) + var(--client-logos-stagger) * 5);
}

.section--client-logos.client-logos--revealed.client-logos--entering .client-logos__item:nth-child(7),
[data-client-logos-section].client-logos--revealed.client-logos--entering .client-logos__item:nth-child(7) {
  animation-delay: calc(var(--client-logos-enter-delay) + var(--client-logos-stagger) * 6);
}

.section--client-logos.client-logos--revealed.client-logos--entering .client-logos__item:nth-child(8),
[data-client-logos-section].client-logos--revealed.client-logos--entering .client-logos__item:nth-child(8) {
  animation-delay: calc(var(--client-logos-enter-delay) + var(--client-logos-stagger) * 7);
}

.section--client-logos.client-logos--revealed.client-logos--entering .client-logos__item:nth-child(9),
[data-client-logos-section].client-logos--revealed.client-logos--entering .client-logos__item:nth-child(9) {
  animation-delay: calc(var(--client-logos-enter-delay) + var(--client-logos-stagger) * 8);
}

@keyframes client-logos-mark-in {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes client-logos-marquee {
  to {
    transform: translateX(calc(-1 * var(--client-logos-marquee-distance, 0px)));
  }
}

.client-logos__mark {
  display: block;

  width: calc(var(--logo-w) * (100cqw - (8 * var(--client-logos-gap))) / var(--client-logos-natural-width));
  height: calc(var(--logo-h) * (100cqw - (8 * var(--client-logos-gap))) / var(--client-logos-natural-width));

  background-color: var(--client-logos-mark);

  mask-image: var(--logo-src);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;

  -webkit-mask-image: var(--logo-src);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
}

@supports not (width: 1cqw) {

  .client-logos__mark {
    width: auto;
    height: auto;
    max-height: 3rem;
  }

}

@media (prefers-reduced-motion: reduce) {

  .client-logos__item {
    opacity: 1;
    transform: none;
    animation: none;
  }

  .section--client-logos.client-logos--marquee .client-logos__grid,
  [data-client-logos-section].client-logos--marquee .client-logos__grid {
    animation: none;
  }

}

@media (max-width: 760px) {

  .section--client-logos {
    padding-top: calc((var(--section-archetype-padding-y) + var(--space-6)) * 0.5);
    padding-bottom: calc((var(--section-archetype-padding-y) + var(--space-6)) * 0.5);
  }

  .client-logos {
    container-type: normal;

    --client-logos-gap: var(--space-7);
    --client-logos-slot: calc((100vw - var(--section-padding-x)) / 3.5);
  }

  .client-logos__marquee {
    width: calc(100% + var(--section-padding-x));
    margin-right: calc(var(--section-padding-x) * -1);

    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;

    -ms-overflow-style: none;
    scrollbar-width: none;
  }

  .client-logos__marquee::-webkit-scrollbar {
    display: none;
  }

  .client-logos__grid {
    width: max-content;
    margin-right: 0;
    padding-right: var(--section-padding-x);

    scroll-snap-type: x mandatory;
  }

  .client-logos__item {
    flex: 0 0 auto;
    justify-content: flex-start;
    scroll-snap-align: start;
  }

  .client-logos__mark {
    width: calc(var(--logo-w) / 130 * var(--client-logos-slot) * 0.9504);
    height: calc(var(--logo-h) / 130 * var(--client-logos-slot) * 0.9504);
    max-height: 2.97rem;

    mask-position: left center;
    -webkit-mask-position: left center;
  }

  .section--client-logos.client-logos--marquee .client-logos__marquee,
  [data-client-logos-section].client-logos--marquee .client-logos__marquee {
    overflow: hidden;
  }

  .section--client-logos.client-logos--marquee .client-logos__grid,
  [data-client-logos-section].client-logos--marquee .client-logos__grid {
    padding-right: 0;
    scroll-snap-type: none;

    animation: client-logos-marquee var(--client-logos-marquee-duration, 32s) linear infinite;
    will-change: transform;
  }

}