/* ============================================================================
   site/fx/marquee.css — полоса огромного шрифта над «Восемью модулями»
   (fx/marquee.js).

   Полоса во всю ширину окна: она ребёнок самого раздела, а не .wrap, и
   слова уходят за обе кромки экрана, будто строка продолжается снаружи.
   Лишнее срезает overflow:clip у полосы — горизонтальной прокрутки у
   страницы от неё не появляется.

   Две строки — два голоса одного шрифта. Верхняя — контуром: на бумаге
   это тонкий рисунок, не спорящий с заголовком раздела. Нижняя — заливкой
   приглушённых чернил, но светлее текста: она фактура, а не второй
   заголовок. Между словами — точка акцентной зелени.
   ========================================================================== */

.fx-mq{
  position:relative;
  /* clip, а не hidden: hidden заводит скрытую прокрутку, и фокус или
     якорь могут сдвинуть строку вбок. hidden — только для старых движков.
     Межстрочный 1.12 оставляет выносным «д» и «у» место внутри полосы. */
  overflow:hidden; overflow:clip;
  margin:0 0 clamp(44px,5.5vw,96px);
  pointer-events:none;
  -webkit-user-select:none; user-select:none;
  font-family:var(--disp);
  font-weight:700;
  font-size:clamp(44px,6.6vw,112px);
  line-height:1.12;
  letter-spacing:-.012em;
  white-space:nowrap;
}

/* Пустая заготовка в разметке держит место под две строки, пока скрипт не
   заполнил её; без JS полосы нет вовсе — и места под неё тоже. */
.js .fx-mq:empty{ height:2.24em }
html:not(.js) .fx-mq{ display:none }
@media (max-width:760px){ .js .fx-mq:empty{ height:2.32em } }

/* Полоса проявляется вместе с бумагой: тёмный контур на полупереходе
   полотна (серо-зелёном) читался грязью. is-light ставит tone.js. */
.fx-mq{ opacity:0; transition:opacity .5s cubic-bezier(.215,.61,.355,1) }
.is-light .fx-mq{ opacity:1 }

.fx-mq-row{ display:block }
.fx-mq-track{ display:flex; width:max-content }
.fx-mq-seq{ display:flex; align-items:center; flex:none }
.fx-mq-w{ display:block; flex:none }

/* Слой на видеокарте — только пока полоса рядом с экраном (is-near ставит
   скрипт): строки широкие, держать их растр всю страницу незачем. */
.fx-mq.is-near .fx-mq-track{ will-change:transform }

.fx-mq-dot{
  display:block; flex:none;
  width:.14em; height:.14em; border-radius:50%;
  margin-inline:.42em;
  background:var(--acc-d);
}

/* Контур. У Unbounded вариативный файл, и контуры букв в нём наложены
   друг на друга: -webkit-text-stroke обводит КАЖДЫЙ контур, и внутри «К»,
   «л», «д» проступают лишние линии. Поэтому обводка — фильтром: буква
   залита, фильтр раздувает её на 1 px и вычитает саму букву — остаётся
   кольцо по внешнему краю всего силуэта (фильтр кладёт в полосу скрипт,
   он же ставит has-outline). Обводка шрифтом — запасной путь; без неё —
   бледная заливка, чтобы не спорить с заголовком. */
.fx-mq-row--line{ color:rgba(13,26,21,.14) }
@supports (-webkit-text-stroke:1px black){
  .fx-mq-row--line{ color:transparent; -webkit-text-stroke:1px var(--paper-ink) }
}
.fx-mq.has-outline .fx-mq-row--line{ color:var(--paper-ink); -webkit-text-stroke:0 }
.fx-mq.has-outline .fx-mq-row--line .fx-mq-w{ filter:url(#fx-mq-outline) }

.fx-mq-row--fill{ color:var(--paper-mut); opacity:.22 }

@media (max-width:760px){
  .fx-mq{ line-height:1.16; margin-bottom:clamp(32px,8vw,48px) }
  .fx-mq-dot{ width:.16em; height:.16em; margin-inline:.36em }
}

@media (forced-colors: active){
  .fx-mq-row--line,
  .fx-mq.has-outline .fx-mq-row--line{ -webkit-text-stroke:0; color:CanvasText }
  .fx-mq.has-outline .fx-mq-row--line .fx-mq-w{ filter:none }
}
@media print{ .fx-mq{ display:none } }