/* O container que cobre a tela toda */
.loading-overlay {
    /* Escondido por padrão */
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.9); /* Fundo um pouco mais opaco */
    z-index: 9999;
    
    /* Centraliza o ícone */
    justify-content: center;
    align-items: center;
    
    /* Animação de fade-out */
    transition: opacity 0.3s ease-in-out;
    opacity: 1;
}

/* Container do nosso ícone que servirá de máscara */
.loading-icon-container {
    width: 128px; /* Ajuste o tamanho conforme necessário */
    height: 128px;
    position: relative;

    /* A MÁSCARA: Usamos seu ícone como o "molde" */
    -webkit-mask-image: url('../img/loading-icon.png');
    mask-image: url('../img/loading-icon.png');
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;

    /* A cor de fundo representa a parte "vazia" do ícone */
    background-color: rgba(52, 152, 219, 0.25); /* Azul bem transparente */
}

/* O pseudo-elemento ::before será a nossa "barra de progresso" que preenche o ícone */
.loading-icon-container::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    
    /* A altura será controlada pelo JavaScript via variável CSS */
    height: var(--fill-percentage, 0%);
    
    /* Cor do preenchimento */
    background-color: rgb(52, 152, 219); /* Mesmo azul, mas sólido */
    
    /* Transição suave para o preenchimento */
    transition: height 0.2s ease-out;
}