/* Movimento. Só transform e opacity (e clip-path / stroke-dashoffset onde o desenho pede). */

/* Troca de passo: direcional (avançar entra pela direita, voltar pela esquerda).
   Com View Transitions o navegador cuida das imagens; sem ela, as classes .sai-* e .entra-* abaixo. */
@keyframes sai-esq   { to { opacity: 0; transform: translate3d(-40px, 0, 0) scale(.985); } }
@keyframes sai-dir   { to { opacity: 0; transform: translate3d(40px, 0, 0) scale(.985); } }
@keyframes entra-dir { from { opacity: 0; transform: translate3d(56px, 0, 0) scale(.985); } }
@keyframes entra-esq { from { opacity: 0; transform: translate3d(-56px, 0, 0) scale(.985); } }
@keyframes fade-sai  { to { opacity: 0; } }
@keyframes fade-entra { from { opacity: 0; } }

/* A raiz e o palco ficam parados no lugar (o palco só troca o que tem dentro); o topo e a barra trocam de
   conteúdo com um cross-fade no mesmo lugar. O palco guarda a imagem do passo inteiro, então a imagem velha
   desce pelo quanto a página tinha rolado (--vt-rolagem) pra aparecer onde o aluno estava olhando. */
::view-transition-group(tela),
::view-transition-group(root) { animation: none; }
::view-transition-group(topo),
::view-transition-group(barra) {
  animation-duration: 320ms;
  animation-timing-function: var(--ease);
}
::view-transition-old(root) { display: none; }
::view-transition-new(root) { animation: none; mix-blend-mode: normal; }

::view-transition-old(tela) {
  translate: 0 calc(var(--vt-rolagem, 0px) * -1);
  animation: sai-esq 260ms var(--ease) both;
  mix-blend-mode: normal;
}
::view-transition-new(tela) { animation: entra-dir 450ms var(--ease) both; mix-blend-mode: normal; }
html[data-vt="voltar"]::view-transition-old(tela) { animation-name: sai-dir; }
html[data-vt="voltar"]::view-transition-new(tela) { animation-name: entra-esq; }

/* A folha que cresce até virar a ficha: a mesma peça muda de lugar e de tamanho */
::view-transition-group(folha) {
  animation-duration: 560ms;
  animation-timing-function: var(--ease);
}
::view-transition-old(folha),
::view-transition-new(folha) { mix-blend-mode: normal; }

/* Sem View Transitions */
.tela.sai-avancar { animation: sai-esq 220ms var(--ease) both; }
.tela.sai-voltar { animation: sai-dir 220ms var(--ease) both; }
.tela.entra-avancar { animation: entra-dir 450ms var(--ease) both; }
.tela.entra-voltar { animation: entra-esq 450ms var(--ease) both; }

/* Abertura */
@keyframes grade-aparece { from { opacity: 0; transform: scale(1.04); } }
@keyframes sobe-gira {
  from { opacity: 0; transform: translate3d(0, 64px, 0) rotate(-8deg) scale(.92); }
}
@keyframes flutua {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(0, -8px, 0); }
}
@keyframes revela-palavra { from { transform: translate3d(0, 112%, 0); } }
@keyframes cascata { from { opacity: 0; transform: translate3d(0, 18px, 0); } }

/* Elemento que aparece depois de uma resposta (veredito, retorno, caso) */
@keyframes surge { from { opacity: 0; transform: translate3d(0, 10px, 0); } }
.surge { animation: surge 420ms var(--ease) both; }

/* Marcador do indicador: um anel que pulsa uma vez ao chegar */
@keyframes anel-pulsa {
  from { opacity: .7; transform: scale(.5); }
  to { opacity: 0; transform: scale(2.8); }
}

/* Carimbo do nicho escolhido */
@keyframes carimba {
  from { opacity: 0; transform: translate3d(0, -14px, 0) rotate(-24deg) scale(1.9); }
  60% { opacity: 1; }
}

/* Revelação de painel que abre (a altura muda de uma vez; o desenho entra por clip-path) */
@keyframes abre-painel { from { clip-path: inset(0 0 100% 0); opacity: .4; } to { clip-path: inset(0 0 0 0); opacity: 1; } }
.abre { animation: abre-painel 480ms var(--ease) both; }

@keyframes cursor-pisca { 50% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0s !important;
    transition-duration: .01ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }
  ::view-transition-old(tela) { animation: fade-sai 120ms linear both; }
  ::view-transition-new(tela) { animation: fade-entra 180ms linear both; }
  ::view-transition-group(folha) { animation-duration: .01ms; }
}