/*
 * BSF33 – Animation carte accueil
 * Les sélecteurs sont volontairement isolés à la section détectée par le script.
 */

.bsf33-menu-motion {
    --bsf33-lift: 5px;
    --bsf33-zoom: 1.035;
    --bsf33-card-duration: 620ms;
}

.bsf33-menu-motion.bsf33-motion-normal {
    --bsf33-lift: 8px;
    --bsf33-zoom: 1.055;
    --bsf33-card-duration: 580ms;
}

.bsf33-menu-motion.bsf33-motion-dynamic {
    --bsf33-lift: 12px;
    --bsf33-zoom: 1.075;
    --bsf33-card-duration: 520ms;
}

.bsf33-menu-motion .bsf33-animated-card {
    position: relative;
    transform-origin: center bottom;
    will-change: transform, opacity;
}

.bsf33-menu-motion.bsf33-motion-ready .bsf33-animated-card {
    opacity: 0;
    transform: translate3d(0, 22px, 0) scale(0.985);
    transition:
        opacity var(--bsf33-card-duration) ease var(--bsf33-card-delay, 0ms),
        transform var(--bsf33-card-duration) cubic-bezier(.2, .75, .25, 1) var(--bsf33-card-delay, 0ms),
        box-shadow 260ms ease;
}

.bsf33-menu-motion.bsf33-motion-ready .bsf33-animated-card.bsf33-card-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
}

.bsf33-menu-motion .bsf33-animated-image {
    backface-visibility: hidden;
    transform: translateZ(0) scale(1);
    transition:
        transform 520ms cubic-bezier(.2, .75, .25, 1),
        filter 320ms ease;
    will-change: transform;
}

@media (hover: hover) and (pointer: fine) {
    .bsf33-menu-motion.bsf33-motion-hover
    .bsf33-animated-card.bsf33-card-visible:hover {
        transform: translate3d(0, calc(-1 * var(--bsf33-lift)), 0);
        box-shadow: 0 16px 34px rgba(39, 22, 12, 0.16);
        z-index: 2;
    }

    .bsf33-menu-motion.bsf33-motion-hover
    .bsf33-animated-card.bsf33-card-visible:hover
    .bsf33-animated-image {
        transform: translateZ(0) scale(var(--bsf33-zoom));
        filter: saturate(1.04) contrast(1.02);
    }
}

@media (hover: none), (pointer: coarse) {
    .bsf33-menu-motion.bsf33-motion-hover
    .bsf33-animated-card.bsf33-card-touch.bsf33-card-visible {
        transform: translate3d(0, -3px, 0) scale(0.992);
    }

    .bsf33-menu-motion.bsf33-motion-hover
    .bsf33-animated-card.bsf33-card-touch
    .bsf33-animated-image {
        transform: translateZ(0) scale(1.025);
    }
}

@media (prefers-reduced-motion: reduce) {
    .bsf33-menu-motion .bsf33-animated-card,
    .bsf33-menu-motion .bsf33-animated-image {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
        animation: none !important;
    }
}