/* ==============================
   PARALLAX - CONTENEUR PRINCIPAL
================================= */

.background {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

/* Les contenus du site doivent passer au-dessus du background */
main {
    position: relative;
    z-index: 1;
}

/* ==============================
   CALQUES DU PARALLAX
================================= */

.back-layer,
.front-layer,
.far-back-layer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

/* ==============================
   PLANÈTE LOINTAINE
================================= */

.far-back-planet {
    position: absolute;
    top: 35%;
    left: 50%;
    transform: translate(-40%, 0);
    width: 100%;
    height: 8%;
    max-height: 100vh;

    background-image: url("../media/img/sky-planet.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;

    z-index: 0;
}

/* ==============================
   NUAGES ARRIÈRE-PLAN
================================= */

.back-clouds {
    position: absolute;
    top: 20px;
    left: 0;
    width: 200%;
    height: 100%;
    max-height: 100vh;

    background-image: url("../media/img/back-clouds3.webp");
    background-size: auto 520px;
    background-repeat: repeat;
    background-position: top left;

    filter: blur(5px);
    opacity: 0.8;
    animation: moveCloudsBack 60s linear infinite;

    z-index: 2;
}

/* ==============================
   PLANÈTES ARRIÈRE-PLAN
================================= */

.back-planet {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, 0);
    width: 70%;
    height: 100%;
    max-height: 100vh;

    background-image: url("../media/img/planets_second_plan.webp");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;

    z-index: 1;
}

/* ==============================
   NUAGES AVANT-PLAN
================================= */

.front-clouds {
    position: absolute;
    top: 0;
    left: 0;
    width: 200%;
    height: 100%;

    background-image: url("../media/img/front-clouds3.webp");
    background-size: auto 460px;
    background-repeat: repeat;
    background-position: top left;

    filter: blur(3px);
    opacity: 1;
    animation: moveCloudsFront 30s linear infinite;

    z-index: 4;
}

/* ==============================
   PLANÈTES AVANT-PLAN
================================= */

.front-planet {
    position: absolute;
    top: 10%;
    left: 50%;
    transform: translate(-50%, 0);
    width: 90%;
    height: 100%;
    max-height: 70%;

    background-image: url("../media/img/front-planets4.webp");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: bottom center;

    z-index: 0;
}

/* ==============================
   ANIMATION NUAGES ARRIÈRE
================================= */

@keyframes moveCloudsBack {
    0% {
        transform: translateX(-50%);
    }

    100% {
        transform: translateX(0%);
    }
}

/* ==============================
   ANIMATION NUAGES AVANT
================================= */

@keyframes moveCloudsFront {
    0% {
        transform: translateX(-50%);
    }

    100% {
        transform: translateX(0%);
    }
}

/* ==============================
   NIGHT MODE - PARALLAX
================================= */

/* Transition douce pour le passage jour / nuit */
.back-clouds,
.front-clouds,
.far-back-planet,
.back-planet,
.front-planet {
    transition:
        opacity 0.55s ease,
        filter 0.55s ease;
}

/* Nuages assombris en mode nuit */
body.theme-night .back-clouds {
    opacity: 0.42;
    filter: blur(7px) brightness(0.42) saturate(0.75);
}

body.theme-night .front-clouds {
    opacity: 0.48;
    filter: blur(5px) brightness(0.46) saturate(0.78);
}

/* Si le toggle nuages est désactivé, il garde la priorité */
body.clouds-hidden .back-clouds,
body.clouds-hidden .front-clouds {
    opacity: 0;
    filter: blur(10px);
}

body.clouds-disabled .back-clouds,
body.clouds-disabled .front-clouds {
    opacity: 0;
    filter: none;
    background-image: none;
    animation: none;
}