.left-shape {
    animation: left-shape-movement 1s ease-in-out forwards;
}

.right-shape {
    animation: right-shape-movement 1s ease-in-out forwards;
}

.project-img {
    animation: img-appear 1s ease-in-out;
    animation-timeline: view();
    animation-range-start: cover 0%;
    animation-range-end: contain 40%;
}

/* Forme de gauche qui vient de la gauche au loading */
@keyframes left-shape-movement {
    0% {
        left: -100%;
    }
    100% {
        left: 0%;
    }
}

/* Forme de droite qui vient de la droite au loading */
@keyframes right-shape-movement {
    0% {
        left: 100%;
    }
    100% {
        left: 60%;
    }
}

/* Image des projets pro qui apparaissent en fondu */
@keyframes img-appear {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}