/* ═══════════════════════════════════════════════════════
   FAVE — Page Loader
   1. Barra de progresso de navegação (admin)
   2. Splash de carregamento de página (admin)
   ═══════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════
   SPLASH — tela de carregamento do painel admin
   ══════════════════════════════════════════════════════ */
#fave-splash {
    position: fixed;
    inset: 0;
    background: #141e33; /* navy do FAVE — funciona em admin e no site público */
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    transition: opacity 0.55s ease;
}

#fave-splash.is-gone {
    opacity: 0;
    pointer-events: none;
}

.fave-splash-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.75rem;
    text-align: center;
    padding: 2rem;
}

/* Logo animado */
.fave-splash-logo-wrap {
    width: 96px;
    height: 96px;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: splash-float 2.2s ease-in-out infinite;
    filter: drop-shadow(0 0 18px rgba(212, 170, 58, 0.55));
}

.fave-splash-logo {
    width: 84px;
    height: auto;
    /* Converte logo branco em dourado */
    filter: sepia(1) saturate(4) hue-rotate(8deg) brightness(1.15);
}

@keyframes splash-float {
    0%, 100% { transform: translateY(0) scale(1); }
    50%       { transform: translateY(-14px) scale(1.04); }
}

/* Texto descontraído */
.fave-splash-text {
    color: rgba(255, 255, 255, 0.75);
    font-family: 'Sora', system-ui, sans-serif;
    font-size: 1rem;
    font-weight: 400;
    letter-spacing: 0.015em;
    min-height: 1.6em;
}

.fave-splash-text.is-changing {
    animation: splash-msg 0.35s ease both;
}

@keyframes splash-msg {
    from { opacity: 0; transform: translateY(7px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Dots pulsantes */
.fave-splash-dots {
    display: flex;
    gap: 0.55rem;
    align-items: center;
}

.fave-splash-dots span {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #a07820;
    animation: splash-dot 1.5s ease-in-out infinite;
}

.fave-splash-dots span:nth-child(2) { animation-delay: 0.25s; }
.fave-splash-dots span:nth-child(3) { animation-delay: 0.50s; }

@keyframes splash-dot {
    0%, 80%, 100% { transform: scale(0.55); opacity: 0.35; }
    40%           { transform: scale(1.2);  opacity: 1; }
}

/* ── Wrapper ─────────────────────────────────────────── */
#fave-loader {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    z-index: 99999;
    pointer-events: none;
    opacity: 1;
}

#fave-loader.is-done {
    opacity: 0;
}

/* ── Barra ───────────────────────────────────────────── */
#fave-loader-bar {
    height: 100%;
    width: 0%;
    border-radius: 0 3px 3px 0;

    /* Gradiente padrão: tons dourados do FAVE */
    background: linear-gradient(
        90deg,
        #a07820 0%,
        #c8981e 35%,
        #d4aa3a 65%,
        #e8c84a 100%
    );
    box-shadow:
        0 0 10px rgba(160, 120, 32, 0.55),
        0 0  4px rgba(212, 170,  58, 0.35);

    transition: width 0.25s ease;
    will-change: width;
}

/* ── Variante admin: azul-marinho ────────────────────── */
.admin-body #fave-loader-bar {
    background: linear-gradient(
        90deg,
        #1a2e4d 0%,
        #1e3d6b 35%,
        #2a5494 65%,
        #3a70bf 100%
    );
    box-shadow:
        0 0 10px rgba(26,  46,  77, 0.45),
        0 0  4px rgba(42, 100, 180, 0.35);
}

/* ── Pulsação quando aguardando resposta do servidor ─── */
@keyframes loader-stall {
    0%,  100% { opacity: 1; }
    50%        { opacity: 0.7; }
}

#fave-loader-bar.is-stalled {
    animation: loader-stall 1.4s ease-in-out infinite;
}

/* ── Brilho na ponta da barra (efeito "farol") ───────── */
/* position: relative necessário para o ::after se posicionar
   dentro da barra e não relativo ao wrapper fixed */
#fave-loader-bar {
    position: relative;
}

#fave-loader-bar::after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    width: 60px;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.35) 100%
    );
    border-radius: 0 3px 3px 0;
    pointer-events: none;
}