/* Imagic Animation : dépliage 3D au scroll
   La perspective est portée par le bloc lui-même, pour fonctionner quel que soit son parent */

.imagic-unfold{
    opacity: 0;
    transition: transform 0.8s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.4s ease-out;
    will-change: transform, opacity;
    backface-visibility: hidden;
}
.imagic-unfold.imagic-unfold--open{
    opacity: 1;
}

/* rotation verticale : depuis le bord supérieur */
.imagic-unfold--vertical{
    transform-origin: top center;
    transform: perspective(600px) rotateX(-90deg);
}
.imagic-unfold--vertical.imagic-unfold--open{
    transform: perspective(600px) rotateX(0deg);
}

/* rotation horizontale : depuis le bord gauche */
.imagic-unfold--horizontal{
    transform-origin: left center;
    transform: perspective(600px) rotateY(90deg);
}
.imagic-unfold--horizontal.imagic-unfold--open{
    transform: perspective(600px) rotateY(0deg);
}

/* contenu du bloc : apparition en cascade de chaque enfant direct */
.imagic-unfold > *{
    opacity: 0;
    transform: translateY(15px);
    transition: transform 0.5s ease-out, opacity 0.5s ease-out;
}
.imagic-unfold--open > *{
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.3s;
}
.imagic-unfold--open > :nth-child(1){
    transition-delay: 0.1s;
}
.imagic-unfold--open > :nth-child(2){
    transition-delay: 0.2s;
}

/* disparition en bandes : bandes horizontales par-dessus le bloc, pilotées au scroll en JS */
.imagic-bandes__conteneur{
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    pointer-events: none;
}
.imagic-bandes__bande{
    flex: 1;
    background-color: var(--imagic-bandes-couleur, #000);
    transform: scaleY(0);
    transform-origin: bottom;
    will-change: transform;
    /* léger chevauchement : évite un fil d'image entre deux bandes */
    margin-top: -1px;
    padding-bottom: 1px;
}
.imagic-bandes__bande:first-child{
    margin-top: 0;
}
/* remontée de la section suivante : pas d'ancrage du défilement (le navigateur corrigerait le scroll à chaque image, d'où des à-coups) */
html.imagic-bandes-remontee,
html.imagic-bandes-remontee body{
    overflow-anchor: none;
}

/* section qui suit le bloc : passe au-dessus du bloc et de ses bandes en remontant
   (!important et variables : les conteneurs Elementor imposent position: var(--position) et z-index: var(--z-index)) */
.imagic-bandes-suivante{
    --position: relative;
    --z-index: 3;
    position: relative !important;
    z-index: 3 !important;
}