/* ===========================================================================
   OrçaDent — movimento

   As curvas e durações moram no tokens.css. Aqui ficam os três
   comportamentos que valem para a interface inteira e que, até agora, não
   existiam em lugar nenhum:

     1. resposta ao toque  — 76 estados :hover, 6 estados :active
     2. anel de foco       — 8 :focus-visible no produto todo
     3. hover no celular   — nenhum @media (hover:hover) no projeto

   O que NÃO está aqui: animação decorativa. Cada movimento abaixo responde a
   uma ação da pessoa. Fundo que se mexe sozinho, entrada em cascata e
   elemento que aparece "surgindo" ficam de fora de propósito — este produto é
   uma ferramenta de trabalho, e quem o usa abre a mesma tela vinte vezes por
   dia. Animação que se vê vinte vezes por dia só atrasa.
   =========================================================================== */

/* ---------------------------------------------------------------- 1. PRESSÃO
   Um botão que não reage ao clique não parece estar ouvindo. 97% é o ponto em
   que o olho registra sem que a interface pareça de borracha.

   `scale` e não `translateY`: a pastilha larga do "Assinar" e o quadradinho de
   remover etapa precisam da mesma linguagem, e um deslocamento de 1px some
   num botão de 400px de largura.

   Fora da lista, de propósito: cabeçalho de seção sanfonada, resumo de FAQ,
   ficha de dente e a alça de arrastar. São áreas grandes ou já têm o próprio
   gesto — encolher a seção inteira ao clicar no título lê como erro, não como
   resposta.
--------------------------------------------------------------------------- */
button,
[role="button"],
a.button,
.button,
.generate,
.botao-assinar,
.upload-button,
input[type="submit"]{
  transition: transform var(--dur-press) var(--ease-out);
}

button:active,
[role="button"]:active,
a.button:active,
.generate:active:not(:disabled),
.upload-button:active,
input[type="submit"]:active:not(:disabled){
  transform: scale(.97);
}

/* Quem já sobe no hover precisa voltar ao chão antes de encolher, senão o
   botão salta de "levantado" para "apertado" e a pressão some no meio. */
.button:active,
.botao-assinar:active,
.atalho:active,
.account-card .generate:active:not(:disabled){
  transform: translateY(0) scale(.97);
}

/* Sem resposta onde ela seria mentira. */
button:disabled,
button:disabled:active,
.generate:disabled:active,
[aria-disabled="true"]:active{
  transform: none;
}

/* Estes são grandes demais ou têm gesto próprio. */
.group-title:active,
.faq-item summary:active,
.teeth-box>summary:active,
.card-grip:active,
.pick-head:active,
.tooth:active{
  transform: none;
}

/* ------------------------------------------------------------------ 2. FOCO
   Um anel só, igual em toda parte, e só no foco por teclado — `:focus-visible`
   não dispara no clique de mouse. Quem navega por Tab precisa saber onde está;
   quem clica não precisa ver anel nenhum.
--------------------------------------------------------------------------- */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible{
  outline: 2px solid var(--green-600);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

/* Sobre fundo escuro o verde some — ali o anel é claro. */
:where(.sidebar,
.app-nav,
.announcement,
.surface-dark,
.billing-card,
.cta,
.footer) :where(a,
button,
input,
[tabindex]):focus-visible{
  outline-color: var(--lime-300);
}

/* -------------------------------------------------------- 3. HOVER NO TOQUE
   Num celular não existe passar o mouse: o toque dispara :hover e o estado
   FICA — o botão continua levantado depois que a pessoa já soltou, até ela
   tocar em outro lugar. Parece travamento.

   `hover: none` pega exatamente os aparelhos sem ponteiro fino. A regra
   desfaz só o deslocamento; cor e sombra podem ficar, porque não geram a
   sensação de "preso".
--------------------------------------------------------------------------- */
@media (hover: none){
  .button:hover,
  .botao-assinar:hover,
  .atalho:hover,
  .atalho:hover .atalho-seta,
  .escolha-cartao:hover,
  .account-card .generate:hover:not(:disabled),
  .lt-grid a:hover{
    transform: none;
  }
}

/* ------------------------------------------------------- 4. MENOS MOVIMENTO
   "Reduzir movimento" no sistema não quer dizer interface sem transição
   nenhuma: quer dizer sem DESLOCAMENTO. Uma cor que muda suave ajuda a
   entender o que aconteceu e não causa enjoo; um painel que voa pela tela
   causa.

   Por isso a regra troca a lista de propriedades em vez de zerar a duração:
   ficam cor, fundo, borda, sombra e opacidade — saem transform, largura e
   altura. Duas das cinco folhas (patient.css e artigo.css) não tinham
   proteção nenhuma; a página do paciente é a mais aberta do produto.
--------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-property: color, background-color, border-color, box-shadow,
                         opacity, fill, stroke !important;
    transition-duration: var(--dur-fast) !important;
  }
  html{scroll-behavior: auto !important;}
  button:active, [role="button"]:active, .button:active, .botao-assinar:active{transform: none;}
}