/* =============================================================================
   Gabarita · animacoes.css — o catálogo de movimento
   Requer tokens.css. Cada micro-interação tem:
     .anima-<nome>  → versão CALMA por padrão (serve a quem pediu menos movimento)
     e, dentro de @media (prefers-reduced-motion: no-preference) + sem
     data-movimento="reduzido", a versão COMPLETA.
   O JS só adiciona a classe e a remove em "animationend" (ver demo.js → animar()).
   Regras de ouro em 06-design-system.md § Movimento.
   ============================================================================= */


/* ---------------------------------------------------------------------------
   Transições entre páginas (View Transitions entre documentos)
   --------------------------------------------------------------------------- */
@view-transition { navigation: auto; }

::view-transition-old(root) { animation: vt-sair var(--dur-media) var(--ease-entrada) both; }
::view-transition-new(root) { animation: vt-entrar var(--dur-lenta) var(--ease-saida) both; }
/* navegação e topo do player ficam parados: só o conteúdo troca */
::view-transition-group(navegacao), ::view-transition-group(player-topo) { animation-duration: 0s; }
/* abas: a pílula ativa desliza (o JS chama document.startViewTransition) */
::view-transition-group(aba-ativa) { animation-duration: var(--dur-lenta); animation-timing-function: var(--mola-suave); }

/* troca de questão dentro do player: document.startViewTransition({ update, types: ['avancar'] }) */
html:active-view-transition-type(avancar) {
  &::view-transition-old(questao) { animation: questao-sair-esq var(--dur-media) var(--ease-entrada) both; }
  &::view-transition-new(questao) { animation: questao-entrar-dir var(--dur-lenta) var(--ease-saida) both; }
}
html:active-view-transition-type(voltar) {
  &::view-transition-old(questao) { animation: questao-sair-dir var(--dur-media) var(--ease-entrada) both; }
  &::view-transition-new(questao) { animation: questao-entrar-esq var(--dur-lenta) var(--ease-saida) both; }
}

@keyframes vt-sair   { to   { opacity: 0; translate: 0 calc(-6px * var(--movimento)); } }
@keyframes vt-entrar { from { opacity: 0; translate: 0 calc(10px * var(--movimento)); } }
@keyframes questao-sair-esq   { to   { opacity: 0; translate: calc(-32px * var(--movimento)) 0; } }
@keyframes questao-sair-dir   { to   { opacity: 0; translate: calc(32px * var(--movimento)) 0; } }
@keyframes questao-entrar-dir { from { opacity: 0; translate: calc(40px * var(--movimento)) 0; } }
@keyframes questao-entrar-esq { from { opacity: 0; translate: calc(-40px * var(--movimento)) 0; } }


/* ---------------------------------------------------------------------------
   Keyframes (nomes em português, um por efeito)
   --------------------------------------------------------------------------- */
@keyframes girar { to { rotate: 1turn; } }
@keyframes aparecer { from { opacity: 0; } }
@keyframes sumir { to { opacity: 0; } }

@keyframes entrar-subindo { from { opacity: 0; translate: 0 14px; } }
@keyframes pop {
  0% { scale: 1; }
  35% { scale: 1.22; }
  100% { scale: 1; }
}

/* acerto: anel verde que se expande + leve inflada */
@keyframes acerto-pulso {
  0%   { box-shadow: 0 3px 0 0 var(--acerto-700), 0 0 0 0 color-mix(in oklab, var(--acerto-500) 55%, transparent); scale: 1; }
  30%  { scale: 1.025; }
  100% { box-shadow: 0 3px 0 0 var(--acerto-700), 0 0 0 18px color-mix(in oklab, var(--acerto-500) 0%, transparent); scale: 1; }
}
@keyframes acerto-calmo {
  from { background-color: var(--acerto-100); }
}
@keyframes letra-carimbo {
  0%   { scale: 0.4; rotate: -25deg; }
  60%  { scale: 1.25; rotate: 8deg; }
  100% { scale: 1; rotate: 0deg; }
}

/* erro: tremida curta e amortecida (nunca mais de 450ms) */
@keyframes erro-tremida {
  0%, 100% { translate: 0 0; }
  15% { translate: -8px 0; }
  30% { translate: 7px 0; }
  45% { translate: -5px 0; }
  60% { translate: 3px 0; }
  75% { translate: -1px 0; }
}
@keyframes erro-calmo { from { background-color: var(--erro-100); } }

/* partículas do acerto (o JS cria 10 <i class="particula"> com --dx, --dy, --giro) */
@keyframes particula-voar {
  0%   { opacity: 1; translate: 0 0; scale: 0.4; rotate: 0deg; }
  70%  { opacity: 1; }
  100% { opacity: 0; translate: var(--dx) var(--dy); scale: 1; rotate: var(--giro, 180deg); }
}

