/* ==========================================================
   SCROLL REVEAL — появление при прокрутке
   ========================================================== */

/* База: opacity + transform. --rv-* задаются классами ниже.
   ВАЖНО: transition-delay НЕ в базе — иначе скрытие будет с задержкой
   (элемент «залипнет» видимым после ухода из зоны).
   Delay задаём только в .is-shown — тогда:
     - show → плавно с задержкой (стаггер)
     - hide → мгновенно, без задержки
*/
.rv {
    opacity: 0;
    transform: translate3d(var(--rv-x, 0), var(--rv-y, 0), 0) scale(var(--rv-s, 1));
    transition-property: opacity, transform;
    transition-duration: var(--rv-dur, 900ms);
    transition-timing-function: var(--rv-ease, cubic-bezier(0.16, 1, 0.3, 1));
    /* transition-delay — НЕ здесь (по умолчанию 0) */
}

.rv.is-shown {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    transition-delay: var(--rv-delay, 0ms);
}

/* Направления */
.rv--up {
    --rv-y: 50px;
}

.rv--down {
    --rv-y: -40px;
}

.rv--left {
    --rv-x: -40px;
}

.rv--right {
    --rv-x: 40px;
}

.rv--scale {
    --rv-s: 0.9;
}

.rv--scale-s {
    --rv-s: 0.95;
}

/* Только прозрачность — для элементов, у которых уже есть свой transform
   (rotate/matrix/translate). Transform не трогаем вообще. */
.rv-io {
    opacity: 0;
    transition: opacity var(--rv-dur, 1000ms) var(--rv-ease, cubic-bezier(0.16, 1, 0.3, 1));
}

.rv-io.is-shown {
    opacity: 1;
    transition-delay: var(--rv-delay, 0ms);
}

/* Полоски: растут слева направо (scaleX) */
.rv-line {
    transform-origin: left center;
    transform: scaleX(0);
    transition: transform var(--rv-dur, 1100ms) var(--rv-ease, cubic-bezier(0.16, 1, 0.3, 1));
}

.rv-line.is-shown {
    transform: scaleX(1);
    transition-delay: var(--rv-delay, 0ms);
}

/* Точки/мелкие кружки: pop с лёгким overshoot */
.rv-pop {
    transform: scale(0);
    transition: transform var(--rv-dur, 700ms) cubic-bezier(0.34, 1.56, 0.64, 1);
}

.rv-pop.is-shown {
    transform: scale(1);
    transition-delay: var(--rv-delay, 0ms);
}

/* На мобилке 1rem = 1% ширины. Уменьшаем дистанции пропорционально */
@media (max-width: 767px) {
    .rv--up {
        --rv-y: 1.5rem;
    }

    .rv--down {
        --rv-y: -1.25rem;
    }

    .rv--left {
        --rv-x: -1.25rem;
    }

    .rv--right {
        --rv-x: 1.25rem;
    }
}

/* Уважаем prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {

    .rv,
    .rv-io,
    .rv-line,
    .rv-pop {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

/* Плавное появление sticky-шапки на первой загрузке */
@keyframes rvHeaderIn {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

body.header-ready .site-header__inner>.hero-logo,
body.header-ready .site-header__inner>.nav,
body.header-ready .site-header__inner>.hero-burger {
    animation: rvHeaderIn 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.15s both;
}

@media (prefers-reduced-motion: reduce) {
    body.header-ready .site-header__inner>* {
        animation: none;
    }
}

/* Оптимизация производительности */
.rv,
.rv-io,
.rv-line,
.rv-pop {
    will-change: opacity, transform;
}

.rv.is-shown,
.rv-io.is-shown,
.rv-line.is-shown,
.rv-pop.is-shown {
    will-change: auto;
}

/* Убираем blur на мобильных */
@media (max-width: 767px) {
    .hero-bg-blur {
        filter: none !important;
    }
}