/* Эффекты. Работают только при html.fx (EFFECTS=true и нет prefers-reduced-motion). Только transform и opacity. */
.fx .rv {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
  transition-delay: var(--d, 0ms);
}
.fx .rv.is-in { opacity: 1; transform: none; }

/* Заголовки: маска-подъём по словам */
.fx [data-split] .w {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding: .08em 0 .16em;
  margin: -.08em 0 -.16em;
}
.fx [data-split] .wi {
  display: inline-block;
  transform: translateY(110%);
  transition: transform .9s var(--ease);
  transition-delay: calc(var(--k, 0) * 55ms);
}
.fx [data-split].is-in .wi { transform: none; }

/* Высказывание: слова проявляются по мере прокрутки */
.fx .statement .sw { opacity: .16; transition: opacity .6s var(--ease); }
.fx .statement .sw.on { opacity: 1; }

/* Кнопки: мягкий подъём */
.fx .btn--primary:hover { transform: translateY(-1px); }