/* ===== MOVIMENTO: as animações do sistema =====
 * Inspiradas no iOS: curtas, com curva de "mola" (sai rápido e assenta devagar) e só em transform/opacity,
 * que a placa de vídeo faz sozinha (nada de animar largura/altura, que refaz a página a cada quadro).
 * As curvas e durações são tokens (--mola, --tempo-*, no começo do styles.css). Carregado por último: vale sobre
 * as transições antigas de cada componente. Quem pediu "menos movimento" no sistema não vê nenhuma (fim do arquivo).
 * A parte que precisa de JavaScript (pílula que desliza, números que se transformam, folha de filtros, tema)
 * fica em js/movimento.js.
 */

/* ---------- 1. Chegada de uma tela: os blocos sobem em cascata ----------
 * Só na chegada: o app.js põe .chegando na tela nova e tira logo depois, então o que for redesenhado depois
 * (filtros, listas) não "pula" de novo. backwards = o atraso já começa invisível, sem piscar. */
.tela.chegando > * {
    animation: mov-subir var(--tempo-longo) var(--mola) backwards
}

.tela.chegando > :nth-child(2) { animation-delay: 40ms }
.tela.chegando > :nth-child(3) { animation-delay: 80ms }
.tela.chegando > :nth-child(4) { animation-delay: 120ms }
.tela.chegando > :nth-child(n+5) { animation-delay: 160ms }

@keyframes mov-subir {
    from {
        opacity: 0;
        transform: translateY(14px)
    }
}

/* A primeira vez que os visuais de uma análise chegam, eles entram em cascata; quando só mudam os filtros,
   o conteúdo novo apenas volta à opacidade normal (sem "pular" a cada clique). */
#painel-visuais.primeira-vez > *,
#painel-visuais.primeira-vez .grade-visuais > * {
    animation: mov-subir var(--tempo-longo) var(--mola) backwards
}

#painel-visuais.primeira-vez > :nth-child(2) { animation-delay: 50ms }
#painel-visuais.primeira-vez > :nth-child(n+3) { animation-delay: 100ms }
#painel-visuais.primeira-vez .grade-visuais > :nth-child(2) { animation-delay: 140ms }
#painel-visuais.primeira-vez .grade-visuais > :nth-child(n+3) { animation-delay: 180ms }

/* Recalculando: o conteúdo esmaece só se a resposta demorar (respostas guardadas chegam antes e nada pisca). */
#painel-visuais,
#lista-resultados {
    transition: opacity var(--tempo-curto) var(--suave)
}

#painel-visuais.recarregando,
#lista-resultados.recarregando {
    opacity: .5;
    transition-delay: .12s
}

/* Enquanto a tela nova não chega, a antiga fica um pouco apagada e não aceita cliques (app.js: main.saindo). */
main.saindo > .tela {
    opacity: .6;
    pointer-events: none;
    transition: opacity var(--tempo-curto) var(--suave) .06s
}

/* ---------- 2. Toque: tudo que é clicável afunda um pouquinho ao apertar e volta com mola ---------- */
.botao,
.botao-icone,
.botao-link,
.chip,
.chip-registro,
.kpi-clicavel,
a.kpi,
.cartao-lista-maquina,
.menu-visual summary,
.th-funil,
.marca {
    transition-property: background-color, border-color, color, box-shadow, transform, opacity;
    transition-duration: var(--tempo-curto);
    transition-timing-function: var(--mola)
}

:is(.botao, .botao-icone, .chip, .chip-registro, .menu-visual summary, .th-funil):active:not(:disabled) {
    transform: scale(.95);
    transition-duration: var(--tempo-toque)
}

:is(.kpi-clicavel, a.kpi, .cartao-lista-maquina):active {
    transform: scale(.98);
    transition-duration: var(--tempo-toque)
}

.botao-link:active,
.marca:active {
    opacity: .6;
    transition-duration: var(--tempo-toque)
}

/* Cartões que levam a algum lugar sobem um pouco com sombra (só com mouse; no toque fica o "afundar"). */
@media (hover: hover) {
    :is(a.kpi, .kpi-clicavel, .cartao-lista-maquina):hover {
        transform: translateY(-2px);
        box-shadow: var(--sombra-elevada)
    }

    :is(a.kpi, .kpi-clicavel, .cartao-lista-maquina):active {
        transform: translateY(-1px) scale(.98)
    }
}

