/* Partners logo marquee (/partners). Markup is rendered by the patched bundle. */
.partners-marquee-section {
  padding: 4rem 0;
}

.partners-marquee {
  /* Fallback for browsers without clamp() (old Safari) */
  --marquee-logo-h: 72px;
  /* Gap is proportional to logo height so row width = h * (sum of aspect ratios + 0.8 * n).
     The bundle derives each row's --marquee-duration from that, giving both rows the same speed. */
  --marquee-gap: calc(var(--marquee-logo-h) * 0.8);
  --marquee-duration: 40s;
  max-width: 80rem;
  margin: 0 auto;
  padding: 0.25rem 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}

.partners-marquee__track {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  width: -webkit-max-content;
  width: max-content;
  /* Longhands instead of the shorthand: old Safari drops the whole
     `animation` shorthand when it contains var(). Fixed 40s is the fallback. */
  -webkit-animation-name: partners-marquee-scroll;
  animation-name: partners-marquee-scroll;
  -webkit-animation-duration: 40s;
  animation-duration: 40s;
  -webkit-animation-duration: var(--marquee-duration);
  animation-duration: var(--marquee-duration);
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  will-change: transform;
}

/* Second row: same animation and speed, opposite direction */
@supports (width: clamp(1px, 1vw, 2px)) {
  .partners-marquee {
    --marquee-logo-h: clamp(56px, 8vw, 96px);
  }
}

.partners-marquee + .partners-marquee {
  margin-top: clamp(1rem, 3vw, 2rem);
}

.partners-marquee--reverse .partners-marquee__track {
  -webkit-animation-direction: reverse;
  animation-direction: reverse;
}

.partners-marquee:hover .partners-marquee__track,
.partners-marquee:focus-within .partners-marquee__track {
  -webkit-animation-play-state: paused;
  animation-play-state: paused;
}

/* Gap is applied as padding so every group has identical width -> seamless -50% loop. */
.partners-marquee__group {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.partners-marquee__item {
  flex-shrink: 0;
  padding-right: var(--marquee-gap);
}

.partners-marquee__link {
  display: block;
  border-radius: 0.5rem;
  outline-offset: 4px;
}

.partners-marquee__logo {
  display: block;
  box-sizing: border-box;
  height: var(--marquee-logo-h);
  /* --ar (box aspect ratio) is set inline per logo, so widths are known before images load */
  width: calc(var(--marquee-logo-h) * var(--ar, 1));
  max-width: none;
  object-fit: contain;
  transition: transform 0.3s ease;
  user-select: none;
}

.partners-marquee__link:hover .partners-marquee__logo,
.partners-marquee__link:focus-visible .partners-marquee__logo {
  transform: scale(1.05);
}

/* Transparent logos are placed on plaques sized like the square ones */
.partners-marquee__logo--light,
.partners-marquee__logo--dark {
  padding: calc(var(--marquee-logo-h) * 0.12);
}

.partners-marquee__logo--light {
  background: #fff;
}

.partners-marquee__logo--dark {
  padding: calc(var(--marquee-logo-h) * 0.14);
  background: #1c1c1c;
}

@-webkit-keyframes partners-marquee-scroll {
  from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
  to { -webkit-transform: translate3d(-50%, 0, 0); transform: translate3d(-50%, 0, 0); }
}

@keyframes partners-marquee-scroll {
  from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
  to { -webkit-transform: translate3d(-50%, 0, 0); transform: translate3d(-50%, 0, 0); }
}

/* No motion: each row becomes a static, wrapped set of its logos. */
@media (prefers-reduced-motion: reduce) {
  .partners-marquee {
    -webkit-mask-image: none;
    mask-image: none;
    padding: 0 1rem;
  }
  .partners-marquee__track {
    -webkit-animation: none;
    animation: none;
    width: auto;
    justify-content: center;
  }
  .partners-marquee__group {
    flex: 1 1 auto;
    min-width: 0;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2rem var(--marquee-gap);
  }
  .partners-marquee__group[aria-hidden="true"] {
    display: none;
  }
  .partners-marquee__item {
    padding-right: 0;
  }
  .partners-marquee__logo {
    transition: none;
  }
  .partners-marquee__link:hover .partners-marquee__logo,
  .partners-marquee__link:focus-visible .partners-marquee__logo {
    transform: none;
  }
}