/* ============================================================
   toque.css — resposta ao toque, animação e scroll

   Carregado por todas as páginas, a seguir ao base.css e antes das
   folhas de cada página, para que uma regra local possa sempre
   ganhar-lhe.

   ---- O princípio ----

   O browser tem três fases: layout, pintura e composição. `width`,
   `height`, `top`, `margin` e companhia obrigam à primeira, e a
   primeira arrasta as outras duas. `transform` e `opacity` saltam
   directamente para a última, que corre na GPU e não toca no resto da
   página.

   É por isso que só se animam essas duas. Não é preferência de estilo:
   é a diferença entre caber num quadro de 16,7 ms e não caber.
   ============================================================ */

/* ---- 1 · Resposta ao toque ----

   `touch-action: manipulation` desliga o duplo toque para ampliar, e é
   isso que tira os 300 ms que o browser esperava para saber se o
   segundo toque vinha. Não desliga o gesto de dois dedos, que é o que
   alguém com pouca visão usa para ampliar de verdade.

   O realce cinzento do Android é substituído por uma resposta que se vê
   no momento: a escala. E `:active` chega — não é preciso JavaScript
   nenhum para isto. */
button, a, summary, label, [role="button"], [role="tab"], [role="switch"],
input[type="checkbox"], input[type="radio"], select, .item > button, .prep-card,
.fer-caixa, .item-card, .copo-op, .ciclo, .dp-ciclo {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* A escala só no toque, e só em transform. Um `filter` ou uma mudança
   de cor de fundo aqui obrigava a repintar a árvore por baixo. */
button:active, a.btn:active, .btn:active, [role="button"]:active,
.prep-card:active, .fer-caixa:active, .item-card:active,
.item > button:active, .copo-op:active, .ciclo:active {
  transform: scale(.96);
}

/* As caixas grandes encolhem menos: a mesma escala numa caixa de 300 px
   e num botão de 44 lê-se como dois gestos diferentes. */
.prep-card:active, .fer-caixa:active, .item-card:active, .item > button:active {
  transform: scale(.985);
}

/* Uma caixa que já se levanta ao passar o rato não pode perder esse
   levantamento ao ser tocada: as duas transformações somam-se. */
.prep-card:hover:active, .fer-caixa:hover:active, .item-card:hover:active {
  transform: translateY(-2px) scale(.985);
}

/* ---- 2 · Transições ----

   Uma curva e uma duração para o site inteiro. Estavam espalhadas por
   `.12s`, `.14s`, `.15s`, `.16s`, `.18s` e `.2s`, todas sem curva
   declarada — ou seja, todas em `ease`, que arranca devagar e é o que
   dá a sensação de atraso. */
:root {
  --toque: .2s;
  --curva: cubic-bezier(.2, .8, .3, 1);
}

button, a, .btn, .prep-card, .fer-caixa, .item-card, .item > button,
.copo-op, .ciclo, .dp-ciclo {
  transition: transform var(--toque) var(--curva),
              opacity var(--toque) var(--curva),
              border-color var(--toque) var(--curva),
              background-color var(--toque) var(--curva),
              box-shadow var(--toque) var(--curva);
}

/* ---- 3 · O que anima, avisa ----

   `will-change` diz ao browser para promover o elemento a camada
   própria antes de a animação começar. Usado com conta: cada camada
   custa memória, e uma página que promove tudo fica mais lenta do que
   uma que não promove nada.

   Só o que se move mesmo: as janelas, o botão flutuante e a aba do
   plano. */
.dlg-in, .modal-box, .prep-jan-in, .seg-jan-in, .criar, .pro-aba {
  will-change: transform, opacity;
}

/* ---- 4 · Scroll ----

   `overscroll-behavior-y: none` mata o puxar-para-recarregar e o
   ressalto no fim da página. Numa aplicação instalada, esse ressalto é
   a coisa que mais denuncia que aquilo é uma página web.

   Nos painéis que rolam por dentro, `contain` impede o gesto de passar
   para a página por baixo quando se chega ao fim — é isso que faz uma
   janela aberta parecer presa ao ecrã. */
html, body {
  overscroll-behavior-y: none;
}
.dlg, .modal, .prep-jan, .seg-jan, .menu-pop, .sb-lista, .study, .drawer {
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* ---- 5 · Barras de progresso ----

   Animavam `width`, que é layout. Passam a `transform: scaleX()`, que
   é composição — e o elemento está vazio, portanto não há conteúdo a
   deformar-se com a escala.

   O valor é escrito em `--pct` pelo JavaScript, de 0 a 1. */
.progress > div, .ancora .barra i, .sb-prog .bar > i,
.quiz-bar > i, .dz-prog > i {
  width: 100% !important;
  transform: scaleX(var(--pct, 0));
  transform-origin: left center;
  transition: transform .4s var(--curva);
}

/* ---- 6 · A aba do plano ----

   Animava `padding-right`, que empurra o próprio conteúdo e força
   layout a cada quadro da transição. Passa a deslizar. */
.pro-aba { transition: transform var(--toque) var(--curva) !important }
.pro-aba:hover { padding-right: 16px; transform: translate3d(-4px, -50%, 0) }
.pro-aba:active { transform: translate3d(-2px, -50%, 0) scale(.99) }

/* ---- 7 · Quem pediu menos movimento ----

   Não é «animações mais curtas», é nenhuma. Quem liga isto no sistema
   costuma fazê-lo por enjoo ou por vertigem, e uma animação rápida
   provoca o mesmo que uma lenta.

   A resposta ao toque fica, sem movimento: a opacidade não desloca
   nada e continua a dizer que o toque foi registado. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  button:active, a.btn:active, .btn:active, [role="button"]:active,
  .prep-card:active, .fer-caixa:active, .item-card:active,
  .item > button:active, .copo-op:active, .ciclo:active {
    transform: none;
    opacity: .7;
  }
  .pro-aba:hover, .pro-aba:active { transform: translate3d(0, -50%, 0) }
}

/* ---- O aviso de versão nova ----
   Discreto e no fim do ecrã: é informação, não um pedido. Quem
   estiver a meio de alguma coisa ignora-o e ele fica lá. */
#em-nova-versao {
  position: fixed; z-index: 200; left: 50%; transform: translate3d(-50%, 0, 0);
  bottom: calc(16px + var(--nav-baixo-h, 0px) + env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: 12px;
  background: var(--ink, #191510); color: var(--paper, #F7F5F0);
  border-radius: 999px; padding: 10px 12px 10px 18px;
  font: 500 .86rem/1 var(--font-body, "Inter", system-ui, sans-serif);
  box-shadow: 0 8px 28px rgba(20, 17, 13, .28);
  animation: em-sobe .25s var(--curva) both;
}
#em-nova-versao button {
  background: var(--paper, #F7F5F0); color: var(--ink, #191510);
  border: 0; border-radius: 999px; padding: 8px 14px; cursor: pointer;
  font: 600 .82rem/1 inherit; min-height: 36px;
}
@keyframes em-sobe { from { opacity: 0; transform: translate3d(-50%, 12px, 0) } }