/* Position des formes au début de page */
.left-shape {
    animation: left-shape-movement 1s ease-in-out forwards;
}

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

.image-in-gallery {
    animation: image-gallery-appear ease-in-out;
    animation-timeline: view();
    animation-range-end: contain 30%;
    animation-range-start: cover 0%;
}

/* 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%;
    }
}

@keyframes image-gallery-appear {
    0% {
        transform: scale(0.98);
        opacity: 0;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}