#loader {
    --loader-cor: #9A2C00; /* fallback — sobrescrito inline pelo PHP */
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #FFEFE7; /* fallback — sobrescrito inline pelo PHP */
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

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

.loader-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
}

.loader-logo {
    overflow: visible;
}

/* Traços animados do logo */
.draw {
    fill: none;
    stroke: var(--loader-cor);
    stroke-width: 1.2;
    stroke-dasharray: 1200;
    stroke-dashoffset: 1200;
    animation: drawLogo 1.5s cubic-bezier(0.4, 0, 0.2, 1) 1 forwards;
}

/* delays negativos: a animação já começa "no meio" do ciclo, sem espera visível */
.draw2 { animation-delay: -1.32s; }
.draw3 { animation-delay: -1.14s; }

/* Ponto laranjo */
.dot {
    fill: #FF7A26;
    opacity: 0;
    transform-origin: 46.64px 61.08px;
    animation: dotPop 1.5s cubic-bezier(0.4, 0, 0.2, 1) 1 forwards;
}

/* Barra de progresso */
.loader-bar {
    width: 120px;
    height: 2px;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 999px;
    overflow: hidden;
}

.loader-bar__fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--loader-cor), #FF7A26);
    border-radius: 999px;
    animation: barFill 1.5s cubic-bezier(0.4, 0, 0.2, 1) 1 forwards;
}

/* ---- keyframes ---- */

@keyframes drawLogo {
    0% {
        stroke-dashoffset: 1200;
        fill: transparent;
    }
    55% {
        fill: transparent;
    }
    100% {
        stroke-dashoffset: 0;
        fill: var(--loader-cor);
    }
}

@keyframes dotPop {
    0%, 60% {
        opacity: 0;
        transform: scale(0);
    }
    80% {
        opacity: 1;
        transform: scale(1.2);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes barFill {
    0%   { width: 0%; }
    100% { width: 100%; }
}