/* ==========================================================================
   Movimento do tema "Órbita Neon".

   Carregado DEPOIS do style.css e sem substituir nada dele: tudo aqui é
   acréscimo, e remover a linha do <link> devolve as páginas ao estado parado.
   Não há biblioteca externa — o movimento é CSS.

   Todo seletor novo começa com `ca-` para não esbarrar nas classes que já
   existem no style.css.

   Quem navega com "reduzir movimento" ligado no sistema vê a página inteira
   parada: o bloco no fim do arquivo desliga tudo.

   Author: Dario C Oliveira
   ========================================================================== */

[id]{scroll-margin-top:80px}

/* ---- Fundo vivo: a aurora deriva, a malha corre ---------------------- */
body::before{animation:ca-aurora 19s ease-in-out infinite alternate}
@keyframes ca-aurora{
  from{transform:translate3d(-1.5%,-1%,0) scale(1)}
  to{transform:translate3d(2%,2%,0) scale(1.07)}
}
body::after{animation:ca-grade 24s linear infinite}
@keyframes ca-grade{to{background-position:56px 56px,56px 56px}}

/* ---- Sinal de vivo --------------------------------------------------- */
.ca-pulso{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--up);animation:ca-pulso 2.4s infinite}
@keyframes ca-pulso{
  0%{box-shadow:0 0 0 0 rgba(47,245,168,.6)}
  70%{box-shadow:0 0 0 10px rgba(47,245,168,0)}
  100%{box-shadow:0 0 0 0 rgba(47,245,168,0)}
}

/* ---- A frase que se digita sozinha ----------------------------------- */
.ca-cursor{animation:ca-cintila 1s steps(2,start) infinite}
@keyframes ca-cintila{to{visibility:hidden}}

/* ---- O radar do hero ------------------------------------------------- */
/* O giro e a respiração do núcleo NÃO ficam aqui: são feitos por
   animateTransform/animate dentro do próprio SVG (ver public/index.php).
   Rotação de elemento SVG por CSS depende de transform-box e
   transform-origin, que navegadores resolvem de formas diferentes — o radar
   ficava parado dependendo de onde a página era aberta. No SVG o centro do
   giro vai escrito no atributo e não depende de nada disso.
   Regra: nunca declarar transform por CSS nesses elementos, porque o CSS
   vence o atributo e desligaria o giro de novo. */

/* o contorno se desenha ao carregar */
.ca-desenha{stroke-dasharray:var(--traco);stroke-dashoffset:var(--traco);animation:ca-desenha 2.4s ease-out .25s forwards}
@keyframes ca-desenha{to{stroke-dashoffset:0}}

/* cada ativo acende quando o feixe passa */
.ca-no{animation:ca-no 4.6s linear infinite}
@keyframes ca-no{
  0%,100%{opacity:.22}
  6%{opacity:1}
  30%{opacity:.22}
}

.ca-ficha{animation:ca-flutua 6.5s ease-in-out infinite}
@keyframes ca-flutua{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-11px)}
}
.ca-f1{animation-delay:-.8s}
.ca-f2{animation-delay:-3.1s}
.ca-f3{animation-delay:-5s}

/* ---- Brilho que acompanha o cursor ----------------------------------- */
/* O --mx/--my vem do JS; sem ele o brilho fica no meio do topo.
   Sem overflow:hidden de propósito: o trilho da operação (.track .entry)
   sai da caixa e seria cortado. */
.opp,.kpis div,.plan,.ledger .item,.card{position:relative}
.opp::before,.kpis div::before,.plan::before,.ledger .item::before{
  content:"";position:absolute;inset:0;opacity:0;pointer-events:none;border-radius:inherit;
  transition:opacity .22s ease;
  background:radial-gradient(18rem 11rem at var(--mx,50%) var(--my,0%),rgba(77,232,255,.15),transparent 70%)}
.opp:hover::before,.kpis div:hover::before,.plan:hover::before,.ledger .item:hover::before{opacity:1}
.opp>*,.kpis div>*,.plan>*{position:relative;z-index:1}

/* ---- Aparecer ao rolar ----------------------------------------------- */
/* As classes entram pelo JS, nunca pelo HTML: sem JS nada fica escondido. */
.ca-revela{opacity:0;transform:translateY(18px);transition:opacity .55s ease,transform .55s ease}
.ca-revela.ca-visivel{opacity:1;transform:none}

/* ---- O gráfico entra em cena ----------------------------------------- */
.ca-surge{animation:ca-surge .5s ease-out both}
@keyframes ca-surge{from{opacity:0;transform:translateY(8px)}}

