/* =========================
   БАЗОВЫЕ АНИМАЦИИ
   ========================= */

.reveal {
    opacity: 0;
    transform: translateY(28px);
    pointer-events: none;
    will-change: opacity, transform;
    backface-visibility: hidden;
}

.reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.reveal-up {
    opacity: 0;
    transform: translateY(42px);
    pointer-events: none;
    will-change: opacity, transform;
    backface-visibility: hidden;
}

.reveal-up.is-visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

/* ВАЖНО:
   когда на карточке одновременно reveal-up + hover-lift,
   transition должен быть один общий, иначе hover-lift ломает плавность */
.reveal.hover-lift,
.reveal-up.hover-lift {
    transition:
        opacity 2.8s ease,
        transform 2.8s ease,
        box-shadow 0.25s ease,
        filter 0.25s ease;
}

.reveal-scale {
    opacity: 0;
    transform: scale(0.97);
    animation: heroArtIntro 8s ease-out forwards;
    will-change: opacity, transform;
    backface-visibility: hidden;
}

.reveal-scale.is-visible {
    opacity: 1;
    transform: scale(1);
}

@keyframes heroArtIntro {
    0% {
        opacity: 0;
        transform: scale(0.97);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.hover-lift:hover {
    transform: translateY(-6px);
    filter: brightness(1.03);
}

.float-soft {
    animation: floatSoft 8s ease-in-out infinite;
}

@keyframes floatSoft {
    0% {
        transform: translateY(-50%) translateX(0);
    }
    50% {
        transform: translateY(calc(-50% - 10px)) translateX(4px);
    }
    100% {
        transform: translateY(-50%) translateX(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .reveal,
    .reveal-up {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
        pointer-events: auto !important;
    }

    .reveal-scale {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
    }

    .float-soft {
        animation: none !important;
    }
}