/* ==========================================================================
   « Vous êtes ? » — accompagnement CSS de la scène 3D (scripts/gender-stage*.js)

   Rien ici ne s'applique sans les classes que pose le script :
     html.gs-3d          la scène 3D a peint sa première image ;
     html.gs-leaving     le visiteur vient de choisir, l'effet de sortie joue ;
     html.gs-leaving--m  … et c'est « Un homme »  (--f : « Une femme »).
   Sans WebGL ou en mouvement réduit, la page reste celle d'avant.
   ========================================================================== */

/* Les vagues bleue et rose des bords cèdent la place à l'enseigne 3D,
   qui porte déjà les deux couleurs. */
html.gs-3d::before,
html.gs-3d::after {
    opacity: 0.45;
    transition: filter 1.4s ease, opacity 1.2s ease;
}

/* ---------------------------------------------------------------- Sortie */

html.gs-leaving .gender-selection h3 {
    animation: gsTitleOut 0.42s cubic-bezier(0.55, 0, 0.85, 0.35) forwards;
}

@keyframes gsTitleOut {
    to {
        opacity: 0;
        letter-spacing: 0.22em;
        filter: blur(3px);
    }
}

html.gs-leaving--m #genderMaleBtn,
html.gs-leaving--f #genderFemaleBtn {
    animation: gsChosen 0.48s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    pointer-events: none;
}

@keyframes gsChosen {
    0%   { transform: scale(1);    filter: brightness(1);   opacity: 1; }
    30%  { transform: scale(1.08); filter: brightness(1.9); opacity: 1; }
    100% { transform: scale(1.16); filter: brightness(2.4); opacity: 0; }
}

html.gs-leaving--m #genderFemaleBtn,
html.gs-leaving--f #genderMaleBtn {
    animation: gsOther 0.34s cubic-bezier(0.55, 0, 0.85, 0.35) forwards;
    pointer-events: none;
}

html.gs-leaving--m #genderFemaleBtn { --gs-dx: 34px; }
html.gs-leaving--f #genderMaleBtn   { --gs-dx: -34px; }

@keyframes gsOther {
    to {
        opacity: 0;
        transform: translateX(var(--gs-dx)) scale(0.92);
        filter: blur(4px);
    }
}

/* La couture dorée entre les deux boutons s'efface avec eux. */
html.gs-leaving .gender-selection .gender-buttons .btn-f::before,
html.gs-leaving .gender-selection .gender-buttons .btn-f::after {
    opacity: 0;
    transition: opacity 0.2s ease;
}