/* ==========================================================================
   PRISMA · motion.css — MOVIMENTO
   --------------------------------------------------------------------------
   Suave ao entrar. Imediato ao responder.

   O movimento aqui responde a UMA pergunta antes de existir: qual é a função?
   Só cinco respostas são aceitas — retorno, continuidade espacial, indicação
   de estado, evitar salto brusco, e (só em momento raro) encanto.
   Movimento sem uma dessas é enfeite, e enfeite em ferramenta usada oito
   horas por dia vira ruído.

   O QUE ESTE ARQUIVO SE RECUSA A ANIMAR
   · Command palette e qualquer coisa aberta por atalho de teclado. Abre
     dezenas de vezes por dia; animação ali é atraso, não polimento.
   · Troca de tema.
   · Linha de tabela, item de lista que a pessoa rola o dia inteiro.
     Animar o que se vê 100 vezes ao dia é cansar quem trabalha.

   REGRAS DE IMPLEMENTAÇÃO
   · Só `transform` e `opacity`. São as duas que a GPU resolve sem recalcular
     layout nem repintar. Animar largura, altura, margem ou `top` custa as
     três coisas em cada quadro.
   · Nunca `transition: all` — nomear a propriedade é o que impede animar sem
     querer algo que vai custar caro depois.
   · Nunca `scale(0)`. Nada no mundo real aparece do nada: começa em 0,95.
   · Transição (não keyframes) em tudo que pode ser disparado duas vezes em um
     segundo: transição refaz o caminho a partir de onde está; keyframe
     recomeça do zero e produz o salto.
   · Animação de sistema em CSS, não em JavaScript: CSS roda fora da thread
     principal e continua fluida enquanto a página carrega ou a IA gera.
   ========================================================================== */

/* ==========================================================================
   1. PRESSÃO — retorno tátil
   Frequência: dezenas de vezes por dia, logo: quase imperceptível.
   ========================================================================== */
.btn,
.btn-icone,
.chip,
.nav-pilula {
  transition: transform var(--motion-fast) var(--easing-standard);
}
.btn:active:not(:disabled),
.btn-icone:active:not(:disabled),
.chip:active,
.nav-pilula:active {
  /* `scale` leva o rótulo e o ícone junto — é isso que lê como pressão
     física, e não como um retângulo mudando de tamanho. */
  transform: scale(0.97);
}

/* Hover só onde hover existe de verdade. No toque, o navegador dispara um
   hover falso no tap e o estado fica grudado depois que o dedo sai. */
@media (hover: hover) and (pointer: fine) {
  .cartao-acao { transition: transform var(--motion-default) var(--easing-standard),
                             box-shadow var(--motion-default) var(--easing-standard); }
  .cartao-acao:hover { transform: translateY(-2px); }
}

/* ==========================================================================
   2. SELEÇÃO CONTÍNUA — o indicador desliza, não pula
   Função: continuidade espacial. O vidro acompanha a escolha, então não há
   dois estados desconexos: há um objeto que se moveu.
   Movimento NA tela pede ease-in-out, não ease-out.
   ========================================================================== */
.segmentado {
  position: relative;
  display: inline-flex;
  padding: var(--espaco-1);
  border-radius: var(--radius-full);
  background: var(--surface-2);
  isolation: isolate;
}
.segmentado-item {
  position: relative;
  z-index: 1;
  min-height: 36px;
  padding: 0 var(--espaco-5);
  border-radius: var(--radius-full);
  color: var(--text-muted);
  font-size: var(--body-sm-size);
  font-weight: 550;
  cursor: pointer;
  transition: color var(--motion-default) var(--easing-standard);
}
.segmentado-item[aria-selected="true"] { color: var(--text-primary); }

/* O indicador é UM elemento que se move, não um fundo que acende em cada
   item. `--i` é o índice do selecionado e `--n` o total: quem controla é o
   componente, e a transição faz o resto. */
.segmentado-indicador {
  position: absolute;
  z-index: 0;
  top: var(--espaco-1);
  bottom: var(--espaco-1);
  left: var(--espaco-1);
  width: calc((100% - var(--espaco-2)) / var(--n, 3));
  border-radius: var(--radius-full);
  background: var(--surface-elevated);
  box-shadow: var(--elev-raised);
  transform: translateX(calc(100% * var(--i, 0)));
  transition: transform var(--motion-default) var(--easing-movimento);
}

/* ==========================================================================
   3. CONFIRMAÇÃO — um pequeno momento de certeza
   Função: retorno. Acontece uma vez por ação concluída, então pode ter
   personalidade — mas volta sozinho ao repouso.
   ========================================================================== */
@keyframes prisma-confirmar {
  0%   { transform: scale(0.94); opacity: 0; }
  55%  { transform: scale(1.04); opacity: 1; }
  100% { transform: scale(1);    opacity: 1; }
}
.confirmar {
  animation: prisma-confirmar var(--motion-slow) var(--easing-standard) both;
}

/* ==========================================================================
   4. ENTRADA EM SEQUÊNCIA — uma coisa de cada vez
   Função: evitar salto brusco quando várias peças chegam juntas.
   Só para grupo que a pessoa vê OCASIONALMENTE — resultado de busca, arquivos
   recém-anexados, agentes que entraram numa tarefa. Nunca numa lista rolada
   o dia inteiro.
   O atraso é curto (45ms): sequência longa deixa de ser ritmo e vira espera.
   ========================================================================== */
