/* ============================================================================
   site/fx/text.css — стили к fx/text.js: плашка по строкам, овал, перекат.

   Ни одно правило здесь не прячет текст само по себе. Все скрытые начальные
   состояния ставит text.js в тот момент, когда берёт узел в работу, — и
   классами (.fx-wait, .fx-text-own), и инлайн-стилями строк. Модуль не приехал
   или упал — страница стоит целиком, как без него.
   ========================================================================== */

/* Шапку, которую забрал text.js, main.js больше не проявляет: иначе поверх
   раскрытия строк шёл бы ещё подъём с прозрачностью — два движения на
   одном тексте. */
.js .rv.fx-text-own{ opacity:1; transform:none; transition:none }

/* Узел взят в работу, но шрифты ещё едут: строки режутся только по
   настоящим буквам, иначе переносы легли бы по запасному шрифту. Место
   держим, видимость — нет. Ставит и снимает text.js. */
.fx-wait{ visibility:hidden }

/* Копия текста для читалки экрана (сама разбивка — aria-hidden). */
.fx-sr{ position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap }

/* ── строки ──
   Строка — блок по ширине своего текста и без переноса: переносы уже
   сняты с живой вёрстки (split.js), второй раз их решать нельзя. Ширина по
   тексту, а не во всю колонку — чтобы плашка и овал были по словам, а не
   по пустоте справа. */
.fx-lines{ display:block }
.fx-l{ display:block; width:fit-content; max-width:none; white-space:nowrap }
.fx-lines[data-al="center"] > .fx-l{ margin-inline:auto }
.fx-lines[data-al="end"] > .fx-l{ margin-left:auto }

/* ── плашка по строкам ── */
.fx-hl-l{ position:relative }
.fx-hl-b{ position:absolute; inset:0; transform-origin:100% 50%; pointer-events:none }

/* Тихая плашка абзаца — оттенок полотна, а не вспышка (у Ландо —
   dark-green-tint-1 под основным текстом). Сначала готовый цвет, потом
   смесь для движков, которые её знают. */
:root{ --fx-quiet:#16392E; --fx-quiet:color-mix(in srgb, var(--acc) 22%, var(--bg)) }
.paper{ --fx-quiet:#D5E0DB; --fx-quiet:color-mix(in srgb, var(--paper-ink) 12%, var(--paper)) }
.warm{ --fx-quiet:#E2DAC6; --fx-quiet:color-mix(in srgb, var(--sand-ink) 11%, var(--sand)) }
.fx-hl-q{ background:var(--fx-quiet) }

/* ── овал ──
   Обёртка режет эллипсом, строка внутри опускается, буквы — каждая сама. */
.fx-ov-l{ display:block }
/* Эллипс с центром на верхней кромке открывает и то, что ВЫШЕ строки, а
   буквы подняты на 40 % + 40 %: первые полсекунды заголовок налезал на
   надпись над ним («ЗАЧЕМ ЭТ…НУЖ»). У Ландо над заголовком пусто, у нас —
   надпись вплотную. Обрезаем строку её собственной коробкой (с запасом на
   надстрочные знаки «Й», «Ё»): буквы въезжают сверху внутрь строки. */
.fx-ov-c{ overflow:clip; overflow-clip-margin:.2em }
.fx-ch{ display:inline-block }

/* ── перекат букв ──
   Слово — строчный блок со своей обрезкой по высоте строки: копия буквы
   (::after) стоит ровно под ней и видна только тогда, когда сама буква
   уехала вверх. clip-path, а не overflow:hidden — он не трогает базовую
   линию строчного блока, и подпись не прыгает рядом со стрелкой.
   Высота окна — своя, 1.3 кегля, а не интерлиньяж подписи: при 1.55 окно
   вдвое выше букв, и уходящая строка и приходящая видны разом, с дырой
   между ними. 1.3 — ровно столько, чтобы в окно влезали и «Й» сверху, и
   хвост «у» снизу (Manrope), а сдвиг на высоту окна уносил букву целиком.
   Строку подписи это не трогает: её высоту держит интерлиньяж родителя.
   Задержки: вверх — слева направо (--i), обратно — с последней буквы (--r).
   0,6 с, power3.out, шаг 20 мс — как у Ландо. */
.fx-rw{ display:inline-block; white-space:nowrap; line-height:1.3; clip-path:inset(0 -.2em) }
.fx-rc{ display:inline-block; position:relative;
  transition:transform .6s cubic-bezier(.165,.84,.44,1) calc(var(--r, 0) * 20ms) }
.fx-rc::after{ content:attr(data-c); position:absolute; left:0; top:100% }
.fx-roll.is-on .fx-rc{ transform:translate3d(0,-100%,0); transition-delay:calc(var(--i, 0) * 20ms) }

@media (prefers-reduced-motion: reduce){
  .fx-rc{ transition:none }
  .fx-roll.is-on .fx-rc{ transform:none }
}