/* CSS crítico do splash/onboarding.
   FONTE CANÔNICA destas regras ● se alterar algo aqui, replique também no
   bloco <style> inline que cada página tem logo após <meta charset>
   (ex.: public/pages/login.html linha 6). O inline é o que garante que o
   splash já nasce estilizado no primeiro paint, sem depender de nenhuma
   requisição de rede (evita qualquer flash da logo sem estilo antes da
   animação real, mesmo se o Google Fonts ou outro <link> estiver lento).
   Este arquivo externo é carregado logo em seguida como reforço/cache para
   navegações subsequentes; não é mais a única fonte de estilo do splash.
   Self-contido: não depende de _colors.css nem de _animations.css. */

:root {
    --pm-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Splash premium: overlay opaco com gradiente animado e bloqueio de scroll enquanto ativo */
#app-splash-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 1;
    visibility: visible;
    /* Onboarding total 2000ms (ver shared/js/splash.js: SPLASH_HOLD_MS +
       SPLASH_EXIT_MS). Fade do fundo começa logo após a saída da logo
       iniciar (100ms de gap, 600ms de duração). */
    transition: opacity 600ms var(--pm-ease-out) 100ms;
    background: linear-gradient(120deg, #8D28FF 0%, #6F00FF 30%, #3A0073 60%, #180038 100%);
    background-size: 200% 200%;
    overflow: hidden;
    pointer-events: auto;
}

/* Logo e keyframes de entrada/saída (sem transparência do fundo) */
.splash-logo {
    width: 160px;
    height: auto;
    z-index: 2;
    will-change: transform, opacity, filter;
    filter: drop-shadow(0 18px 40px rgba(0,0,0,0.28));
    animation: splash-entrance 600ms var(--pm-ease-out) both;
}

@keyframes splash-entrance {
    0% { transform: translateY(18px) scale(0.9); opacity: 0; filter: blur(2px); }
    60% { transform: translateY(-6px) scale(1.05); opacity: 1; filter: blur(0); }
    100% { transform: translateY(0) scale(1); opacity: 1; filter: blur(0); }
}

@keyframes splash-exit {
    to { transform: translateY(-28px) scale(1.45) rotate(-6deg); opacity: 0; filter: blur(2px); }
}

#app-splash-screen.finished .splash-logo {
    animation: splash-exit 600ms var(--pm-ease-out) forwards;
}

/* Quando finaliza: fade do background (delay aplicado) */
#app-splash-screen.finished {
    opacity: 0;
    pointer-events: none;
}

@keyframes splash-bg-pan {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Enquanto o splash estiver ativo, bloqueia scroll/gestos da página */
html.splash-active, html.splash-active body {
    overflow: hidden !important;
    height: 100% !important;
    touch-action: none !important;
}

@media (prefers-reduced-motion: reduce) {
    #app-splash-screen, .splash-logo { transition: none !important; animation: none !important; transform: none !important; filter: none !important; opacity: 1 !important; visibility: visible !important; }
}