@keyframes prisma-entrar {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.entrada-sequencia > * {
  animation: prisma-entrar var(--motion-slow) var(--easing-enter) both;
}
.entrada-sequencia > *:nth-child(1) { animation-delay: 0ms; }
.entrada-sequencia > *:nth-child(2) { animation-delay: 45ms; }
.entrada-sequencia > *:nth-child(3) { animation-delay: 90ms; }
.entrada-sequencia > *:nth-child(4) { animation-delay: 135ms; }
.entrada-sequencia > *:nth-child(5) { animation-delay: 180ms; }
.entrada-sequencia > *:nth-child(n+6) { animation-delay: 225ms; }
/* A sequência é decorativa: nunca pode bloquear o clique enquanto roda. */
.entrada-sequencia > * { pointer-events: auto; }

/* ==========================================================================
   5. MUDANÇA DE NÚMERO — cada descoberta conta
   Função: indicação de estado. Marca que o valor é NOVO; sem isso o número
   troca e ninguém percebe. Curto de propósito: é um aviso, não um espetáculo.
   Transição, não keyframe — o número pode mudar duas vezes em um segundo.
   ========================================================================== */
.numeric { transition: transform var(--motion-fast) var(--easing-standard); }
.numeric[data-mudou="true"] { transform: translateY(-2px); }

/* ==========================================================================
   6. GERANDO — a inteligência está trabalhando
   Função: indicação de estado. É o único movimento CONTÍNUO do sistema, e
   existe porque a alternativa (tela parada) é indistinguível de travamento.
   CSS e não JavaScript justamente porque a página está ocupada gerando:
   animação em rAF perderia quadros exatamente quando ela precisa rodar.
   ========================================================================== */
@keyframes prisma-gerando {
  0%, 100% { opacity: .28; transform: translateY(0); }
  50%      { opacity: 1;   transform: translateY(-3px); }
}
.gerando { display: inline-flex; gap: 5px; align-items: center; }
.gerando span {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--accent-text);
  animation: prisma-gerando 1.1s var(--easing-movimento) infinite;
}
.gerando span:nth-child(2) { animation-delay: .14s; }
.gerando span:nth-child(3) { animation-delay: .28s; }

/* O brilho que atravessa a peça enquanto ela é produzida. */
@keyframes prisma-varrer { to { background-position: -200% 0; } }
.gerando-texto {
  background: linear-gradient(
    90deg,
    var(--text-muted) 0%, var(--text-primary) 18%, var(--text-muted) 36%
  );
  background-size: 200% 100%;
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  animation: prisma-varrer 2.4s linear infinite;
}

/* --------------------------------------------------------------------------
   Apoio: as regras da dica de Emil Kowalski que valem para todo o sistema.
   `will-change` só onde há animação de verdade — em tudo, vira custo de
   memória sem ganho.
   -------------------------------------------------------------------------- */
.segmentado-indicador,
.gerando span,
.entrada-sequencia > * { will-change: transform; }

/* Espelho do prefers-reduced-motion para o interruptor do catálogo e para
   produto que ofereça a opção na própria interface. Mesmas regras. */
[data-reduzir-movimento] .btn:active,
[data-reduzir-movimento] .btn-icone:active,
[data-reduzir-movimento] .chip:active,
[data-reduzir-movimento] .nav-pilula:active,
[data-reduzir-movimento] .numeric[data-mudou="true"],
[data-reduzir-movimento] .cartao-acao:hover { transform: none; }
[data-reduzir-movimento] .segmentado-indicador { transition-duration: 1ms; }
[data-reduzir-movimento] .entrada-sequencia > * { animation: none; opacity: 1; transform: none; }
[data-reduzir-movimento] .confirmar { animation: none; opacity: 1; }
[data-reduzir-movimento] .gerando span { animation-duration: 2.6s; animation-timing-function: ease-in-out; }
[data-reduzir-movimento] .gerando-texto { animation: none; color: var(--text-secondary);
                                          background: none; -webkit-text-fill-color: currentColor; }

/* ==========================================================================
   7. MOVIMENTO REDUZIDO — entrega junto, não depois
   Reduzir NÃO é zerar: o que ajuda a entender continua (opacidade, cor); o
   que desloca no espaço sai. Quem pediu menos movimento não pediu menos
   informação.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .btn:active, .btn-icone:active, .chip:active, .nav-pilula:active,
  .numeric[data-mudou="true"], .cartao-acao:hover { transform: none; }

  .segmentado-indicador { transition-duration: 1ms; }

  .entrada-sequencia > * {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .confirmar { animation: none; opacity: 1; }

  /* O "gerando" continua — é informação de estado, não enfeite. Mas para de
     se deslocar e passa a só respirar, bem mais devagar. */
  .gerando span {
    animation: prisma-gerando 2.6s ease-in-out infinite;
  }
  @keyframes prisma-gerando {
    0%, 100% { opacity: .35; transform: none; }
    50%      { opacity: 1;   transform: none; }
  }

  .gerando-texto { animation: none; color: var(--text-secondary);
                   background: none; -webkit-text-fill-color: currentColor; }
}