/* ==========================================================
   INTRO LOADER
========================================================== */


/* ==========================================================
   BODY PENDANT LE CHARGEMENT
========================================================== */

body.is-loading {
    overflow: hidden;
}


/* ==========================================================
   CONTENU DU SITE
========================================================== */

#site-content {
    opacity: 0;
    visibility: visible;

    transition:
        opacity 0.55s ease;
}


/*
    Le contenu apparaît en fondu
    exactement quand le loader se termine.
*/
body:has(.intro-loader.is-writing) #site-content {
    animation:
        introSiteReveal
        0.55s
        ease
        5.12s
        forwards;
}


@keyframes introSiteReveal {

    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }

}


/* ==========================================================
   CONTENEUR PRINCIPAL DU LOADER
========================================================== */

.intro-loader {
    position: fixed;
    inset: 0;

    z-index: 99999;

    width: 100%;
    height: 100vh;
    height: 100dvh;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;

    background: var(--color-bg, #e9ded4);

    opacity: 1;
    visibility: visible;

    /*
        Fin de l'écriture de "creation".
    */
    --final-reveal-delay: 3.82s;

    /*
        Fin complète de l'intro :
        3.82s + 1.30s du nuage = 5.12s
    */
    --intro-end: 5.12s;

    /*
        Aucun fondu supplémentaire.
    */
    transition: none;
}


/* ==========================================================
   DISPARITION AUTOMATIQUE DU LOADER

   Dès que .is-writing est présent :
   le loader reste visible pendant 5.12 secondes,
   puis disparaît instantanément.

   Le contenu du site étant déjà visible derrière,
   la page prend immédiatement le relais.
========================================================== */

.intro-loader.is-writing {
    animation:
        introLoaderAutoHide
        0.001s
        linear
        var(--intro-end)
        forwards;
}


@keyframes introLoaderAutoHide {

    from {
        opacity: 1;
        visibility: visible;
    }

    to {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }

}


/*
    Compatibilité avec ton JavaScript actuel.

    Même si le JS ajoute .is-hidden plus tard,
    le loader aura déjà disparu automatiquement.
*/
.intro-loader.is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}


/* ==========================================================
   SCÈNE DU LOADER
========================================================== */

.intro-scene {
    position: relative;

    width: min(
        94vw,
        1120px
    );

    aspect-ratio: 16 / 9;

    display: flex;
    align-items: center;
    justify-content: center;
}


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

.intro-planet {
    position: absolute;

    top: 50%;
    left: 50%;

    z-index: 1;

    width: min(
        34vw,
        430px
    );

    aspect-ratio: 1 / 1;

    border-radius: 50%;

    background:
        linear-gradient(
            90deg,
            #bfe8d6 0%,
            #78d7de 100%
        );

    opacity: 0;

    filter: blur(8px);

    transform:
        translate(
            -50%,
            -50%
        )
        scale(0.70);

    will-change:
        opacity,
        transform,
        filter;
}


/* Planète à la fin de "creation" */
.intro-loader.is-writing .intro-planet {
    animation:
        introPlanetAppear
        0.30s
        cubic-bezier(
            0.22,
            1,
            0.36,
            1
        )
        var(--final-reveal-delay)
        forwards;
}


/*
    Le JS peut toujours ajouter .is-visible.
    Aucun effet supplémentaire ici.
*/
.intro-planet.is-visible {
}


/* ==========================================================
   ANIMATION PLANÈTE
========================================================== */

@keyframes introPlanetAppear {

    0% {
        opacity: 0;

        filter: blur(8px);

        transform:
            translate(
                -50%,
                -50%
            )
            scale(0.70);
    }


    100% {
        opacity: 1;

        filter: blur(0);

        transform:
            translate(
                -50%,
                -50%
            )
            scale(1);
    }

}


/* ==========================================================
   SVG DU LOGO
========================================================== */

.intro-write-logo {
    position: relative;

    z-index: 2;

    width: min(
        92vw,
        1040px
    );

    height: auto;

    display: block;

    overflow: visible;

    pointer-events: none;
}


