/* ===========================================================
   Scroll-анимации (IntersectionObserver)
   Элементы с классом .anim скрыты до появления в зоне видимости.
   JS добавляет .is-visible при входе и убирает при выходе за экран,
   поэтому блоки «прилетают» и «улетают», тексты проявляются/исчезают.
   =========================================================== */

/* Прячем элементы ТОЛЬКО когда включён JS,
   чтобы при отключённом JS контент оставался видимым */
.js .anim {
    opacity: 0;
    transition-property: opacity, transform, filter;
    transition-duration: 0.8s;
    transition-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
    will-change: opacity, transform;
}

.anim.is-visible {
    opacity: 1;
    transform: none;
    filter: none;
}

/* --- Варианты эффектов (скрытое состояние) --- */
.anim-fade   { /* только прозрачность */ }

.anim-up     { transform: translateY(48px); }
.anim-down   { transform: translateY(-48px); }
.anim-left   { transform: translateX(-72px); }   /* прилетает слева */
.anim-right  { transform: translateX(72px); }    /* прилетает справа */

.anim-zoom   { transform: scale(0.82); }
.anim-zoom-out { transform: scale(1.12); }

.anim-rotate { transform: rotate(-12deg) scale(0.9); }
.anim-rotate-right { transform: rotate(12deg) scale(0.9); }

.anim-flip   { transform: perspective(900px) rotateX(55deg); transform-origin: top center; }
.anim-flip-up { transform: perspective(900px) rotateX(-55deg); transform-origin: bottom center; }

.anim-blur   { filter: blur(12px); transform: scale(1.04); }
.anim-skew   { transform: skewX(-12deg) translateX(-40px); }

/* --- Скорость --- */
.anim-fast   { transition-duration: 0.5s; }
.anim-slow   { transition-duration: 1.25s; }

/* --- Мягкое появление для текста (без сдвига) --- */
.anim-text   { transform: translateY(14px); }

/* Уважение к настройкам доступности */
@media (prefers-reduced-motion: reduce) {
    .anim {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        transition: none !important;
    }
}