/* ========================================
   HOME — GIF PLEIN ÉCRAN AU SCROLL
======================================== */


/* ========================================
   GIF — ÉTAT INITIAL
======================================== */

body[data-home="true"] .welcome-gif {
    position: fixed;

    inset: 0;

    width: 100vw;
    height: 100vh;
    height: 100dvh;

    object-fit: cover;
    object-position: center;

    pointer-events: none;

    /*
       On laisse le GIF présent en permanence
       et on joue uniquement sur l'opacité.

       C'est plus fiable sur mobile que
       visibility + opacity.
    */

    opacity: 0;

    transform: scale(1.02);

    filter: blur(5px);

    transition:
        opacity 3.2s ease,
        transform 3.6s cubic-bezier(0.22, 1, 0.36, 1),
        filter 3.2s ease;

    will-change:
        opacity,
        transform,
        filter;

    z-index: 0;
}


/* ========================================
   GIF — VISIBLE
======================================== */

body[data-home="true"].welcome-visible .welcome-gif {
    opacity: 1;

    transform: scale(1);

    filter: blur(0);
}


/* ========================================
   INTERFACE AU-DESSUS DU GIF
======================================== */

body[data-home="true"] #site-navigation {
    position: relative;

    z-index: 10;
}


body[data-home="true"] .home-menu {
    z-index: 10;
}


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

@media (max-width: 700px) {

    /*
       Sur téléphone :
       fondu très lent et progressif.

       Pas de blur ni de scale pour conserver
       une animation fluide sur Safari mobile.
    */

    body[data-home="true"] .welcome-gif {
        transform: none;

        filter: none;

        transition:
            opacity 5s cubic-bezier(
                0.22,
                1,
                0.36,
                1
            );

        will-change: opacity;
    }


    body[data-home="true"].welcome-visible .welcome-gif {
        transform: none;

        filter: none;
    }

}


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

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

    body[data-home="true"] .welcome-gif,
    body[data-home="true"].welcome-visible .welcome-gif {
        transform: none;

        filter: none;

        transition:
            opacity 0.2s linear;
    }

}