/* Itens de lista (menu lateral, sugestões, linhas): só o fundo acende, como numa lista do iOS. */
.lateral-item,
.busca-item,
.linha-clicavel,
.menu-visual-itens button {
    transition: background-color var(--tempo-curto) var(--suave), color var(--tempo-curto) var(--suave)
}

/* ---------- 3. Menus e balões: brotam de onde foram chamados ---------- */
.menu-visual[open] .menu-visual-itens {
    transform-origin: top right;
    animation: mov-brotar var(--tempo-medio) var(--mola) backwards
}

.busca-resultados.aberto,
.menu-coluna:not([hidden]) {
    transform-origin: top center;
    animation: mov-brotar var(--tempo-medio) var(--mola) backwards
}

.balao-ajuda:not([hidden]) {
    animation: mov-surgir var(--tempo-curto) var(--mola) backwards
}

@keyframes mov-brotar {
    from {
        opacity: 0;
        transform: translateY(-6px) scale(.96)
    }
}

@keyframes mov-surgir {
    from {
        opacity: 0;
        transform: scale(.94)
    }
}

/* ---------- 4. Aviso rápido ("Copiado!"): pílula que sobe com mola ---------- */
.aviso-toast {
    padding: 10px 18px;
    border-radius: 99px;
    transform: translate(-50%, 18px) scale(.9);
    transition: opacity var(--tempo-curto) var(--suave), transform var(--tempo-medio) var(--mola-viva)
}

.aviso-toast.visivel {
    transform: translate(-50%, 0) scale(1)
}

/* ---------- 5. Janelas: "Ampliar" um gráfico e os diálogos (arte, instalar) ---------- */
.visual.ampliado {
    animation: mov-ampliar var(--tempo-medio) var(--mola)
}

body.visual-ampliado::after {
    background: var(--veu);
    animation: mov-aparecer var(--tempo-curto) var(--suave)
}

.dialogo[open] {
    animation: mov-ampliar var(--tempo-medio) var(--mola)
}

.dialogo[open]::backdrop {
    background: var(--veu);
    animation: mov-aparecer var(--tempo-curto) var(--suave)
}

@keyframes mov-ampliar {
    from {
        opacity: 0;
        transform: scale(.94)
    }
}

@keyframes mov-aparecer {
    from {
        opacity: 0
    }
}

/* ---------- 6. Menu lateral no celular: gaveta que desliza, com o fundo escurecendo junto ---------- */
@media (max-width: 1000px) {
    .lateral {
        transition: transform var(--tempo-medio) var(--mola), visibility 0s linear var(--tempo-medio)
    }

    body.menu-aberto .lateral {
        transition: transform var(--tempo-medio) var(--mola)
    }

    .fundo-menu {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 45;
        background: var(--veu);
        opacity: 0;
        visibility: hidden;
        transition: opacity var(--tempo-medio) var(--suave), visibility 0s linear var(--tempo-medio)
    }

    body.menu-aberto .fundo-menu {
        opacity: 1;
        visibility: visible;
        transition: opacity var(--tempo-medio) var(--suave)
    }
}

/* ---------- 7. Cabeçalho de vidro: o conteúdo passa por baixo, desfocado (como a barra do iOS) ---------- */
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .cabecalho {
        background: var(--cabecalho-vidro);
        -webkit-backdrop-filter: saturate(1.6) blur(16px);
        backdrop-filter: saturate(1.6) blur(16px)
    }
}

/* ---------- 8. Esqueleto (carregando): brilho mais lento e suave ---------- */
.esqueleto {
    background: linear-gradient(100deg, var(--superficie-2) 30%, var(--destaque-hover) 50%, var(--superficie-2) 70%);
    background-size: 220% 100%;
    animation: brilho 1.5s var(--suave) infinite
}

/* ---------- 9. Troca de tema: o tema novo se abre num círculo a partir do botão (js/movimento.js) ---------- */
::view-transition-old(root),
::view-transition-new(root) {
    animation: none;
    mix-blend-mode: normal
}

/* ---------- 10. Pílula dos seletores (Ambas | Araçariguama | Itapevi, OP | OP × Máquina...) ----------
 * O fundo do botão ativo é um ::before: ao trocar, o js/movimento.js o faz deslizar do botão antigo para o novo.
 * Camadas: o grupo isola (isolation) e a pílula fica no fundo dele (z-index -1), embaixo do texto de TODOS os
 * botões; isolada no próprio botão, ela passaria por cima do texto do vizinho no meio do caminho. */
.segmentos {
    position: relative;
    isolation: isolate
}

