/* Блок «Мы создаём»: графитовое поле, отбитое сверху и снизу тонкой
   жёлтой линией во всю ширину.

   «МЫ» и «СОЗДАЕМ» стоят в две строки по левому краю, ниже лента слов.
   Лента не едет непрерывно: она стоит на слове, потом плавно переезжает
   на следующее. Текущее слово непрозрачное, соседние — наполовину,
   поэтому видно, что было до и что будет после.

   Текущее слово ещё и жирное, вправо от него буквы бледнеют.

   Сам шаг считает скрипт: слова разной длины, и «сдвинуться ровно на
   одно слово» на чистом CSS не выразить. Он же поправляет сдвиг на
   разницу ширин при смене начертания. */

.zmq {
  /* Левая отметка повторяет сетку темы, замеренную на живой странице:
     20px на телефоне, дальше доля ширины. Так блок стоит в одну линию
     с «Избранными проектами» и остальной страницей. */
  --zmq-gutter: 20px;

  background: #161519;
  /* Линии только сверху и снизу, от края до края: блок читается как
     отбивка между секциями, а не как плашка в рамке. */
  border: 0;
  border-top: 1px solid #facc45;
  border-bottom: 1px solid #facc45;
  padding: clamp(36px, 6vw, 76px) 0;
  overflow: hidden;
  text-align: left;
}

@media (min-width: 769px)  { .zmq { --zmq-gutter: 11vw; } }
@media (min-width: 1200px) { .zmq { --zmq-gutter: 13.5vw; } }
@media (min-width: 1700px) { .zmq { --zmq-gutter: 17vw; } }

.zmq__lead {
  margin: 0 0 clamp(16px, 2.2vw, 30px);
  padding: 0 20px 0 var(--zmq-gutter);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  font-size: clamp(30px, 7.6vw, 84px);
  font-weight: 800;
  line-height: .98;
  letter-spacing: .005em;
  text-transform: uppercase;
  color: #fff;
}

.zmq__leadline { display: block; }

.zmq__line {
  position: relative;
  height: 1.32em;
  font-size: clamp(21px, 5.6vw, 70px);
  font-weight: 300;
  line-height: 1.32;
  letter-spacing: -.01em;
  /* Лента длиннее экрана — её надо обрезать.
     clip вместо hidden: hidden оставляет блок прокручиваемым. */
  overflow: hidden;
  overflow: clip;
}

.zmq__track {
  position: absolute;
  top: 0;
  left: var(--zmq-gutter);
  display: flex;
  align-items: baseline;
  white-space: nowrap;
  color: #fff;
  will-change: transform;
  transition: transform 600ms cubic-bezier(.22, 1, .36, 1);
}

.zmq__w {
  /* Отступ только справа: левый край слова должен совпадать с отметкой,
     иначе лента встаёт мимо на величину отступа. */
  padding-right: .3em;
  box-sizing: border-box;
  flex: 0 0 auto;
  opacity: .5;
  transition: opacity 600ms ease;
}

.zmq__w.is-on {
  font-weight: 700;
  opacity: 1;
}

/* Без скрипта подсвечено первое слово — блок не выглядит нерабочим. */
.zmq:not(.is-live) .zmq__w:first-child { opacity: 1; }
.zmq:not(.is-live) .zmq__track { transition: none; }

.zmq__dot { opacity: .55; }

.zmq__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Переезды выключены скриптом; убираем и плавность, чтобы ничего не ехало. */
@media (prefers-reduced-motion: reduce) {
  .zmq__track { transition: none; }
  .zmq__w { transition: none; }
}