/* FILE: wwwroot/css/splash.css
   PURPOSE: Ecrã de splash branded que cobre a app enquanto o Blazor arranca.
            Removido via JS (classe .splash--hidden) após OnAfterRenderAsync.
   TOKENS:  #0B4F6C (atlantico), #FFD166 (farol/dourado)
   AI-NOTE: Usa position:fixed + z-index:9999 para cobrir tudo.
            A transição fade-out é de 400ms para ser suave mas não lenta.
            O spinner é pure CSS — sem dependências externas. */

#app-splash {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 28px;
    background: #0B4F6C;
    color: #fff;
    font-family: system-ui, -apple-system, sans-serif;
    padding: env(safe-area-inset-top, 0px) 0 env(safe-area-inset-bottom, 0px);

    /* Transição de saída */
    transition: opacity .4s ease, visibility .4s ease;
}

#app-splash.splash--hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.splash__logo img {
    border-radius: 22px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, .35);
    animation: splash-logo-in .5s cubic-bezier(.34,1.56,.64,1) both;
}

@keyframes splash-logo-in {
    from { transform: scale(.7); opacity: 0; }
    to   { transform: scale(1);  opacity: 1; }
}

.splash__name {
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -.5px;
    opacity: 0;
    animation: splash-fade-up .4s ease .25s forwards;
}

.splash__tagline {
    font-size: .85rem;
    opacity: 0;
    animation: splash-fade-up .4s ease .4s forwards;
    color: rgba(255,255,255,.7);
}

@keyframes splash-fade-up {
    from { transform: translateY(10px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}

/* Spinner dourado */
.splash__spinner {
    width: 28px;
    height: 28px;
    border: 3px solid rgba(255,255,255,.2);
    border-top-color: #FFD166;
    border-radius: 50%;
    animation: splash-spin .75s linear infinite;
    opacity: 0;
    animation: splash-spin .75s linear infinite, splash-fade-up .4s ease .55s forwards;
}

@keyframes splash-spin {
    to { transform: rotate(360deg); }
}