/* +XP subindo */
@keyframes xp-voar {
  0%   { opacity: 0; translate: -50% 8px; scale: 0.6; }
  20%  { opacity: 1; translate: -50% -6px; scale: 1.12; }
  70%  { opacity: 1; translate: -50% -34px; scale: 1; }
  100% { opacity: 0; translate: -50% -52px; scale: 0.95; }
}

/* brilho que atravessa (barra que encheu, adesivo, nível) */
@keyframes brilho-passar {
  from { translate: -100% 0; }
  to   { translate: 100% 0; }
}

/* chama da sequência: tremula 3 vezes quando o número muda, depois descansa */
@keyframes chama-tremular {
  0%, 100% { scale: 1 1; rotate: 0deg; }
  25% { scale: 0.94 1.12; rotate: -4deg; }
  50% { scale: 1.06 0.94; rotate: 3deg; }
  75% { scale: 0.97 1.06; rotate: -2deg; }
}
/* número que troca: o velho sobe e sai, o novo sobe de baixo */
@keyframes numero-entrar { from { translate: 0 60%; opacity: 0; } }

/* conquista: adesivo carimbado + raios que giram meia volta + brilho */
@keyframes adesivo-carimbar {
  0%   { opacity: 0; scale: 2.4; rotate: -32deg; }
  55%  { opacity: 1; }
  100% { opacity: 1; scale: 1; rotate: var(--giro, -6deg); }
}
@keyframes raios-girar {
  0%   { opacity: 0; scale: 0.4; rotate: 0deg; }
  25%  { opacity: 1; }
  100% { opacity: 0; scale: 1.25; rotate: 120deg; }
}

/* nível subiu */
@keyframes nivel-subir {
  0%   { scale: 1; rotate: 0deg; }
  40%  { scale: 1.35; rotate: -12deg; }
  100% { scale: 1; rotate: 0deg; }
}

/* anel da meta completou */
@keyframes anel-completar {
  0%   { scale: 1; }
  40%  { scale: 1.12; }
  100% { scale: 1; }
}

/* sino com novidade: balança 2 vezes */
@keyframes sino-balancar {
  0%, 100% { rotate: 0deg; }
  20% { rotate: 16deg; } 40% { rotate: -12deg; } 60% { rotate: 8deg; } 80% { rotate: -4deg; }
}

/* bandeira de "marcar para revisar" */
@keyframes bandeira-tremular {
  0%, 100% { rotate: 0deg; scale: 1; }
  30% { rotate: -14deg; scale: 1.15; }
  60% { rotate: 8deg; }
}

/* estado vazio: flutua 3 vezes e para */
@keyframes flutuar {
  0%, 100% { translate: 0 0; rotate: 0deg; }
  50% { translate: 0 -8px; rotate: -2deg; }
}
@keyframes cintilar {
  0%, 100% { scale: 1; opacity: 1; }
  50% { scale: 0.6; opacity: 0.5; }
}

/* toast e folha */
@keyframes toast-entrar { from { opacity: 0; translate: 0 calc(24px * var(--movimento)); scale: calc(1 - 0.06 * var(--movimento)); } }
@keyframes toast-sair   { to   { opacity: 0; translate: 0 calc(12px * var(--movimento)); } }

/* grifo de marca-texto sendo passado */
@keyframes grifar { from { background-size: 0% 0.52em; } }

/* skeleton */
@keyframes skeleton-brilho { to { translate: 100% 0; } }
@keyframes skeleton-respirar { 50% { opacity: 0.55; } }

/* barras do gráfico crescendo */
@keyframes barra-crescer { from { scale: 1 0; } }


/* ---------------------------------------------------------------------------
   Utilitários — versão CALMA (padrão)
   --------------------------------------------------------------------------- */
