/* ---------- появления (js/reveals.js): скрытые состояния ставит только скрипт, без JS всё видно ---------- */

/* слова и буквы SplitText (span) — inline-block, иначе transform и маска не работают;
   у маски — запас под выносные элементы и курсивный свес, раскладка не меняется */
.rvw-mask, .rvw, .rvc { display: inline-block; }
.rvw-mask { padding: .2em .12em; margin: -.2em -.12em; }

/* расшифровка: настоящий символ прозрачный (место занято), поверх — случайный глиф */
.rv-c { position: relative; }
.rv-c.rv-x, .rv-c.rv-s { color: transparent; }
.rv-c.rv-s::after { content: attr(data-g); position: absolute; left: 0; top: 0; color: var(--rv-g, var(--acc)); }
.sculpt { --rv-g: var(--sc-acc); }

/* бордеры, которые прорисовываются: рамку подменяет псевдоэлемент того же цвета со scaleX(--rv-x) */
.rv-bt, .rv-bb { position: relative; }
.rv-bt { border-top-color: transparent !important; }
.rv-bb { border-bottom-color: transparent !important; }
.rv-bt::before, .rv-bb::after {
  content: ''; position: absolute; left: 0; right: 0; height: 1px; pointer-events: none;
  background: var(--rv-c); transform: scaleX(var(--rv-x, 1)); transform-origin: 0 50%;
}
.rv-bt::before { top: -1px; }
.rv-bb::after { bottom: -1px; }
/* готовые линии-псевдоэлементы секций */
.ab-kicker::after, .sc-eyebrow::before { transform: scaleX(var(--rv-x, 1)); transform-origin: 0 50%; }

/* «Scroll to explore»: линия начинает расти, когда появилась строка */
.rv-on .cue:not(.rv-go) i { animation: none; transform: scaleX(0); }

/* плашки-картинки бегущей строки раскрываются от центра (переменная на ряду — у клонов тоже) */
.rv-on .mq-pill { clip-path: inset(0 calc(var(--rv-p, 0) * 50%) round 999px); }
.rv-on .mq-pill img { scale: calc(1 + var(--rv-p, 0) * .4); }