/*
    Rolagem contínua: Padrão de interface em que novos itens são carregados automaticamente à medida que o usuário rola a tela, sem recarregar a página.
*/

/*
    Estilização do loader da rolagem contínua

    O que tem aqui em .loader-rolagem {}, mas não tem embaixo
    no .loader-rolagem.loader-concluido {}, é exclusivo da frase de carregamento de novos itens.
*/
.loader-rolagem {
    grid-column: 1 / -1; /* Faz o elemento ocupar todas as colunas da grade (da primeira à última), garantindo que o aviso fique centralizado. */
    text-align: center;
    padding: 20px;
    margin: 20px 0;
    font-family: var(--fonte-01);
    color: var(--primeira-cor);
    font-weight: bold;
    font-size: 16px;
    background: #F9F9F9;
    border-radius: 10px;
    border: 1px dashed var(--quinta-cor);
    animation: pulse 1.5s infinite; /* Faz pulsar (transparente, visível, transparente) a frase de carregamento de novos itens.*/
    /*
        Configuração para não deixar dar barra de rolagem horizontal
    */
    max-width: 90vw; /* Garante que o box não ultrapasse a largura da tela. */
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
    text-overflow: ellipsis; /* Se o texto for grande demais (maior do que os 90vw que colocamos em max-width), ele põe reticências (...) automaticamente no final, evitando que o visual seja quebrado, ou seja, evitando que algo saia fora do que configuramos, não deixando ser modificado o visual do layout. */
}

/* Configuração INDEPENDENTE para a frase de carregamento completo dos itens */
.loader-rolagem.loader-concluido {
    color: #00F;
    font-size: 16px;
    background: #EEE;
    border: 1px solid #CCC;
    animation: none; /* none porque não usamos a animação de pulsar (transparente, visível, transparente) da frase de carregamento de novos itens. */
}

/*
    Definição da animação de pulsação da opacidade para o efeito visual de carregamento
    
    Este bloco cria a animação de pulsar (transparente, visível, transparente) da frase de carregamento de novos itens.
*/
@keyframes pulse {
    0% { opacity: 0.6; }   /* Começa meio transparente. */
    50% { opacity: 1; }    /* Fica totalmente visível no meio do tempo. */
    100% { opacity: 0.6; } /* Volta a ficar transparente. */
}