/* A cor do texto troca com um pequeno atraso: o texto que perde a pílula só clareia depois que ela sai de baixo
   dele, e o que ganha só fica branco quando ela chega (sem isso, o texto some por uns quadros). */
.segmento {
    position: relative;
    transition: color var(--tempo-curto) var(--suave) 70ms, background-color var(--tempo-curto) var(--suave)
}

.segmentos .segmento.ativo {
    background: none
}

.segmentos .segmento.ativo::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background: var(--marca);
    transform-origin: left center
}

/* No cabeçalho azul, a pílula é de vidro (branco translúcido) e o texto fica sempre branco, como nos controles do
   iOS sobre barras coloridas: o texto nunca some quando a pílula passa por baixo dele. */
.cabecalho .segmentos .segmento.ativo::before {
    background: var(--cabecalho-pilula);
    box-shadow: var(--sombra-leve)
}

/* Item ativo do menu lateral: o fundo vira ::after para deslizar junto com a faixa verde (::before) até o item novo.
   Fica no fundo do menu (que já isola as camadas), embaixo do texto de todos os itens. */
.lateral {
    isolation: isolate
}

.lateral-item.ativo,
.lateral-item.ativo:hover {
    background: none
}

.lateral-item.ativo::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background: var(--marca-suave)
}

/* ---------- 11. Folha de filtros do celular: sobe com mola, desce rápido ---------- */
@media (max-width: 760px) {
    .painel-filtros.abrindo .painel-filtros-mais {
        animation: mov-folha-sobe var(--tempo-longo) var(--mola) backwards
    }

    .painel-filtros.abrindo::before {
        animation: mov-aparecer var(--tempo-medio) var(--suave) backwards
    }

    .painel-filtros.fechando .painel-filtros-mais {
        animation: mov-folha-desce .3s cubic-bezier(.4, 0, 1, 1) forwards
    }

    .painel-filtros.fechando::before {
        animation: mov-sumir .3s var(--suave) forwards
    }
}

@keyframes mov-folha-sobe {
    from {
        transform: translateY(100%)
    }
}

@keyframes mov-folha-desce {
    to {
        transform: translateY(105%)
    }
}

@keyframes mov-sumir {
    to {
        opacity: 0
    }
}

/* ---------- 12. Filtros fixos: a cápsula desce do cabeçalho com mola e sobe rápido ao sair ----------
 * A visibilidade espera a saída terminar (senão ela sumiria de uma vez). */
.filtros-fixos {
    transform: translateY(-10px) scale(.96);
    transform-origin: top right;
    transition: opacity var(--tempo-curto) var(--suave), transform var(--tempo-curto) var(--suave),
        visibility 0s linear var(--tempo-curto)
}

.filtros-fixos.visivel {
    transform: none;
    transition: opacity var(--tempo-medio) var(--suave), transform var(--tempo-longo) var(--mola-viva)
}

body:is(.folha-aberta, .menu-aberto, .visual-ampliado, .modo-tv) .filtros-fixos {
    transform: translateY(-10px) scale(.96)
}

/* ---------- Menos movimento: o sistema respeita a escolha do Windows/celular ---------- */
@media (prefers-reduced-motion: reduce) {
    .tela.chegando > *,
    #painel-visuais.primeira-vez > *,
    #painel-visuais.primeira-vez .grade-visuais > *,
    .menu-visual[open] .menu-visual-itens,
    .busca-resultados.aberto,
    .menu-coluna:not([hidden]),
    .balao-ajuda:not([hidden]),
    .visual.ampliado,
    .dialogo[open],
    .dialogo[open]::backdrop,
    body.visual-ampliado::after,
    .painel-filtros.abrindo .painel-filtros-mais,
    .painel-filtros.abrindo::before {
        animation: none
    }

    :is(.botao, .botao-icone, .chip, .chip-registro, .menu-visual summary, .th-funil, .kpi-clicavel, a.kpi, .cartao-lista-maquina):active,
    :is(a.kpi, .kpi-clicavel, .cartao-lista-maquina):hover {
        transform: none
    }

    .filtros-fixos,
    body:is(.folha-aberta, .menu-aberto, .visual-ampliado, .modo-tv) .filtros-fixos {
        transform: none;
        transition: opacity var(--tempo-curto) linear, visibility 0s linear var(--tempo-curto)
    }

    .filtros-fixos.visivel {
        transform: none;
        transition: opacity var(--tempo-curto) linear
    }
}