/* Scroll marquee. Настройка — через переменные на .fx-marquee или любом родителе. */
.fx-marquee {
  --fx-marquee-size: clamp(36px, 4.4vw, 76px);   /* размер текста */
  --fx-marquee-color: #f3f1ec;
  --fx-marquee-bg: #070707;                      /* фон под строкой — нужен для контурного стиля */
  --fx-marquee-sep: #d6ff2e;                     /* цвет разделителя */
  --fx-marquee-stroke: 1.5px;                    /* толщина контура */
  --fx-marquee-line: rgba(243, 241, 236, .11);   /* линии сверху и снизу; transparent — без них */
  --fx-marquee-pad: 22px;

  overflow: hidden; padding: var(--fx-marquee-pad) 0;
  border-block: 1px solid var(--fx-marquee-line);
  color: var(--fx-marquee-color);
}
/* До запуска скрипта (и без JS) — просто строка в одну линию */
.fx-marquee:not(.is-ready) { display: flex; white-space: nowrap; }
.fx-marquee__track { display: flex; width: max-content; will-change: transform; }
.fx-marquee__group { display: flex; align-items: center; flex-shrink: 0; }

.fx-marquee__item {
  padding: 0 .35em; font-size: var(--fx-marquee-size); line-height: 1; white-space: nowrap;
  font-weight: 800; letter-spacing: -.05em; word-spacing: .16em; text-transform: uppercase;
}
.fx-marquee__sep { font-style: normal; color: var(--fx-marquee-sep); font-size: calc(var(--fx-marquee-size) * .36); }

/* Модификатор: каждое второе слово — контуром.
   Обводка рисуется под заливкой цвета фона — так не видно стыков внутри букв у вариативных шрифтов. */
@supports (-webkit-text-stroke: 1px #000) {
  .fx-marquee--alt .fx-marquee__item.is-alt {
    color: var(--fx-marquee-bg);
    -webkit-text-stroke: calc(var(--fx-marquee-stroke) * 2) var(--fx-marquee-color);
    paint-order: stroke fill;
    letter-spacing: -.01em;
  }
}