/* ═══ NIO Anim — появление «fade up» по принципу Elementor (keyframes), но повторяемое ═══
   Класс на виджет/контейнер: nio-fade-up
   ВАЖНО про position:fixed: пока на элементе висит CSS-анимация с transform, Chrome держит
   его containing-block'ом для fixed-потомков (подсказки слайдеров — fixed — улетали бы).
   Поэтому после завершения анимации JS снимает .nio-inview и ставит статичный .nio-shown
   (только opacity, без transform/animation) → containing-block исчезает.

   Переменные: --nio-fu-dist (44px), --nio-fu-dur (1.2s), --nio-fu-delay (0s)
   Модификаторы: nio-fu-sm / nio-fu-lg (дистанция), nio-fu-fast / nio-fu-slow (скорость) */

.nio-fade-up{ opacity: 0; }            /* скрытый старт, как elementor-invisible */
.nio-fade-up.nio-shown{ opacity: 1; }  /* финиш: статично, без transform/animation */

.nio-fade-up.nio-inview{
    animation-name: nioFadeUp;
    animation-duration: var(--nio-fu-dur, 1.2s);
    animation-timing-function: cubic-bezier(.22,.61,.36,1);
    animation-fill-mode: forwards;
    animation-delay: var(--nio-fu-delay, 0s);
}
@keyframes nioFadeUp{
    from { opacity: 0; transform: translateY(var(--nio-fu-dist, 44px)); }
    to   { opacity: 1; transform: none; }
}

/* модификаторы */
.nio-fu-sm{   --nio-fu-dist: 28px; }
.nio-fu-lg{   --nio-fu-dist: 64px; }
.nio-fu-fast{ --nio-fu-dur: .8s; }
.nio-fu-slow{ --nio-fu-dur: 1.8s; }

/* в редакторе Elementor элементы всегда видимы */
body.elementor-editor-active .nio-fade-up{ opacity: 1; }

/* уважение к «уменьшить движение» */
@media (prefers-reduced-motion: reduce){
    .nio-fade-up{ opacity: 1; }
    .nio-fade-up.nio-inview{ animation: none; }
}