/* ========================================================================
   Scroll Reveal — анимация блоков при попадании во вьюпорт
   IntersectionObserver-driven, без зависимостей
   API: data-reveal, data-reveal-delay, data-reveal-duration,
        data-reveal-distance, data-reveal-once, data-reveal-stagger
   ======================================================================== */

[data-reveal] {
    --reveal-duration: 1100ms;
    --reveal-delay: 0ms;
    --reveal-distance: 80px;

    opacity: 0;
    transition-property: opacity, transform, filter;
    transition-duration: var(--reveal-duration);
    transition-delay: var(--reveal-delay);
    transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
    backface-visibility: hidden;
    transform-origin: center bottom;
}

/* === БАЗОВЫЕ ТИПЫ (мягкий fade — используются в статьях блога) === */
[data-reveal="fade-up"] {
    transform: translate3d(0, var(--reveal-distance), 0) scale(0.96);
    filter: blur(6px);
}
[data-reveal="fade-down"] {
    transform: translate3d(0, calc(-1 * var(--reveal-distance)), 0) scale(0.96);
    filter: blur(6px);
}
[data-reveal="fade-left"] {
    transform: translate3d(var(--reveal-distance), 0, 0) scale(0.97);
    filter: blur(4px);
}
[data-reveal="fade-right"] {
    transform: translate3d(calc(-1 * var(--reveal-distance)), 0, 0) scale(0.97);
    filter: blur(4px);
}
[data-reveal="zoom-in"] {
    transform: scale(0.82);
    filter: blur(4px);
}
[data-reveal="zoom-out"] {
    transform: scale(1.12);
    filter: blur(4px);
}
[data-reveal="blur"]  { filter: blur(14px); transform: scale(1.02); }
[data-reveal="fade"]  { /* только opacity */ }

/* === WOW-ТИПЫ (главная, каталог, информ-страницы) === */

/* rise — секция "разворачивается" вверх с лёгким 3D-наклоном */
[data-reveal="rise"] {
    transform: perspective(1400px) translate3d(0, 100px, 0) scale(0.92) rotateX(6deg);
    filter: blur(8px);
    transform-origin: center top;
}

/* pop — карточка "выскакивает" — сильное сжатие + лёгкий подъём */
[data-reveal="pop"] {
    transform: translate3d(0, 40px, 0) scale(0.78);
    filter: blur(4px);
    transform-origin: center bottom;
}

/* === Зеркальные состояния при скролле вверх === */
.reveal-up [data-reveal="fade-up"]:not(.is-visible)   {
    transform: translate3d(0, calc(-1 * var(--reveal-distance)), 0) scale(0.96);
}
.reveal-up [data-reveal="fade-down"]:not(.is-visible) {
    transform: translate3d(0, var(--reveal-distance), 0) scale(0.96);
}
.reveal-up [data-reveal="rise"]:not(.is-visible) {
    transform: perspective(1400px) translate3d(0, -100px, 0) scale(0.92) rotateX(-6deg);
    transform-origin: center bottom;
}
.reveal-up [data-reveal="pop"]:not(.is-visible) {
    transform: translate3d(0, -40px, 0) scale(0.78);
    transform-origin: center top;
}

/* Видимое состояние — единое для всех типов */
[data-reveal].is-visible {
    opacity: 1;
    transform: none;
    filter: none;
}

/* Активируем GPU только на время анимации */
[data-reveal].is-animating {
    will-change: opacity, transform, filter;
}

/* prefers-reduced-motion → анимация выключена полностью */
@media (prefers-reduced-motion: reduce) {
    [data-reveal] {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        transition: none !important;
    }
}