/* =========================================================
   КЛИЕНТЫ: бегущая лента логотипов и сноска
   ========================================================= */

/* Лента выходит за поля контейнера до краев страницы,
   а по краям логотипы плавно растворяются в фоне.
   Затухание сделано градиентами поверх ленты, а не маской:
   маска на движущейся ленте заставляла Safari перерисовывать
   ее на каждом кадре, и прокрутка на iPhone подергивалась. */
.marquee {
  position: relative;
  margin-inline: calc(var(--gutter) * -1);
  overflow: hidden;
}
.marquee::before,
.marquee::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  z-index: 1;
  width: 10%;
  pointer-events: none;
}
.marquee::before { left: 0;  background: linear-gradient(90deg, var(--bg), transparent); }
.marquee::after  { right: 0; background: linear-gradient(-90deg, var(--bg), transparent); }

/* Две одинаковые копии списка подряд. Лента сдвигается ровно на одну
   копию (-50%) и начинает заново — стык незаметен.
   Направление: слева направо. Чтобы ехала справа налево —
   поменяйте местами from и to в @keyframes marquee. */
.marquee__track {
  --marquee-duration: 50s;   /* JS пересчитывает по числу логотипов (js/config.js) */
  display: flex;
  width: max-content;
  animation: marquee var(--marquee-duration) linear infinite;
  will-change: transform;   /* лента едет на видеокарте, не нагружая прокрутку */
}
@keyframes marquee {
  from { transform: translate3d(-50%, 0, 0); }
  to   { transform: translate3d(0, 0, 0); }
}

.marquee__list { display: flex; list-style: none; }

.client {
  display: grid;
  place-items: center;
  width: clamp(150px, 15vw, 240px);
  height: clamp(96px, 8.5vw, 132px);
  padding: 0 clamp(20px, 2vw, 32px);
}

/* Текстовая заглушка, если у клиента нет логотипа */
.client__name {
  font-size: clamp(13px, 1.15vw, 18px);
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1.15;
  text-align: center;
  color: rgba(255, 255, 255, .62);
  transition: color .4s;
}
.client:hover .client__name { color: var(--fg); }

/* Логотип-картинка. Одинаковая «рамка» для всех: широкие знаки
   упираются в ширину, высокие — в высоту. Фильтр перекрашивает
   любой цвет в чистый белый, прозрачные места остаются прозрачными. */
.client__logo {
  width: 100%;
  height: 44%;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: .55;
  transition: opacity .4s;
}
.client:hover .client__logo { opacity: 1; }

/* ---------- Сноска под лентой ---------- */
.clients-note {
  margin-top: clamp(40px, 5vw, 72px);
  row-gap: 16px;
}
.clients-note .eyebrow { grid-column: 1 / span 3; }
.clients-note p:not(.eyebrow) {
  grid-column: 4 / span 7;
  font-size: clamp(20px, 2vw, 30px);
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: -.02em;
}
.clients-note p span { color: var(--muted); }

@media (max-width: 900px) {
  .clients-note .eyebrow,
  .clients-note p:not(.eyebrow) { grid-column: 1 / -1; }
}

/* Пользователь просит меньше анимаций — лента стоит,
   логотипы раскладываются в несколько строк */
@media (prefers-reduced-motion: reduce) {
  .marquee { margin-inline: 0; }
  .marquee::before, .marquee::after { display: none; }
  .marquee__track { width: auto; }
  .marquee__list { flex-wrap: wrap; justify-content: center; }
  .marquee__list[aria-hidden="true"] { display: none; }
}