/* =============================================================================
   Movimento
   Meio Norte Express

   TODO EFEITO AQUI É OPCIONAL POR CONSTRUÇÃO
   -------------------------------------------
   O bloco `prefers-reduced-motion` no fim desliga tudo. Isso não é cortesia:
   movimento involuntário provoca enjoo e desorientação em quem tem distúrbio
   vestibular, e o sistema operacional já sabe dessa preferência.

   Só animamos `transform` e `opacity`. Animar `width`, `top` ou `height`
   força o navegador a recalcular o layout a cada quadro — é o que faz a
   página engasgar em celular.
   ============================================================================= */

/* --- Entrada da página ---------------------------------------------------- */

@keyframes surgir {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
}

@keyframes surgir-escala {
    from { opacity: 0; transform: scale(.96); }
    to   { opacity: 1; transform: none; }
}

@keyframes sumir {
    from { opacity: 1; transform: none; }
    to   { opacity: 0; transform: translateY(8px); }
}

.capa h1, .hero h1        { animation: surgir .6s var(--ease-out-expo) both; }
.capa__sub, .hero__sub    { animation: surgir .6s var(--ease-out-expo) .08s both; }
.hero .busca              { animation: surgir-escala .6s var(--ease-out-expo) .16s both; }
.hero .atalhos            { animation: surgir .6s var(--ease-out-expo) .24s both; }

/* --- Revelação ao rolar ----------------------------------------------------
   O deslocamento é pequeno de propósito: 16px sugere entrada sem empurrar a
   leitura. Animação longa em conteúdo que a pessoa já está tentando ler vira
   obstáculo, não enfeite. */

[data-revelar] {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .55s var(--ease-out-expo), transform .55s var(--ease-out-expo);
}
[data-revelar].revelado { opacity: 1; transform: none; }

/* Escalonamento por posição: o conjunto entra em cascata em vez de tudo de
   uma vez. */
[data-revelar]:nth-child(2) { transition-delay: .06s; }
[data-revelar]:nth-child(3) { transition-delay: .12s; }
[data-revelar]:nth-child(4) { transition-delay: .18s; }
[data-revelar]:nth-child(5) { transition-delay: .24s; }
[data-revelar]:nth-child(6) { transition-delay: .30s; }

/* --- Microinterações ------------------------------------------------------ */

.botao { position: relative; overflow: hidden; }

/* Brilho que atravessa o botão no hover: sinaliza que é acionável sem
   depender só da mudança de cor. */
.botao--primario::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.22) 50%, transparent 70%);
    transform: translateX(-100%);
    transition: transform .6s var(--ease-out-expo);
}
.botao--primario:hover::after { transform: translateX(100%); }

.botao:active { transform: translateY(1px) scale(.99); }

.servico__link i,
.link-rota i,
.servico-detalhe__link i { transition: transform var(--transition-fast); }

input, select, textarea {
    transition: border-color var(--transition-fast), box-shadow var(--transition-base);
}

/* O sinal do FAQ gira em vez de trocar de caractere */
.faq summary::after { transition: transform var(--transition-base); display: inline-block; }
.faq[open] summary::after { transform: rotate(180deg); }

/* --- Indicador de progresso da página ---------------------------------------
   Barra fina no topo mostrando quanto já foi percorrido. Em página longa — a
   tabela de 1.353 cidades, uma página de rota — ela responde "quanto falta"
   sem tomar espaço do conteúdo. */

.progresso {
    position: fixed; top: 0; left: 0; right: 0;
    height: 3px; z-index: 1100;
    pointer-events: none;
}
.progresso__barra {
    height: 100%; width: 0;
    background: linear-gradient(90deg, var(--secondary-color), var(--accent-color));
    transition: width .1s linear;
}

/* --- Carregamento --------------------------------------------------------- */

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

.botao[aria-busy="true"] { pointer-events: none; opacity: .75; }
.botao[aria-busy="true"]::before {
    content: '';
    width: 15px; height: 15px;
    margin-right: var(--space-2);
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: girar .7s linear infinite;
}

/* Barra indeterminada, para espera sem progresso conhecido */
@keyframes correr {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(400%); }
}
.carregando-barra { height: 3px; overflow: hidden; background: var(--gray-200); border-radius: 2px; }
.carregando-barra::after {
    content: ''; display: block; height: 100%; width: 25%;
    background: var(--primary-color);
    animation: correr 1.1s var(--ease-in-out-expo) infinite;
}

/* --- Avisos temporários --------------------------------------------------- */

.avisos {
    position: fixed; right: 18px; bottom: 88px; z-index: var(--z-toast);
    display: flex; flex-direction: column; gap: var(--space-2);
    max-width: min(360px, calc(100vw - 36px));
    pointer-events: none;
}

.aviso {
    display: flex; align-items: flex-start; gap: var(--space-3);
    padding: var(--space-4);
    background: var(--gray-900);
    color: #fff;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    font-size: var(--font-size-sm);
    pointer-events: auto;
    animation: surgir .35s var(--ease-out-expo) both;
}
.aviso--saindo  { animation: sumir .3s var(--ease-out-expo) both; }

/* O VOCABULÁRIO DE TIPO ACEITA OS DOIS NOMES
   -------------------------------------------
   `ok` é o nome com que isto nasceu; `sucesso` é o que qualquer pessoa
   escreve ao chamar a função em português — e foi o que a área do cliente
   passou a usar, gerando `.aviso--sucesso`, classe sem regra: o aviso saía
   no cinza-escuro padrão em vez de verde.

   Aceitar os dois custa uma linha e elimina a classe de bug que só aparece
   em produção, quando alguém escreve o sinônimo óbvio. */
.aviso--ok,
.aviso--sucesso { background: var(--success-color); }
.aviso--erro    { background: var(--danger-color); }
.aviso--atencao { background: var(--warning-color); }
.aviso--info    { background: var(--info-color); }
.aviso i { margin-top: 2px; }

/* --- Voltar ao topo ------------------------------------------------------- */

.ao-topo {
    position: fixed; right: 18px; bottom: 84px; z-index: var(--z-sticky);
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px;
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-full);
    background: #fff;
    color: var(--primary-color);
    box-shadow: var(--shadow-md);
    cursor: pointer;
    opacity: 0; visibility: hidden;
    transform: translateY(10px);
    transition: opacity var(--transition-base), transform var(--transition-base),
                visibility var(--transition-base), background var(--transition-fast);
}
.ao-topo--visivel { opacity: 1; visibility: visible; transform: none; }
.ao-topo:hover { background: var(--primary-color); color: #fff; border-color: var(--primary-color); }

/* Em página com CTA fixo o botão sobe para não colidir */
body.tem-cta-fixo .ao-topo { bottom: 148px; }

/* =============================================================================
   Respeito à preferência do sistema

   Não é uma redução: é o desligamento. Quem marcou "reduzir movimento" no
   sistema não quer efeito atenuado, quer conteúdo parado.
   ============================================================================= */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
    [data-revelar] { opacity: 1 !important; transform: none !important; }
    .botao--primario::after { display: none; }
    .progresso { display: none; }
}