/* ═════════ Movimento: peças de animação do sistema ═════════
 *
 * Tudo aqui é "suspensão de carro": entra firme, assenta sem quique, e a luz é o único brilho.
 * Regras:
 *  - Conteúdo nunca fica escondido sem JS: o que some antes de entrar só some com :root.movimento-pronto,
 *    classe que js/movimento.js (ou o hook useRevelar) coloca no <html>.
 *  - Movimento reduzido (sistema ou data-movimento="reduzido") desliga deslocamento, desfoque e laços;
 *    o conteúdo aparece direto e a luz fica parada.
 *  - Um laço infinito por tela, no máximo (aro de luz OU esteira OU cometa), e nunca atrás de texto longo.
 */

@property --aro-angulo {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

/* ── revelar ao rolar ──
 * <section data-revelar>…</section>            sobe 18px e aparece
 * data-revelar="desfoque"                       sobe e sai do desfoque (títulos grandes)
 * data-revelar="escala"                          assenta de 0,97 (cartões, imagens)
 * data-revelar="luz"                             linha de luz que se desenha da esquerda (.luz-linha, .divisor-luz)
 * style="--i: 2"                                 posição na cascata (atraso = --i × --cascata)
 */
[data-revelar] {
  transition:
    opacity var(--t-5) var(--saida),
    transform var(--t-5) var(--saida),
    filter var(--t-5) var(--saida);
  transition-delay: calc(var(--i, 0) * var(--cascata));
}
:root.movimento-pronto [data-revelar]:not([data-visivel]) { opacity: 0; transform: translateY(18px); }
:root.movimento-pronto [data-revelar='desfoque']:not([data-visivel]) { filter: blur(8px); transform: translateY(14px); }
:root.movimento-pronto [data-revelar='escala']:not([data-visivel]) { transform: scale(0.97); }
:root.movimento-pronto [data-revelar='luz']:not([data-visivel]) { opacity: 0; transform: scaleX(0); }
[data-revelar='luz'] { transform-origin: left; transition-duration: 1100ms; }

/* ── cascata: filhos entram um depois do outro, na primeira pintura ── */
.cascata > * { animation: ui-sobe var(--t-4) var(--mola-firme) both; animation-delay: calc(var(--i, 0) * var(--cascata)); }
.cascata > :nth-child(2) { --i: 1; }
.cascata > :nth-child(3) { --i: 2; }
.cascata > :nth-child(4) { --i: 3; }
.cascata > :nth-child(5) { --i: 4; }
.cascata > :nth-child(6) { --i: 5; }
.cascata > :nth-child(7) { --i: 6; }
.cascata > :nth-child(8) { --i: 7; }
.cascata > :nth-child(n + 9) { --i: 8; }

/* ── frase que se revela por palavra (hero, título de seção) ──
 * js/movimento.js → dividirPalavras(el) envolve cada palavra em <span style="--i:n">.
 */
.frase-revela .palavra { display: inline-block; white-space: pre; }
:root.movimento-pronto .frase-revela:not([data-visivel]) .palavra { opacity: 0; transform: translateY(0.35em); filter: blur(6px); }
.frase-revela .palavra {
  transition: opacity 640ms var(--saida), transform 640ms var(--saida), filter 640ms var(--saida);
  transition-delay: calc(var(--i, 0) * 45ms + var(--atraso, 0ms));
}

/* ── palavra que acende (versão com tema da .entrar-chave) ──
 * <span class="palavra-luz" data-ativo>estoque</span>; js/movimento.js → ciclarPalavras(lista)
 */
.palavra-luz { position: relative; display: inline-block; color: var(--tx-2); transition: color var(--t-4) var(--saida); }
.palavra-luz::after {
  content: '';
  position: absolute;
  left: 0.04em;
  right: 0.04em;
  bottom: -0.04em;
  height: 2px;
  border-radius: 2px;
  background: var(--nucleo);
  box-shadow: 0 0 10px var(--brilho);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 520ms var(--saida);
}
.palavra-luz[data-ativo] { color: var(--tx); }
.palavra-luz[data-ativo]::after { transform: scaleX(1); }

/* ── selo de luz: rótulo de seção com o traço luminoso na frente (versão com tema do .entrar-selo) ── */
.selo-luz {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--f-display);
  font-weight: 600;
  font-size: var(--fs-11);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--tx-3);
}
.selo-luz::before {
  content: '';
  width: 36px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--nucleo));
  box-shadow: 0 0 8px var(--brilho);
  transform-origin: left;
  flex: none;
}
[data-visivel] > .selo-luz::before,
.selo-luz[data-visivel]::before { animation: mov-acende 900ms var(--saida) both; }

/* ── divisor de luz: fio com o centro aceso, desenha ao entrar (use com data-revelar="luz") ── */
.divisor-luz {
  display: block;
  height: 1px;
  border: 0;
  margin: 0;
  background: linear-gradient(90deg, transparent, var(--ln-2) 18%, var(--nucleo) 50%, var(--ln-2) 82%, transparent);
  box-shadow: 0 0 10px var(--brilho);
}

