/* Indicador de carregamento padrao do portal: sol e ondas da bandeira de
   Palmas. Um unico componente serve para os dois usos: embutido num bloco de
   conteudo e cobrindo a pagina durante a navegacao. */

.portal-carregando {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    opacity: 0;
    padding: 28px 16px;
    /* Fade-out: ao tirar a classe --visivel a opacidade volta a 0 por aqui. */
    transition: opacity 260ms ease;
}

.portal-carregando[hidden] {
    display: none;
}

/* Fade-in por animacao, e nao por transicao, para valer tambem quando o
   elemento e inserido na pagina ja visivel (busca do modal, que troca o
   innerHTML): uma transicao nao dispara sem mudanca de estado. */
.portal-carregando--visivel {
    animation: portal-carregando-entrar 260ms ease both;
}

@keyframes portal-carregando-entrar {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.portal-carregando__caixa {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.portal-carregando__marca {
    height: 64px;
    width: 64px;
}

.portal-carregando__texto {
    color: #17335f;
    font-size: 0.95rem;
    font-weight: 600;
}

/* --- Animacao das pecas --- */

/* transform-box: fill-box faz o giro acontecer em torno do centro do proprio
   desenho; sem isso o eixo seria o canto do <svg> e o sol descreveria um
   circulo enorme em vez de girar no lugar. */
.portal-carregando__sol {
    animation: portal-carregando-girar 9s linear infinite;
    transform-box: fill-box;
    transform-origin: center;
}

@keyframes portal-carregando-girar {
    to {
        transform: rotate(360deg);
    }
}

/* A ondulacao em si e feita no SVG, com <animate> sobre o proprio tracado: a
   linha fica parada e a onda anda por ela. Nao da para fazer isso em CSS com
   garantia — animar a propriedade `d` ainda nao e confiavel em todos os
   navegadores, enquanto o <animate> do SVG e. O reverso disso e que uma media
   query nao alcanca essa animacao; quem cuida dela e o carregando.js.

   O que sobra para o CSS e o balanco do conjunto: um leve subir e descer da
   linha inteira, num tempo diferente do da onda, para o movimento nao ficar
   com cara de mecanismo de um compasso so. */
.portal-carregando__balanco {
    animation: portal-carregando-balancar 2.8s ease-in-out infinite;
}

.portal-carregando__balanco--clara {
    animation-duration: 3.6s;
    animation-delay: -1.8s;
}

@keyframes portal-carregando-balancar {
    0%,
    100% {
        transform: translateY(-1.8px);
    }

    50% {
        transform: translateY(1.8px);
    }
}

/* --- Versao que cobre a pagina, durante a navegacao --- */

/* pointer-events: none de proposito. A camada e so informativa: se por algum
   motivo ela ficar presa na tela, a pagina continua utilizavel por baixo em
   vez de travar tudo. O veu tambem e leve pelo mesmo motivo. */
.portal-carregando--tela {
    background: rgba(255, 255, 255, 0.72);
    bottom: 0;
    left: 0;
    pointer-events: none;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 5000;
}

.portal-carregando--tela .portal-carregando__marca {
    height: 88px;
    width: 88px;
}

@media (max-width: 575px) {
    .portal-carregando--tela .portal-carregando__marca {
        height: 72px;
        width: 72px;
    }
}

/* --- Preferencia por menos movimento --- */

/* O sol para de girar e as ondas param de subir; o indicador continua
   aparecendo, com o rotulo, so que parado. */
@media (prefers-reduced-motion: reduce) {
    /* A onda propriamente dita nao esta aqui: ela e <animate> no SVG, fora do
       alcance de uma media query. O carregando.js desliga aquela parte. */
    .portal-carregando__sol,
    .portal-carregando__balanco {
        animation: none;
    }

    .portal-carregando,
    .portal-carregando--visivel {
        animation-duration: 1ms;
        transition-duration: 1ms;
    }
}