/**
 * Styles pour l'animation au scroll #framesAnimation.
 *
 * Effet scroll-pinning :
 *  - .frames-animation-section reçoit une grande hauteur (course de scroll)
 *  - .frames-animation-pin (le section_wrapper interne de Muffin) devient sticky
 *    à 100vh de hauteur, ce qui pin les 2 colonnes en place
 *  - #framesAnimation occupe toute sa colonne, le canvas remplit toute la div
 *  - Une fois la frame 54 atteinte, le sticky relâche et le scroll continue
 */

.frames-animation-section {
    min-height: 350vh !important;
    overflow: visible !important;
}

/*
 * Muffin Builder injecte un .mcb-background-overlay quand la section a un fond.
 * Avec notre min-height: 350vh il s'étendrait sur toute la course de scroll
 * (effet de voile coloré sur 3.5 écrans). On le contraint à la zone visible
 * en le rendant sticky de la même façon que le pin.
 */
.frames-animation-section > .mcb-background-overlay {
    /* position: sticky !important;
    top: 0 !important;
    height: 100vh !important;
    max-height: 100vh !important; */
    display: none !important;
}

.frames-animation-section > .frames-animation-pin {
    position: sticky !important;
    top: 0 !important;
    height: 100vh !important;
    overflow: hidden !important;
    align-items: stretch !important;
}

#framesAnimation.frames-animation {
    position: relative !important;
    height: 100% !important;
    align-self: stretch !important;
    overflow: hidden !important;
    border-radius: 30px !important;
}

#framesAnimation .frames-animation__canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    display: block;
}

#framesAnimation > *:not(.frames-animation__canvas) {
    position: relative;
    z-index: 1;
}