/* Появление заголовков через размытие (js/blur-reveal.js) */

/* До разбиения на слова прячем заголовки, чтобы не мигали.
   Страховка: если скрипт не отработал, через 2.5 с заголовки покажутся сами */
html.blur-reveal-js:not(.blur-reveal-ready) :is(h1, h2, .block-title) {
    opacity: 0;
    animation: blurRevealFallback 0s 2.5s forwards;
}

@keyframes blurRevealFallback {
    to {
        opacity: 1;
    }
}

.blur-reveal__w {
    display: inline-block;
    opacity: 0;
    filter: blur(.15em);
    transform: translateX(.35em);
    transition: opacity .7s ease, filter .8s ease, transform .9s cubic-bezier(.2, .8, .2, 1);
    transition-delay: calc(var(--blur-offset, 0ms) + var(--i, 0) * var(--blur-step, 60ms));
}

.blur-reveal.is-revealed .blur-reveal__w {
    opacity: 1;
    filter: blur(0);
    transform: none;
}

/* Группы (js: GROUPS) — собственная анимация появления элемента отключается, работает размытие по словам */
.fact__row .fact__column.blur-reveal-item,
.fact__row .fact__column.blur-reveal-item._watcher-view {
    opacity: 1;
    transform: none;
    transition: none;
}