/* ── aro de luz: um ponto de luz dá a volta na borda (plano recomendado, tarefa em andamento) ──
 * Só um por tela. Funciona em qualquer caixa com border-radius (usa ::after: combina com .ui-cartao--destaque,
 * não com .ui-cartao--interativo nem .varredura, que também usam ::after).
 */
.aro-luz { position: relative; isolation: isolate; }
.aro-luz::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  padding: 1.5px;
  pointer-events: none;
  background: conic-gradient(from var(--aro-angulo), transparent 0 62%, var(--brilho) 76%, var(--nucleo) 86%, transparent 92%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  animation: mov-aro 5.2s linear infinite;
}
@keyframes mov-aro { to { --aro-angulo: 360deg; } }

/* ── varredura: reflexo na diagonal da marca (1:2, 116,57°) que passa uma vez no hover ──
 * Em botão primário, cartão de destaque, imagem de veículo. Nunca em texto corrido.
 */
.varredura { position: relative; overflow: hidden; isolation: isolate; }
.varredura::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(116.57deg, transparent 38%, rgba(255, 255, 255, 0.28) 48%, rgba(255, 255, 255, 0.06) 56%, transparent 64%);
  transform: translateX(-110%);
}
.varredura:hover::after,
.varredura:focus-visible::after,
.varredura[data-varrer]::after { animation: mov-varre 900ms var(--saida) both; }
@keyframes mov-varre { from { transform: translateX(-110%); } to { transform: translateX(110%); } }

/* ── progresso de rolagem: linha de luz no topo da página (artigo, landing longa) ── */
.progresso-rolagem {
  position: fixed;
  z-index: var(--z-toast);
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  pointer-events: none;
  background: var(--nucleo);
  box-shadow: 0 0 8px var(--brilho);
  transform-origin: left;
  transform: scaleX(var(--progresso, 0));
}
@supports (animation-timeline: scroll()) {
  .progresso-rolagem { animation: mov-progresso linear both; animation-timeline: scroll(root); }
  @keyframes mov-progresso { from { transform: scaleX(0); } to { transform: scaleX(1); } }
}

/* ── esteira: faixa que corre devagar (marcas atendidas, integrações) ──
 * <div class="esteira"><div class="esteira-trilho"> itens… (a cópia leva data-copia e aria-hidden) </div></div>
 */
.esteira {
  overflow: hidden;
  -webkit-mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.esteira-trilho { display: flex; width: max-content; gap: 48px; animation: mov-esteira var(--duracao, 42s) linear infinite; }
.esteira:hover .esteira-trilho { animation-play-state: paused; }
@keyframes mov-esteira { to { transform: translateX(calc(-50% - 24px)); } }

/* ── pulso: onda que sai de uma luz de estado (site no ar, sincronizando) ── */
.pulso { position: relative; }
.pulso::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow: 0 0 0 0 currentColor;
  animation: mov-pulso 2.4s var(--saida) infinite;
}
@keyframes mov-pulso { 0% { box-shadow: 0 0 0 0 currentColor; opacity: 0.55; } 70%, 100% { box-shadow: 0 0 0 7px currentColor; opacity: 0; } }

/* ── número que conta (js/movimento.js → contarNumeros, ou useContagem) ── */
.contagem { font-variant-numeric: tabular-nums; }

@keyframes mov-acende { 0% { transform: scaleX(0); opacity: 0; } 15% { opacity: 1; } }

/* ── troca de página (View Transitions): saída curta, entrada sobe 8px ── */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: 160ms var(--saida) both mov-vt-sai; }
::view-transition-new(root) { animation: var(--t-3) var(--saida) both mov-vt-entra; }
@keyframes mov-vt-sai { to { opacity: 0; } }
@keyframes mov-vt-entra { from { opacity: 0; transform: translateY(8px); } }

/* ── toque: no celular não existe hover; a resposta é no :active ── */
@media (hover: none) {
  .varredura:active::after { animation: mov-varre 700ms var(--saida) both; }
}

/* ── movimento reduzido: tudo parado, tudo visível ── */
@media (prefers-reduced-motion: reduce) {
  [data-revelar],
  .frase-revela .palavra { opacity: 1 !important; transform: none !important; filter: none !important; }
  .aro-luz::after { animation: none; background: linear-gradient(var(--nucleo), var(--nucleo)); opacity: 0.35; }
  .esteira-trilho { animation: none; flex-wrap: wrap; width: auto; }
  .esteira-trilho > [data-copia] { display: none; }
  .esteira { -webkit-mask: none; mask: none; }
  .pulso::after { display: none; }
  ::view-transition-old(root),
  ::view-transition-new(root) { animation: none; }
}
:root[data-movimento='reduzido'] [data-revelar],
:root[data-movimento='reduzido'] .frase-revela .palavra { opacity: 1 !important; transform: none !important; filter: none !important; }
:root[data-movimento='reduzido'] .aro-luz::after { animation: none; background: linear-gradient(var(--nucleo), var(--nucleo)); opacity: 0.35; }
:root[data-movimento='reduzido'] .esteira-trilho { animation: none; flex-wrap: wrap; width: auto; }
:root[data-movimento='reduzido'] .esteira-trilho > [data-copia] { display: none; }
:root[data-movimento='reduzido'] .pulso::after { display: none; }