/* ==========================================================
   BASE DE TOUS LES TRACÉS DU MASQUE
========================================================== */

.intro-mask-path {
    fill: none;

    stroke: #ffffff;

    stroke-linecap: round;
    stroke-linejoin: round;

    stroke-dasharray: 1;
    stroke-dashoffset: 1;

    shape-rendering: geometricPrecision;

    will-change:
        stroke-dashoffset;
}


/* ==========================================================
   LARGEURS DES TRACÉS : Y
========================================================== */

.intro-y-1 {
    stroke-width: 44px;
}


.intro-y-2 {
    stroke-width: 44px;
}


.intro-y-3 {
    stroke-width: 18px;
}


/* ==========================================================
   LARGEURS DES TRACÉS : B
========================================================== */

.intro-b-1 {
    stroke-width: 38px;
}


.intro-b-2 {
    stroke-width: 34px;
}


.intro-b-3 {
    stroke-width: 34px;
}


.intro-b-4 {
    stroke-width: 18px;
}


/* ==========================================================
   PLUME
========================================================== */

.intro-pen {
    stroke-width: 110px;
}


/* ==========================================================
   LARGEURS DES TRACÉS : CREATION
========================================================== */

.intro-creation-c,
.intro-creation-r,
.intro-creation-e,
.intro-creation-a,
.intro-creation-t,
.intro-creation-i,
.intro-creation-o,
.intro-creation-n {
    stroke-width: 26px;
}


.intro-creation-t-bar {
    stroke-width: 18px;
}


.intro-creation-i-dot {
    stroke-width: 30px;
}


/* ==========================================================
   DÉCLENCHEMENT GLOBAL DE L'ÉCRITURE
========================================================== */

.intro-loader.is-writing .intro-mask-path {
    animation-name:
        introWritePath;

    animation-duration:
        var(
            --write-duration,
            1s
        );

    animation-delay:
        var(
            --write-delay,
            0s
        );

    animation-timing-function:
        linear;

    animation-fill-mode:
        forwards;

    animation-iteration-count:
        1;
}


/* ==========================================================
   TIMELINE D'ÉCRITURE : Y
========================================================== */

.intro-y-1 {
    --write-duration: 0.22s;
    --write-delay: 0.05s;
}


.intro-y-2 {
    --write-duration: 0.48s;
    --write-delay: 0.18s;
}


.intro-y-3 {
    --write-duration: 0.60s;
    --write-delay: 0.55s;
}


/* ==========================================================
   TIMELINE D'ÉCRITURE : B
========================================================== */

.intro-b-1 {
    --write-duration: 0.28s;
    --write-delay: 1.05s;
}


.intro-b-2 {
    --write-duration: 0.55s;
    --write-delay: 1.20s;
}


.intro-b-3 {
    --write-duration: 0.38s;
    --write-delay: 1.65s;
}


.intro-b-4 {
    --write-duration: 0.52s;
    --write-delay: 1.95s;
}


.intro-pen {
    --write-duration: 0.18s;
    --write-delay: 2.38s;
}


/* ==========================================================
   TIMELINE D'ÉCRITURE : CREATION
========================================================== */

.intro-creation-c {
    --write-duration: 0.18s;
    --write-delay: 2.55s;
}


.intro-creation-r {
    --write-duration: 0.14s;
    --write-delay: 2.68s;
}


.intro-creation-e {
    --write-duration: 0.16s;
    --write-delay: 2.78s;
}


.intro-creation-a {
    --write-duration: 0.18s;
    --write-delay: 2.92s;
}


.intro-creation-t {
    --write-duration: 0.22s;
    --write-delay: 3.07s;
}


.intro-creation-t-bar {
    --write-duration: 0.14s;
    --write-delay: 3.18s;
}


.intro-creation-i {
    --write-duration: 0.12s;
    --write-delay: 3.28s;
}


.intro-creation-i-dot {
    --write-duration: 0.06s;
    --write-delay: 3.37s;
}


.intro-creation-o {
    --write-duration: 0.18s;
    --write-delay: 3.43s;
}


