/* ── OVERLAY ── */
#page-loader {
    position: fixed;
    inset: 0;
    z-index: 999999;
    background: #111827;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.75rem;

    /* Estado visível por padrão */
    opacity: 1;
    visibility: visible;
    transition: opacity .4s ease, visibility .4s ease;
}

/* Estado de saída */
#page-loader.loader-hide {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* ── LOGO ── */
.loader-logo {
    height: 36px;
    opacity: .9;
    animation: loader-fade-in .4s ease forwards;
}

/* ── SPINNER ── */
.loader-spinner-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    animation: loader-fade-in .4s ease .1s both;
}

/* Spinner Bootstrap customizado */
.loader-spinner {
    width: 2.25rem;
    height: 2.25rem;
    border: 3px solid rgba(255, 255, 255, .12);
    border-top-color: #1a56db;
    border-radius: 50%;
    animation: loader-spin .75s linear infinite;
}

.loader-text {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: .78rem;
    font-weight: 500;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .4);
}

/* ── BARRA DE PROGRESSO FINA NO TOPO ── */
.loader-progress {
    position: absolute;
    top: 0;
    left: 0;
    height: 2px;
    width: 0%;
    background: linear-gradient(90deg, #1a56db, #60a5fa);
    border-radius: 0 999px 999px 0;
    animation: loader-progress 1.2s cubic-bezier(.4, 0, .2, 1) forwards;
    box-shadow: 0 0 8px rgba(26, 86, 219, .6);
}

/* ── KEYFRAMES ── */
@keyframes loader-spin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes loader-fade-in {
    from {
        opacity: 0;
        transform: translateY(6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes loader-progress {
    0% {
        width: 0%;
    }

    60% {
        width: 75%;
    }

    100% {
        width: 95%;
    }
}