/* ===== Бегущая строка — общий движок =====
   Внешний вид (отступы, размеры, затемнения краёв) — в стилях блока.
   Расстояние между элементами задаётся в блоке через --marquee-gap. */

.marquee {
  overflow: hidden;
}

.marquee__track {
  display: flex;
  width: max-content;
  will-change: transform;
}

.marquee.is-ready .marquee__track {
  animation: marquee-scroll var(--marquee-duration, 30s) linear infinite;
}

.marquee.is-paused .marquee__track {
  animation-play-state: paused;
}

.marquee__group {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: var(--marquee-gap, 40px);
  padding-right: var(--marquee-gap, 40px);
}

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