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

   Isole les couleurs du thème sombre de base (#d8d8d8 / #131313) pour ne
   pas être affecté par les préférences utilisateur (ambient / clair / etc).
   ========================================================================== */

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

.splash-root {
    /* Isolement des couleurs : on verrouille les tokens du sombre
       de base pour que le splash ait une identité de marque stable. */
    --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;
    font-family: 'Bitcount Single', sans-serif;
    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;
}

@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); }
}

@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; }
}

html.no-animations .splash-root .splash-logo,
html.no-animations .splash-root .splash-name {
    animation-duration: 320ms !important;
}