/* ==========================================================================
Animations communes à toutes les pages
========================================================================== */


/* ==========================================================================
Animations des cartes de la home
========================================================================== */

@keyframes move-cards {
    0% {
        transform: rotate(0deg) scale(1);
        box-shadow: 0px 0px 0px rgba(0, 0, 0, 0);
    }
    100% {
        transform: rotate(-2deg) scale(1.1);
        box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.2);
    }
}


/* ==========================================================================
Animations des déclenchements par scroll Génériques
========================================================================== */

/* Common setup */
[data-animate-on-scroll] { visibility: hidden; }
.animated { visibility: visible; }

/* === ZOOM IN Gauche (avec keyframes) === */
.before-zoom-in-gauche { opacity: 0; }
.zoom-in-gauche { animation: zoomInGauche 1.5s ease forwards; }

@keyframes zoomInGauche {
    0% { opacity: 0; transform: scale(5) translateX(-400px) rotate(-10deg); filter:blur(20px); }
    100% { opacity: 1; transform: scale(1) translateX(0px) rotate(10deg); filter:blur(0); }
}

/* === ZOOM IN Droite (avec keyframes) === */
.before-zoom-in-droite { opacity: 0; }
.zoom-in-droite { animation: zoomInDroite 1.5s ease forwards; }
@keyframes zoomInDroite {
    0% { opacity: 0; transform: scale(5) translateX(100px) rotate(-10deg); filter:blur(20px); }
    100% { opacity: 1; transform: scale(1) translateX(0px) rotate(10deg);  filter:blur(0); }
}

/* === Slide from top-left === */
.before-slide-top-left { opacity: 0; }
.slide-top-left { animation: sliceFromTopLeft 1.5s ease forwards; }
@keyframes sliceFromTopLeft {
    0% { opacity: 0; transform: translate(-250px, -800px); }
    100% { opacity: 1; transform: translate(0px, 0px); }
}

/* === Slide from top === */
.before-slide-top { opacity:0; }
.slide-top { animation: sliceFromTop 1.5s ease forwards; }
@keyframes sliceFromTop {
    0% { opacity: 0; transform: translateY(-800px); }
    100% { opacity: 1; transform: translateY(0px); }
}

/* === Slide from top-right === */
.before-slide-top-right { opacity:0; }
.slide-top-right { animation: sliceFromTopRight 1.5s ease forwards; }
@keyframes sliceFromTopRight {
    0% { opacity: 0; transform: translate(250px, -800px); }
    100% { opacity: 1; transform: translate(0px, 0px); }
}

/* Slide Left */
.before-slide-left {  opacity: 0; }
.slide-left { animation: slideFromLeft 1.2s ease .7s forwards; }
@keyframes slideFromLeft {
    0% { opacity: 0; transform: translateX(400px); }
    100% { opacity: 1; transform: translateX(0px); }
}

/* Slide Right */
.before-slide-right { opacity: 0; }
.slide-right { animation: slideFromRight 1.2s ease .8s forwards; }
@keyframes slideFromRight {
    0% { opacity: 0; transform: translateX(-400px); }
    100% { opacity: 1; transform: translateX(0px); }
}

/* Zoom In */
.before-zoom-in { opacity: 0; }
.zoom-in { animation: zoomIn 2s ease forwards; }
@keyframes zoomIn {
    from { opacity: 0; transform: scale(5); filter:blur(100px); }
    to   { opacity: 1; transform: scale(1); filter:blur(0); }
}



/* ==========================================================================
Animations des déclenchements par scroll Spécifiques
========================================================================== */

/* Flou texte */
.before-flou-txt { opacity: 0; }
.flou-txt { animation: flouTxt 1.2s ease forwards; }
@keyframes flouTxt {
    from { opacity: 0; filter:blur(100px); }
    to   { opacity: 1; filter:blur(0); }
}

/* Slide 2 Left */
.before-slide-2-top-left {  opacity: 0; }
.slide-2-top-left { animation: slideFromBottomRight 1.2s ease .7s forwards; }
@keyframes slideFromBottomRight {
    0% { opacity: 0; transform: translateX(400px) translateY(400px); }
    100% { opacity: 1; transform: translateX(0px) translateY(0px); }
}

/* Slide 2 Right */
.before-slide-2-top-right { opacity: 0; }
.slide-2-top-right { animation: slideFromBottomLeft 1.2s ease .8s forwards; }
@keyframes slideFromBottomLeft {
    0% { opacity: 0; transform: translateX(-400px) translateY(400px); }
    100% { opacity: 1; transform: translateX(0px) translateY(0px); }
}