/* ==========================================================================
   SPLASH.CSS — Animation d'accueil (logo + nom du site)

   Joue UNE FOIS par onglet navigateur. Splash.js pose `html.splash-active`
   AVANT le rendu du <body>, donc le contenu de la page reste caché via
   visibility:hidden tant que le splash est visible.

   Pendant le splash :
     - body          → visibility:hidden
     - .splash-root  → visibility:visible (forced override)
   À la fin (splash.js cleanup), splash-active est retirée → body réapparaît.

   === Isolation des couleurs ===
   Le splash utilise TOUJOURS les couleurs de base du thème sombre,
   indépendamment du thème actif (ambient / clair / sombre custom).
   Les valeurs sont HARDCODÉES sur .splash-root pour être sûr qu'aucune
   couleur ambiante (qui dérive de la chanson) ou préférence utilisateur
   (--user-primary / --user-secondary) ne vienne perturber l'identité
   visuelle de marque. Valeurs identiques à html.theme-dark dans theme.js :
       --main-color du sombre : #d8d8d8
       --bg-color-2 du sombre : #131313
   ========================================================================== */

/* Cache le contenu de la page tant que le splash joue. visibility plutôt
   que display:none → préserve les dimensions et évite tout recalcul layout. */
html.splash-active body {
    visibility: hidden;
}

/* Forçage explicite : le splash-root doit s'afficher même si body est
   hidden. visibility:visible sur un élément enfant ne suffit pas tout seul
   quand body est visibility:hidden ; il faut donc ce filet de sécurité. */
html.splash-active .splash-root {
    visibility: visible !important;
}

.splash-root {
    /* === Isolation des couleurs du thème sombre de base ===
       Ces valeurs sont scopées à .splash-root et héritées par .splash-logo
       / .splash-name. Tout le reste du document reste sur ses propres
       --main-color / --bg-color-2 (ambient, clair, user-custom).
       Quand splash-root est retiré du DOM après l'anim, l'isolation
       disparaît proprement avec lui. */
    --main-color: #d8d8d8;
    --bg-color-2: #131313;

    position: fixed;
    inset: 0;
    z-index: 99999;
    background:
        radial-gradient(ellipse at center,
            rgba(0, 0, 0, 0.65) 0%,
            rgba(0, 0, 0, 0.95) 100%),
        #131313;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    /* isole le contexte de paint pour ne pas flusher tout le document. */
    isolation: isolate;
    font-family: inherit;
    color: #f0f0f0;
}

.splash-root .splash-logo {
    width: 140px;
    height: 140px;
    object-fit: contain;
    /* Halo blanc/clair, fixe, qui ne dépend d'aucune variable ambiante. */
    filter:
        drop-shadow(0 0 24px #d8d8d8)
        drop-shadow(0 0 8px rgba(255, 255, 255, 0.18));
    animation: splash-logo 2600ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
    will-change: opacity, transform, filter;
    pointer-events: none;
    -webkit-user-drag: none;
}

.splash-root .splash-name {
    margin-top: 28px;
    font-size: 2.4rem;
    font-weight: 700;
    letter-spacing: 4px;
    color: #f0f0f0;
    text-shadow:
        0 0 24px #d8d8d8,
        0 0 4px rgba(0, 0, 0, 0.65);
    animation: splash-name 2600ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
    will-change: opacity, transform, letter-spacing;
    user-select: none;
}

/* === Phases de l'animation du logo ===
   0-30%   : entrée (fade in + scale 0.7→1 + un léger rotate pour énergie)
   30-50%  : plateau avec glow renforcé
   50-80%  : micro-pulse (scale 1→1.05)
   80-100% : fade out + léger scale up (donne une sensation de "décollage") */
@keyframes splash-logo {
    0%   {
        opacity: 0;
        transform: scale(0.7) rotate(-4deg);
        filter:
            drop-shadow(0 0 24px #d8d8d8)
            drop-shadow(0 0 8px rgba(255, 255, 255, 0.18));
    }
    30%  {
        opacity: 1;
        transform: scale(1) rotate(0);
    }
    50%  {
        filter:
            drop-shadow(0 0 40px #d8d8d8)
            drop-shadow(0 0 14px rgba(255, 255, 255, 0.30));
    }
    80%  {
        opacity: 1;
        transform: scale(1.05) rotate(0);
    }
    100% {
        opacity: 0;
        transform: scale(1.12) rotate(2deg);
    }
}

/* === Phases de l'animation du nom ===
   0-30%   : invisible, descendu, espacement large (look "letter-spacing")
   30-60%  : fade in + slide up + espacement réduit (tendu)
   60-80%  : pulse léger micro-décalage
   80-100% : fade out vers le haut */
@keyframes splash-name {
    0%, 30% {
        opacity: 0;
        transform: translateY(20px);
        letter-spacing: 10px;
    }
    60% {
        opacity: 1;
        transform: translateY(0);
        letter-spacing: 4px;
    }
    80% {
        opacity: 1;
        transform: translateY(-1px);
        letter-spacing: 4px;
    }
    100% {
        opacity: 0;
        transform: translateY(-12px);
        letter-spacing: 4px;
    }
}

/* === Reduced-motion / no-animations respect ===
   Settings → norex-animations=off ajoute html.no-animations. On raccourcit
   la phase d'animation à 320ms (visible mais très court) pour les
   utilisateurs sensibles au mouvement, sans pour autant sauter le splash :
   c'est leur première impression de marque, on la conserve brièvement. */
html.no-animations .splash-root .splash-logo,
html.no-animations .splash-root .splash-name {
    animation-duration: 320ms !important;
}