/* ==========================================================================
  ML Hero Stack – pile de photos animée
  ==========================================================================
  Les positions, rotations, z-index et délais sont injectés dynamiquement
  via variables CSS en inline style.
  ========================================================================== */

.ml-hero-stack,
.ml-hero-stack * {
    box-sizing: border-box;
}

/* ── Conteneur ── */
.ml-hero-stack {
    position: relative;
    width: 100%;
    max-width: 480px;
    /* Hauteur proportionnelle pour accueillir les photos en rotation */
    padding-bottom: 90%;
    margin: 0 auto;
}

/* ── Chaque photo ── */
.ml-hero-stack__item {
    position: absolute;
    width: 80%;
    aspect-ratio: 4 / 5;
    border-radius: var(--ml-radius-lg);
    overflow: hidden;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .22);
    left: var(--ml-x, 8%);
    top: var(--ml-y, 0%);
    z-index: var(--ml-z, 1);
    transform: rotate(var(--ml-rot, 0deg));
}

.ml-hero-stack__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    user-select: none;
    pointer-events: none;
}

/* ==========================================================================
   Animation – déclenchée par JS via la classe .is-animating
   (uniquement desktop, voir ml-hero-stack.js)
   ========================================================================== */

/* Phase 1 : photos cachées avant le démarrage de l'animation */
.ml-hero-stack.is-ready .ml-hero-stack__item {
    opacity: 0;
}

/* Phase 2 : animation en cours */
.ml-hero-stack.is-animating .ml-hero-stack__item {
    will-change: transform, opacity;
    animation: ml-stack-drop 0.5s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
    animation-delay: var(--ml-delay, 0ms);
}

@keyframes ml-stack-drop {
    0% {
        opacity: 0;
        transform: translateY(-70px) scale(0.88) rotate(var(--ml-rot, 0deg));
    }
    55% {
        opacity: 1;
        transform: translateY(6px) scale(1.02) rotate(var(--ml-rot, 0deg));
    }
    80% {
        transform: translateY(-3px) scale(0.995) rotate(var(--ml-rot, 0deg));
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1) rotate(var(--ml-rot, 0deg));
    }
}

/* ── Respect de prefers-reduced-motion ── */
@media (prefers-reduced-motion: reduce) {
    .ml-hero-stack.is-ready .ml-hero-stack__item,
    .ml-hero-stack.is-animating .ml-hero-stack__item {
        opacity: 1 !important;
        animation: none !important;
        will-change: auto !important;
    }
}

/* ── Mobile : affichage statique, zéro animation ──
   (le JS ne démarre pas l'animation en dessous de 1024px,
    cette règle est un filet de sécurité CSS) */
@media (max-width: 1023px) {
    .ml-hero-stack {
        /* Légèrement moins haut sur mobile */
        padding-bottom: 100%;
    }

    .ml-hero-stack.is-ready .ml-hero-stack__item,
    .ml-hero-stack.is-animating .ml-hero-stack__item {
        opacity: 1 !important;
        animation: none !important;
        will-change: auto !important;
    }
}