/* a varredura passa sobre o gráfico, como na tela de um radar */
.ca-lupa{position:relative;overflow:hidden;border-radius:var(--radius-sm)}
.ca-lupa::after{content:"";position:absolute;top:0;bottom:0;width:140px;pointer-events:none;z-index:2;
  background:linear-gradient(90deg,transparent,rgba(77,232,255,.08) 45%,rgba(77,232,255,.18) 50%,transparent);
  animation:ca-varre 7s ease-in-out infinite}
@keyframes ca-varre{
  0%{transform:translateX(-160px);opacity:0}
  10%,90%{opacity:.9}
  100%{transform:translateX(calc(100% + 1200px));opacity:0}
}

/* ---- Barra de leitura e voltar ao topo ------------------------------- */
/* Criadas pelo JS: as páginas só precisam do <link> e do <script>. */
.ca-barra{position:fixed;top:0;left:0;height:3px;width:0;z-index:1100;pointer-events:none;
  background:linear-gradient(90deg,var(--blue),var(--violet) 55%,var(--up));
  box-shadow:0 0 12px rgba(77,232,255,.55)}
.ca-topo{position:fixed;right:22px;bottom:22px;z-index:1000;width:46px;height:46px;display:grid;place-items:center;
  font-size:1.05rem;cursor:pointer;color:var(--blue);background:rgba(9,12,24,.9);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border:1px solid var(--brd);border-radius:50%;opacity:0;visibility:hidden;transform:translateY(14px);
  transition:opacity .25s ease,transform .25s ease,visibility .25s,border-color .2s}
.ca-topo.ca-visivel{opacity:1;visibility:visible;transform:none}
.ca-topo:hover{border-color:var(--brd-hi);transform:translateY(-3px);box-shadow:0 0 0 1px rgba(77,232,255,.25)}
/* no painel o rodapé já é a barra de atalhos: o botão sobe para não cobrir */
@media(max-width:860px){.ca-topo{bottom:72px}}

/* ---- Quem prefere a página parada ------------------------------------ */
/* ---- Parar o movimento ----------------------------------------------- */
/* Duas situações diferentes, e por isso dois blocos:

   1. o visitante apertou "Parar movimento" (html[data-mov="off"]) — vale
      sempre, tenha ele preferência de sistema ou não;
   2. o JS não rodou (nenhum data-mov no html) e o sistema pede página
      parada — aí a preferência é respeitada, como deve ser sem o botão.

   Com o JS rodando o movimento nasce ligado: a exigência de acessibilidade
   é existir um jeito de pausar, e ele existe no botão. */
html[data-mov="off"] body::before,
html[data-mov="off"] body::after,
html[data-mov="off"] .ca-pulso,
html[data-mov="off"] .ca-lupa::after,
html[data-mov="off"] .ca-surge,
html[data-mov="off"] .ca-cursor,
html[data-mov="off"] .ca-desenha,
html[data-mov="off"] .ca-no,
html[data-mov="off"] .ca-ficha,
html[data-mov="off"] .tape .row{animation:none!important}
html[data-mov="off"] .ca-desenha{stroke-dashoffset:0}
html[data-mov="off"] .ca-revela{opacity:1;transform:none;transition:none}
html[data-mov="off"] .ca-topo{transition:none}
html[data-mov="off"] .opp::before,
html[data-mov="off"] .kpis div::before,
html[data-mov="off"] .plan::before,
html[data-mov="off"] .ledger .item::before{transition:none}

@media(prefers-reduced-motion:reduce){
  html:not([data-mov]) body::before,
  html:not([data-mov]) body::after,
  html:not([data-mov]) .ca-pulso,
  html:not([data-mov]) .ca-lupa::after,
  html:not([data-mov]) .ca-surge,
  html:not([data-mov]) .ca-cursor,
  html:not([data-mov]) .ca-desenha,
  html:not([data-mov]) .ca-no,
  html:not([data-mov]) .ca-ficha,
  html:not([data-mov]) .tape .row{animation:none!important}
  html:not([data-mov]) .ca-desenha{stroke-dashoffset:0}
  html:not([data-mov]) .ca-revela{opacity:1;transform:none;transition:none}
}

/* ---- Botão de parar / ativar o movimento ----------------------------- */
/* Fica disponível para qualquer visitante, porque é ele que cumpre a regra de
   poder pausar conteúdo em movimento. O padrão é ligado. */
.ca-mov{position:fixed;left:22px;bottom:22px;z-index:1000;display:inline-flex;align-items:center;gap:9px;
  padding:10px 16px;font:600 .78rem var(--font);letter-spacing:.6px;cursor:pointer;
  color:var(--blue);background:rgba(9,12,24,.92);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border:1px solid var(--brd);border-radius:99px;box-shadow:var(--shadow)}
.ca-mov:hover{border-color:var(--brd-hi);color:#fff}
.ca-mov svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
@media(max-width:860px){.ca-mov{left:12px;bottom:68px;padding:9px 13px;font-size:.72rem}}