.intro-creation-n {
    --write-duration: 0.24s;
    --write-delay: 3.58s;
}


/* ==========================================================
   ANIMATION D'ÉCRITURE
========================================================== */

@keyframes introWritePath {

    from {
        stroke-dashoffset: 1;
    }


    to {
        stroke-dashoffset: 0;
    }

}


/* ==========================================================
   NUAGE DE TRANSITION
========================================================== */

.intro-cloud {
    position: absolute;

    top: 50%;
    left: -62%;

    z-index: 6;

    width: 60%;
    height: 42%;

    opacity: 0;

    background:
        rgba(
            255,
            255,
            255,
            0.96
        );

    border-radius: 50%;

    filter: blur(18px);

    transform:
        translateY(-50%)
        translateX(0)
        scale(0.92);

    pointer-events: none;

    will-change:
        transform,
        opacity;
}


/* ==========================================================
   BOSSE GAUCHE DU NUAGE
========================================================== */

.intro-cloud::before {
    content: "";

    position: absolute;

    width: 52%;
    aspect-ratio: 1 / 1;

    top: -24%;
    left: 2%;

    border-radius: 50%;

    background:
        rgba(
            255,
            255,
            255,
            0.98
        );
}


/* ==========================================================
   BOSSE DROITE DU NUAGE
========================================================== */

.intro-cloud::after {
    content: "";

    position: absolute;

    width: 46%;
    aspect-ratio: 1 / 1;

    top: -14%;
    right: 3%;

    border-radius: 50%;

    background:
        rgba(
            255,
            255,
            255,
            0.98
        );
}


/* ==========================================================
   DÉCLENCHEMENT DU NUAGE
========================================================== */

.intro-loader.is-writing .intro-cloud {
    animation:
        introCloudSweep
        1.30s
        cubic-bezier(
            0.65,
            0,
            0.35,
            1
        )
        var(--final-reveal-delay)
        forwards;
}


/*
    Empêche un deuxième déclenchement tardif.
*/
.intro-cloud.is-sweeping {
}


/* ==========================================================
   ANIMATION DU NUAGE
========================================================== */

@keyframes introCloudSweep {

    0% {
        opacity: 0;

        transform:
            translateY(-50%)
            translateX(0)
            scale(0.92);
    }


    8% {
        opacity: 1;
    }


    70% {
        opacity: 1;
    }


    100% {
        opacity: 1;

        transform:
            translateY(-50%)
            translateX(320%)
            scale(1.10);
    }

}


/* ==========================================================
   ACCESSIBILITÉ
========================================================== */

@media (prefers-reduced-motion: reduce) {

    #site-content {
        opacity: 1;
        visibility: visible;
    }


    .intro-loader {
        display: none;
    }


    body.is-loading {
        overflow: auto;
    }

}


/* ==========================================================
   TABLETTE
========================================================== */

@media screen and (max-width: 1024px) {

    .intro-scene {
        width:
            min(
                96vw,
                900px
            );
    }


    .intro-write-logo {
        width:
            min(
                96vw,
                900px
            );
    }


    .intro-planet {
        width:
            min(
                42vw,
                390px
            );
    }


    .intro-cloud {
        left: -68%;

        width: 68%;
        height: 44%;
    }

}


/* ==========================================================
   MOBILE
========================================================== */

@media screen and (max-width: 768px) {

    .intro-scene {
        width:
            min(
                100vw,
                700px
            );
    }


    .intro-write-logo {
        width: 108vw;

        max-width: none;
    }


    .intro-planet {
        width:
            min(
                58vw,
                300px
            );
    }


    .intro-cloud {
        left: -88%;

        width: 82%;
        height: 46%;
    }

}


/* ==========================================================
   PETITS MOBILES
========================================================== */

@media screen and (max-width: 480px) {

    .intro-write-logo {
        width: 116vw;
    }


    .intro-planet {
        width:
            min(
                64vw,
                270px
            );
    }


    .intro-cloud {
        left: -102%;

        width: 96%;
        height: 48%;
    }

}