/*
 * Movimento Bumerang — extraído das pranchas do manual (Movimento, Conceito, Landing, Login, AppSync, AppQR).
 * Especificação e receita de montagem: design-system/motion/README.md
 * Cálculo do arco (centro e ângulo): design-system/motion/arco.mjs
 *
 * Os valores fixos abaixo são idênticos aos do manual. As animações de voo (bm-fly*) são
 * parametrizadas por variáveis CSS porque o ângulo depende do tamanho do arco em cada tela.
 */

/* ---------- Animações contínuas (idênticas em todas as pranchas) ---------- */

@keyframes bm-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes bm-pulse { 0% { transform: scale(0.6); opacity: 0.9; } 100% { transform: scale(1.6); opacity: 0; } }
@keyframes bm-bob { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-6px); } }

/* Carregamento: o símbolo gira no próprio centro visual (ver transform-origin abaixo). */
.bm-spin { animation: bm-spin 1.4s cubic-bezier(.45,.05,.35,.95) infinite; }
/* Órbita lenta: "Procurando dispositivos". */
.bm-spin-slow { animation: bm-spin 3.2s linear infinite; }
/* Pouso: pulso curto na chegada. Aplicar num círculo com stroke Lima. */
.bm-pulse { animation: bm-pulse 1.8s cubic-bezier(.2,.8,.2,1) infinite; transform-box: fill-box; transform-origin: center; }
/* Flutuar: mascote em repouso / ilustrações. */
.bm-bob { animation: bm-bob 2.8s ease-in-out infinite; }
/* Giro do bumerangue durante o voo ("uma volta por trajeto"). */
.bm-whirl { animation: bm-spin 0.9s linear infinite; }

/*
 * O símbolo não é simétrico: o centro visual fica a 34,2% da caixa. Todo giro do símbolo
 * (bm-spin, bm-whirl) usa esta origem, como no manual.
 */
.bm-symbol-origin { transform-box: fill-box; transform-origin: 34.2% 34.2%; }

/* ---------- Voo em arco (ida por cima, volta por baixo) ---------- */
/*
 * Como funciona (idêntico ao manual):
 *   1. O objeto fica no ponto mais alto (ida) ou mais baixo (volta) de um círculo.
 *   2. Um grupo externo gira em volta do CENTRO do círculo de -θ a +θ.
 *      Ida: centro abaixo da corda → o objeto passa por cima, da esquerda para a direita.
 *      Volta: centro acima da corda → o objeto passa por baixo, da direita para a esquerda.
 *   3. Opcional (mascote): um grupo interno gira ao contrário (bm-fly-up) para o Volta
 *      não ficar de cabeça para baixo.
 *   4. Opacidade: aparece em 8%, some a partir de 86%.
 *
 * Variáveis (calcule com arco.mjs):
 *   --bm-arc-angle   θ em graus (metade do ângulo do arco)
 *   --bm-arc-cx / --bm-arc-cy   centro do círculo (usado em transform-origin, com transform-box: view-box)
 *   --bm-trip        duração do ciclo (manual: 2.6s a 3.4s em loop de demonstração;
 *                    600–900ms para um envio real, sem loop)
 *   --bm-delay       atraso (a volta começa na metade do ciclo da ida no manual)
 */
@keyframes bm-fly {
  0%   { transform: rotate(calc(var(--bm-arc-angle) * -1)); opacity: 0; }
  8%   { opacity: 1; }
  86%  { opacity: 1; }
  100% { transform: rotate(var(--bm-arc-angle)); opacity: 0; }
}
@keyframes bm-fly-up {
  0%   { transform: rotate(var(--bm-arc-angle)); }
  100% { transform: rotate(calc(var(--bm-arc-angle) * -1)); }
}
.bm-fly {
  transform-box: view-box;
  transform-origin: var(--bm-arc-cx) var(--bm-arc-cy);
  animation: bm-fly var(--bm-trip, 3s) cubic-bezier(.2,.8,.2,1) var(--bm-delay, 0s) infinite;
}
.bm-fly-up {
  transform-box: view-box;
  transform-origin: 0 0;
  animation: bm-fly-up var(--bm-trip, 3s) cubic-bezier(.2,.8,.2,1) var(--bm-delay, 0s) infinite;
}
/* Envio real (uma vez só): */
.bm-fly--once, .bm-fly-up--once { animation-iteration-count: 1; animation-fill-mode: forwards; }

/* ---------- Acessibilidade ---------- */
@media (prefers-reduced-motion: reduce) {
  .bm-spin, .bm-spin-slow, .bm-pulse, .bm-bob, .bm-whirl, .bm-fly, .bm-fly-up { animation: none !important; }
}