/* Baliza · logo animado (rota A, "Marco"). Módulo plugável, sem biblioteca.
   Princípio: calmo, preciso, uma luz acende. Documentação: docs/motion-baliza.md.

   Marcação esperada (SVG do logo colado inline, na ordem dos arquivos de site/assets/logo-a/):
     <a class="marca" href="index.html" data-logo-animado> <svg …>
       <g …><path d="M8 8A4 4 …"/></g>   corpo  (haste + casco, uma forma só)
       <g …><circle cx="28" cy="12" r="8"/></g>   luz
       <path d="M52.0 44.0V20.0…"/>   nome (só no logo horizontal)
       <circle …/>   pingo do i (só no logo horizontal)
     </svg></a>
   Classes aceitas, se a ordem mudar: .bz-corpo/.bz-luz/.bz-nome/.bz-ponto ou as do site (.marco-corpo > path,
   .marco-luz > circle, .marco-nome, .marco-pingo).
   Fundo escuro: data-logo-animado="negativo". O JS (logo-animado.js) liga a entrada, os estados e o replay;
   sem o JS, o logo fica estático (nada some, nada pisca). */

[data-logo-animado] {
  --bz-ease: cubic-bezier(.16, 1, .3, 1);       /* sai decidido, assenta devagar (o mesmo --ease do site) */
  --bz-ease-luz: cubic-bezier(.45, 0, .2, 1);   /* acender: começa manso, termina firme */
  --bz-luz-cor: #2E9C86;                        /* Luz (no claro) */
  --bz-apagada: #0B2A33;                        /* luz apagada = cor do corpo (é a versão em uma cor) */
}
/* No escuro a luz apagada é um vidro escuro (branco a 20%), nunca branco cheio: acender tem que clarear. */
[data-logo-animado="negativo"] { --bz-luz-cor: #6FD3BC; --bz-apagada: rgba(255, 255, 255, .2); }

[data-logo-animado] svg { overflow: visible; }  /* o halo passa um pouco do viewBox; não muda o tamanho de nada */

/* Peças (classe explícita ou posição no SVG do logo). */
:is([data-logo-animado] .bz-corpo, [data-logo-animado] .marco-corpo > path, [data-logo-animado] svg > g:first-of-type > path) { transform-box: fill-box; }
:is([data-logo-animado] .bz-luz, [data-logo-animado] .marco-luz > circle, [data-logo-animado] svg > g:nth-of-type(2) > circle),
:is([data-logo-animado] .bz-ponto, [data-logo-animado] .marco-pingo, [data-logo-animado] svg > circle) {
  transform-box: fill-box;
  transform-origin: center;
  stroke: var(--bz-luz-cor);
  stroke-width: 0;
  stroke-opacity: 0;
  transition: transform .26s var(--bz-ease), stroke-width .26s var(--bz-ease), stroke-opacity .26s var(--bz-ease);
}

/* ---------- 1. Entrada (1,8 s): a base assenta, a luz acende, o nome aparece, o pingo do i acende ---------- */
:is(html[data-bz-entrada] [data-logo-animado], [data-logo-animado].bz-entrar)
  :is(.bz-corpo, .marco-corpo > path, svg > g:first-of-type > path) {
  animation: bz-corpo 560ms both;
}
:is(html[data-bz-entrada] [data-logo-animado], [data-logo-animado].bz-entrar)
  :is(.bz-luz, .marco-luz > circle, svg > g:nth-of-type(2) > circle) {
  animation: bz-luz 700ms var(--bz-ease-luz) 320ms both, bz-halo 1050ms var(--bz-ease) 700ms both;
}
:is(html[data-bz-entrada] [data-logo-animado], [data-logo-animado].bz-entrar)
  :is(.bz-nome, .marco-nome, svg > path) {
  animation: bz-nome 620ms var(--bz-ease) 760ms both;
}
:is(html[data-bz-entrada] [data-logo-animado], [data-logo-animado].bz-entrar)
  :is(.bz-ponto, .marco-pingo, svg > circle) {
  animation: bz-ponto 500ms var(--bz-ease-luz) 1300ms both;
}

/* Corpo: a haste sobe da base; o casco sobe logo depois. Recorte por polígono na caixa do próprio desenho
   (haste = 0–25% da largura, casco = metade de baixo). Só recorte: a geometria nunca é esticada. */
@keyframes bz-corpo {
  0%   { clip-path: polygon(0 100%, 25% 100%, 25% 100%, 100% 100%, 100% 100%, 0 100%); animation-timing-function: cubic-bezier(.3, 0, .2, 1); }
  42%  { clip-path: polygon(0 6%, 25% 6%, 25% 100%, 100% 100%, 100% 100%, 0 100%); animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
  100% { clip-path: polygon(0 0, 25% 0, 25% 50%, 100% 50%, 100% 100%, 0 100%); }
}
/* Luz: assenta apagada (na cor do corpo), espera um instante e acende, com um pulso único de 4%. */
@keyframes bz-luz {
  0%   { opacity: 0; transform: scale(.55); fill: var(--bz-apagada); }
  38%  { opacity: 1; transform: scale(1);   fill: var(--bz-apagada); }
  52%  { opacity: 1; transform: scale(1);   fill: var(--bz-apagada); }
  76%  { transform: scale(1.04); fill: var(--bz-luz-cor); }
  100% { opacity: 1; transform: scale(1);   fill: var(--bz-luz-cor); }
}
/* Halo: um anel só, que se abre e some. É o traço da própria luz; não é brilho nem degradê. */
@keyframes bz-halo {
  0%   { stroke-width: 0;  stroke-opacity: .42; }
  100% { stroke-width: 14; stroke-opacity: 0; }
}
/* Nome: só depois que a luz acende (a luz é o clímax), revelado por máscara da esquerda para a direita, letra por letra, na linha de base do símbolo. */
@keyframes bz-nome {
  from { clip-path: inset(-12% 100% -12% 0); }
  to   { clip-path: inset(-12% 0 -12% 0); }
}
/* Pingo do i: o mesmo gesto da luz, menor. É o eco que fecha a assinatura. */
@keyframes bz-ponto {
  0%   { opacity: 0; transform: scale(.4); fill: var(--bz-apagada); }
  45%  { opacity: 1; transform: scale(1);  fill: var(--bz-apagada); }
  100% { opacity: 1; transform: scale(1);  fill: var(--bz-luz-cor); }
}

/* ---------- 2. Repouso: respiração da luz (opcional, desligada por padrão) ---------- */
[data-logo-animado][data-logo-respira][data-logo-estado="repouso"] :is(.bz-luz, .marco-luz > circle, svg > g:nth-of-type(2) > circle) {
  animation: bz-respira 3.2s ease-in-out infinite alternate;
}
@keyframes bz-respira { from { opacity: 1; } to { opacity: .8; } }

/* ---------- 3. Carregando: a luz procura (0,4 ciclo por segundo) enquanto a barra anda ---------- */
[data-logo-animado][data-logo-estado="carregando"] :is(.bz-luz, .marco-luz > circle, svg > g:nth-of-type(2) > circle) {
  animation: bz-procura 1.25s ease-in-out infinite alternate;
}
@keyframes bz-procura { from { opacity: 1; } to { opacity: .42; } }

/* ---------- 4. Sinal: a luz fica firme, abre um anel uma vez e mantém um aro fino. Sem cor de alarme. ---------- */
[data-logo-animado][data-logo-estado="sinal"] :is(.bz-luz, .marco-luz > circle, svg > g:nth-of-type(2) > circle) {
  stroke-width: 4;
  stroke-opacity: .24;
  animation: bz-sinal 2s var(--bz-ease) both;
}
@keyframes bz-sinal {
  0%   { stroke-width: 0;  stroke-opacity: .5; }
  58%  { stroke-width: 18; stroke-opacity: 0; }
  60%  { stroke-width: 0;  stroke-opacity: 0; }
  100% { stroke-width: 4;  stroke-opacity: .24; }
}

/* ---------- 5. Microinteração do cabeçalho: a luz cresce 8% e ganha um aro leve ---------- */
@media (hover: hover) {
  a[data-logo-animado]:hover :is(.bz-luz, .marco-luz > circle, svg > g:nth-of-type(2) > circle) { transform: scale(1.08); stroke-width: 5; stroke-opacity: .16; }
}
a[data-logo-animado]:focus-visible :is(.bz-luz, .marco-luz > circle, svg > g:nth-of-type(2) > circle) { transform: scale(1.08); stroke-width: 5; stroke-opacity: .16; }

/* ---------- 6. Movimento reduzido: tudo parado no estado final (o sinal continua visível pelo aro fixo) ---------- */
@media (prefers-reduced-motion: reduce) {
  [data-logo-animado] *, [data-logo-animado] { animation: none !important; transition: none !important; }
}
.bz-sem-movimento [data-logo-animado] *, .bz-sem-movimento [data-logo-animado] { animation: none !important; transition: none !important; }