/* ==========================================================================
   BIBLIOTECA DE EFEITOS
   12 animações extraídas dos modelos analisados em modelos/MODELOS.md.
   Nenhuma depende de JavaScript de biblioteca.
   Todas animam apenas transform e opacity, que o navegador resolve na GPU.
   ========================================================================== */

/* --- 1. fade-slide  ·  entrada e saída da etapa -------------------------- */
@keyframes fade-slide-entra {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
@keyframes fade-slide-sai {
  from { opacity: 1; transform: none; }
  to   { opacity: 0; transform: translateY(-10px); }
}
.tela            { animation: fade-slide-entra 240ms cubic-bezier(.4, 0, .2, 1) both; }
.tela--saindo    { animation: fade-slide-sai 160ms cubic-bezier(.4, 0, .2, 1) both; }

/* Entrada escalonada das opções, uma depois da outra */
.opcoes > * { animation: fade-slide-entra 260ms cubic-bezier(.4, 0, .2, 1) both; }
.opcoes > *:nth-child(1) { animation-delay:  40ms; }
.opcoes > *:nth-child(2) { animation-delay:  80ms; }
.opcoes > *:nth-child(3) { animation-delay: 120ms; }
.opcoes > *:nth-child(4) { animation-delay: 160ms; }
.opcoes > *:nth-child(5) { animation-delay: 200ms; }
.opcoes > *:nth-child(6) { animation-delay: 240ms; }
.opcoes > *:nth-child(n+7) { animation-delay: 280ms; }

/* --- 2. progress-fill  ·  barra de progresso ---------------------------- */
/* A transição de cor vive em estilos.css (.progresso__seg).
   Aqui fica o estalo do traço que acabou de acender. */
@keyframes seg-acende {
  from { transform: scaleY(2.2); filter: brightness(1.9); }
  to   { transform: scaleY(1);   filter: brightness(1); }
}
.progresso__seg.on { animation: seg-acende 320ms cubic-bezier(.4, 0, .2, 1); }

/* --- 3. arrow-bounce  ·  seta apontando pro botão ----------------------- */
@keyframes arrow-bounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(6px); }
}
.seta-guia { animation: arrow-bounce 1.3s ease-in-out infinite; }

/* --- 4. btn-glow  ·  halo pulsante no botão ----------------------------- */
@keyframes btn-glow {
  0%, 100% { box-shadow: 0 0 0 0 var(--cor-acento-suave); }
  50%      { box-shadow: 0 0 0 9px var(--cor-acento-suave); }
}
.botao--glow { animation: btn-glow 1.9s ease-in-out infinite; }

/* --- 5. press-sink  ·  afundamento no toque ----------------------------- */
/* Aplicado em estilos.css via :active nas classes .opcao e .botao.
   Mantido aqui como referência da biblioteca. */

/* --- 6. ripple  ·  onda a partir do ponto do toque ---------------------- */
@keyframes ripple {
  from { transform: scale(0);   opacity: .45; }
  to   { transform: scale(2.6); opacity: 0; }
}
.ripple {
  position: absolute;
  border-radius: 50%;
  background: var(--cor-acento);
  pointer-events: none;
  animation: ripple 560ms ease-out forwards;
}

/* --- 7. shimmer  ·  esqueleto de carregamento --------------------------- */
@keyframes shimmer {
  from { background-position: -420px 0; }
  to   { background-position:  420px 0; }
}
.shimmer {
  background: linear-gradient(90deg,
    var(--cor-superficie) 0%,
    var(--cor-acento-suave) 50%,
    var(--cor-superficie) 100%);
  background-size: 420px 100%;
  animation: shimmer 1.4s linear infinite;
  border-radius: var(--raio);
}

/* --- 8. shrink-bar  ·  barra encolhendo, para urgência ------------------ */
@keyframes shrink-bar { from { transform: scaleX(1); } to { transform: scaleX(0); } }
.shrink-bar {
  height: 4px;
  background: var(--cor-acento);
  transform-origin: left center;
  animation: shrink-bar var(--duracao, 10s) linear forwards;
}

/* --- 9. image-shine  ·  brilho atravessando a imagem -------------------- */
@keyframes image-shine {
  from { transform: translateX(-120%) skewX(-18deg); }
  to   { transform: translateX(220%)  skewX(-18deg); }
}
.image-shine { position: relative; overflow: hidden; }
.image-shine::after {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 45%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .38), transparent);
  animation: image-shine 2.6s ease-in-out infinite;
}

/* --- 10. scan-line  ·  linha varrendo, para tela de análise ------------- */
@keyframes scan-line {
  0%   { top: 0;    opacity: 0; }
  12%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { top: 100%; opacity: 0; }
}
.scan { position: relative; overflow: hidden; }
.scan::before {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--cor-acento), transparent);
  animation: scan-line 1.9s ease-in-out infinite;
}

/* --- 11. border-spin  ·  borda girando no card em destaque -------------- */
@keyframes border-spin { to { --angulo: 360deg; } }
@property --angulo { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
.border-spin {
  position: relative;
  background:
    linear-gradient(var(--cor-superficie), var(--cor-superficie)) padding-box,
    conic-gradient(from var(--angulo), transparent 60%, var(--cor-acento)) border-box;
  border: 2px solid transparent;
  border-radius: var(--raio);
  animation: border-spin 3s linear infinite;
}

/* --- 12. spinner  ·  carregamento circular ------------------------------ */
@keyframes spinner { to { transform: rotate(360deg); } }
.spinner {
  width: 30px; height: 30px;
  margin: 0 auto;
  border: 3px solid var(--cor-trilha);
  border-top-color: var(--cor-acento);
  border-radius: 50%;
  animation: spinner .8s linear infinite;
}

/* ==========================================================================
   Acessibilidade: quem pediu menos movimento no sistema recebe menos
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}