@layer utilitarios {
  .anima-entrar       { animation: aparecer var(--dur-media) var(--ease-padrao) both; animation-delay: calc(var(--i, 0) * 40ms); }
  .anima-acerto       { animation: acerto-calmo 700ms var(--ease-padrao); }
  .anima-erro         { animation: erro-calmo 700ms var(--ease-padrao); }
  .anima-pop          { animation: aparecer var(--dur-rapida) var(--ease-padrao); }
  .anima-xp           { position: absolute; left: 50%; top: 0; translate: -50% -40px; pointer-events: none; animation: sumir 1200ms var(--ease-padrao) both; }
  .anima-conquista .adesivo__arte { animation: aparecer 300ms var(--ease-padrao) both; }
  .anima-nivel        { animation: aparecer 300ms var(--ease-padrao); }
  .anima-chama .icone { animation: none; }
  .anima-numero       { display: inline-block; animation: aparecer 200ms var(--ease-padrao); }
  .anima-anel         { animation: none; }
  .anima-sino         { animation: none; }
  .anima-bandeira     { animation: none; }
  .anima-flutuar      { animation: none; }
  .anima-grifo        { animation: none; }
  .anima-barras .grafico__barra { animation: aparecer var(--dur-media) var(--ease-padrao) both; }
  .toast              { animation: toast-entrar var(--dur-media) var(--ease-padrao) both; }
  .toast.is-saindo    { animation: toast-sair var(--dur-rapida) var(--ease-padrao) both; }
  .skeleton::after    { display: none; }
  .skeleton           { animation: skeleton-respirar 1.6s ease-in-out infinite; }
  .particula          { display: none; }
  .raios              { display: none; }

  /* -------------------------------------------------------------------------
     Versão COMPLETA — só para quem não pediu menos movimento
     ------------------------------------------------------------------------- */
  @media (prefers-reduced-motion: no-preference) {
    :root:not([data-movimento="reduzido"]) {

      /* entrada de listas e cartões em cascata (máx. 8 itens com atraso) */
      & .anima-entrar { animation: entrar-subindo var(--dur-lenta) var(--ease-saida) both; animation-delay: calc(min(var(--i, 0), 8) * 45ms); }

      /* seleção de alternativa: a letra dá um "pop" */
      & .alternativa:has(> input:checked) .alternativa__letra { animation: pop var(--dur-lenta) var(--mola-quique); }

      /* acerto e erro */
      & .anima-acerto { animation: acerto-pulso 900ms var(--ease-saida); }
      & .anima-acerto .alternativa__letra { animation: letra-carimbo var(--dur-mola) var(--mola-elastica); }
      & .anima-erro { animation: erro-tremida 420ms var(--ease-padrao); }
      & .particula {
        display: block;
        position: absolute;
        left: var(--x, 50%); top: var(--y, 50%);
        width: var(--tam, 9px); height: var(--tam, 9px);
        margin: calc(var(--tam, 9px) / -2);
        border-radius: var(--forma, 50%);
        background: var(--cor, var(--acerto-500));
        pointer-events: none;
        animation: particula-voar 700ms var(--ease-saida) forwards;
      }

      & .anima-pop { animation: pop var(--dur-mola) var(--mola-quique); }
      & .anima-xp { animation: xp-voar 1100ms var(--ease-saida) both; }

      /* barra que encheu: brilho atravessa uma vez */
      & .anima-brilho { position: relative; overflow: hidden; }
      & .anima-brilho::before {
        content: ""; position: absolute; inset: 0; z-index: 1;
        background: linear-gradient(100deg, transparent 20%, rgb(255 255 255 / 0.7) 50%, transparent 80%);
        animation: brilho-passar 900ms var(--ease-padrao) 250ms both;
      }

      & .anima-chama .icone { animation: chama-tremular 520ms var(--ease-padrao) 3; }
      & .anima-numero { animation: numero-entrar var(--dur-lenta) var(--mola-quique); }

      & .anima-conquista .adesivo__arte { animation: adesivo-carimbar 800ms var(--mola-elastica) both; }
      & .anima-conquista .adesivo__arte::after { animation: brilho-passar 900ms var(--ease-padrao) 650ms both; }
      & .raios {
        display: block;
        position: absolute; inset: -40%;
        z-index: -1;
        background: repeating-conic-gradient(from 0deg, var(--marca-300) 0 10deg, transparent 10deg 30deg);
        mask: radial-gradient(closest-side, transparent 30%, #000 45%, transparent 100%);
        animation: raios-girar 1600ms var(--ease-saida) both;
      }

      & .anima-nivel { animation: nivel-subir 800ms var(--mola-elastica); }
      & .anima-anel { animation: anel-completar 700ms var(--mola-quique); }
      & .anima-sino { animation: sino-balancar 900ms var(--ease-padrao); transform-origin: 50% 10%; }
      & .anima-bandeira { animation: bandeira-tremular 600ms var(--mola-quique); transform-origin: 20% 90%; }

      & .anima-flutuar { animation: flutuar 2.6s ease-in-out 3; }
      & .vazio__enfeite { animation: cintilar 1.4s ease-in-out 3 both; animation-delay: var(--atraso, 0s); }

      & .anima-grifo { animation: grifar 700ms var(--ease-saida) 300ms both; }
      & .anima-barras .grafico__barra { animation: barra-crescer var(--dur-mola) var(--mola-suave) both; animation-delay: calc(var(--i, 0) * 50ms); }

      & .toast { animation: toast-entrar var(--dur-lenta) var(--mola-suave) both; }

      & .skeleton { animation: none; }
      & .skeleton::after { display: block; animation: skeleton-brilho 1.5s var(--ease-padrao) infinite; }
    }
  }

  /* menos movimento: trocas de página e de questão viram só um esmaecer */
  @media (prefers-reduced-motion: reduce) {
    ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation-duration: 150ms !important; }
    html { scroll-behavior: auto; }
  }
}