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

   Splash partagé pour toutes les apps. Les particularités (nom du site,
   chemin du logo, flag de déduplication onglet) sont configurées par
   l'app appelante via <meta name="splash-*"> dans son <head> :
     - <meta name="splash-name" content="Norex Casino">
     - <meta name="splash-logo" content="../NorexMusic/logo.png">
     - <meta name="splash-flag" content="norex-casino-splash-shown-tab"> (optionnel)

   Joue UNE FOIS par onglet navigateur. shared-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 (cleanup JS), splash-active est retirée → body réapparaît.

   === Isolation des couleurs ===
   Le splash utilise TOUJOURS les couleurs dark de base, indépendamment
   du thème actif (ambient / clair / custom). Valeurs HARDCODÉES sur
   .splash-root pour éviter toute pollution par --main-color ambiant.
   ========================================================================== */

html.splash-active body { visibility: hidden; }
html.splash-active .splash-root { visibility: visible !important; }

/* Inline critical (à reproduire dans <head> AVANT les <link>) pour éviter
   tout flash du contenu si shared-splash.css charge en retard :
       html.splash-active body{visibility:hidden}
       html.splash-active .splash-root{visibility:visible!important}
   Music accueil.html utilise déjà cette technique. */

.splash-root {
    /* === Couleurs dark de base hardcodées (isolation anti-thème) === */
    --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;
    isolation: isolate;
    font-family: inherit;
    color: #f0f0f0;
}

.splash-root .splash-logo {
    width: 140px;
    height: 140px;
    object-fit: contain;
    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 + léger rotate)
   30-50%  : plateau avec glow renforcé
   50-80%  : micro-pulse (scale 1→1.05)
   80-100% : fade out + scale up (sensation "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
   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
   pose html.no-animations). Démo raccourcie sans pour autant sauter
   l'animation : 320ms (visible mais très court). */
html.no-animations .splash-root .splash-logo,
html.no-animations .splash-root .splash-name {
    animation-duration: 320ms !important;
}