/* Анимации появления крупного текста (js/text-fx.js). Начальные состояния — только при .fx-ready (есть JS). */
.fx-w { display: inline-block; white-space: nowrap; }
.fx-c { display: inline-block; }

/* ─ slide-l / slide-r / slide-alt: слова въезжают сбоку и проявляются шторкой ─ */
.fx-ready [data-fx^="slide"] .fx-w {
  opacity: 0; transform: translateX(-.45em) skewX(-8deg);
  clip-path: inset(-30% 100% -30% 0);
  transition: opacity .6s ease, transform .9s cubic-bezier(.2,.8,.2,1), clip-path .9s cubic-bezier(.7,0,.2,1);
  transition-delay: calc(var(--w) * 70ms);
}
.fx-ready [data-fx="slide-r"] .fx-w,
.fx-ready [data-fx="slide-alt"] .fx-w[data-side="r"] {
  transform: translateX(.45em) skewX(8deg);
  clip-path: inset(-30% 0 -30% 100%);
}
.fx-ready [data-fx="slide-alt"] .fx-w { transition-delay: calc(var(--l) * 140ms + var(--w) * 30ms); }
.fx-ready [data-fx^="slide"].fx-on .fx-w { opacity: 1; transform: none; clip-path: inset(-30% 0 -30% 0); }

/* ─ blur: из размытого и нечитаемого — в чёткий текст, буквы в случайном порядке ─ */
.fx-ready [data-fx="blur"] .fx-c {
  opacity: .08; filter: blur(14px); transform: scale(1.25) translateY(.1em);
  transition: opacity 1s ease, filter 1.2s ease, transform 1.2s cubic-bezier(.2,.8,.2,1);
  transition-delay: calc(var(--r) * 900ms);
}
.fx-ready [data-fx="blur"].fx-on .fx-c { opacity: 1; filter: blur(0); transform: none; }

/* ─ scramble: случайные символы бледные, настоящие буквы — в цвет ─ */
.fx-ready [data-fx="scramble"] .fx-c { text-align: center; opacity: .35; }
.fx-ready [data-fx="scramble"] .fx-c.fx-done { opacity: 1; transition: opacity .3s; }

/* ─ type: набор по буквам, курсор идёт за последней буквой ─ */
.fx-ready [data-fx="type"] .fx-c:not(.fx-shown) { opacity: 0; }
.fx-caret {
  display: inline-block; width: .07em; height: .78em; margin: 0 .02em; vertical-align: baseline;
  background: var(--red); animation: fx-caret .7s steps(1) infinite;
}
@keyframes fx-caret { 50% { opacity: 0; } }

/* на телефоне — короче и легче (blur дорогой для слабых устройств) */
@media (max-width: 768px) {
  .fx-ready [data-fx="blur"] .fx-c { filter: blur(8px); transition-delay: calc(var(--r) * 600ms); }
  .fx-ready [data-fx^="slide"] .fx-w { transition-delay: calc(var(--w) * 50ms); }
}