/* ============================================================
   COXTON · regra do movimento · check-up de 06/10
   Carregar em todas as páginas DEPOIS do CSS da casa.
   Só acrescenta; não apaga nada do CSS que já existe.
   ============================================================ */

/* ---------- 1. Os tempos e as curvas da casa ----------
   Quatro durações e três curvas. Toda transição nova usa estes nomes;
   as antigas migram aos poucos (tabela no laudo). */
:root{
  --cx-mov-1:160ms;  /* cor, borda, sublinhado */
  --cx-mov-2:240ms;  /* botões, chips, setas, legendas, interruptor */
  --cx-mov-3:400ms;  /* menu, "Entender esse caminho", pílula, troca de etapa */
  --cx-mov-4:700ms;  /* entrada de seção, cascata, traço de tinta */
  --cx-curva-saida:cubic-bezier(.22,1,.36,1);    /* chega e assenta: a curva da casa */
  --cx-curva-padrao:cubic-bezier(.2,0,0,1);      /* muda de estado */
  --cx-curva-respira:cubic-bezier(.37,0,.63,1);  /* vai e volta (laços) */
}

/* ---------- 2. "Entender esse caminho": o + vira × ----------
   Havia duas regras de "aberto" somando 45° + 45° (o + aberto
   continuava +) e só metade do giro tinha transição. Fica uma: o giro
   (rotate) que já acompanha o fechar (data-fechando). */
html .coxton-moldes .cx-detail summary::after{
  transition:rotate var(--cx-mov-3) var(--cx-curva-saida),background-color .3s,border-color .3s;
}
html .coxton-moldes .cx-detail[open] summary::after{transform:none}

/* ---------- 3. Capa dos cartões: sem "respiração" ----------
   A capa crescia 1,6% num laço de 9 s, por baixo do parallax (que já
   mexe a mesma imagem na rolagem). Ninguém via, o processador pagava. */
html .coxton-moldes .cx-cover{animation:none}

/* ---------- 4. O caminho: a faísca percorre uma vez ----------
   Antes ela subia e descia para sempre (e animava `top`). Agora, quando
   o cartão entra, ela desce o caminho uma vez e fica no destino, apontando
   para "Entender esse caminho". */
html .coxton-moldes .cx-path-spark{animation:none;top:14%;opacity:.35}
html.cx-cascata .coxton-moldes.cx-grid--paths > [data-visto="true"] .cx-path-spark{
  animation:cx-path-percorre 2.6s var(--cx-curva-saida) .5s 1 both;
}
@keyframes cx-path-percorre{
  0%{top:14%;opacity:.35}
  15%{opacity:.9}
  100%{top:65%;opacity:.7}
}

/* ---------- 5. O funil de /anuncios/: uma passada, estações acesas ----------
   A faísca cruza o trilho uma vez quando o funil aparece (a classe vem do
   coxton-movimento.js) e cada estação acende quando ela chega, e fica. */
html .funil .funil__n{animation:none}
html .funil .funil__faisca::before{animation:none;transform:translateX(-72px)}
html .funil.funil--em-cena .funil__faisca::before{animation:funil-passa 6s linear 1 both}
html .funil.funil--em-cena .funil__n{animation:funil-fica-aceso .6s var(--cx-curva-saida) both;animation-delay:calc(var(--i, 0) * 2s)}
@keyframes funil-passa{0%{transform:translateX(-72px)}100%{transform:translateX(100%)}}
@keyframes funil-fica-aceso{
  from{border-color:var(--linha-2);background:#fff}
  to{border-color:var(--azul);background:var(--azul-fundo)}
}
@media (max-width:860px){
  html .funil .funil__faisca::before{transform:translateY(-72px)}
  html .funil.funil--em-cena .funil__faisca::before{animation-name:funil-desce-uma}
  @keyframes funil-desce-uma{0%{transform:translateY(-72px)}100%{transform:translateY(100%)}}
}

/* ---------- 6. A rede da home: dois movimentos em vez de cinco ----------
   Ficam a volta do cometa e as ferramentas acendendo uma a uma (é isso que
   conta "tudo conectado") e a luz do centro. Saem a boia dos nós e o pisca
   dos brilhos. O tempo de tocar (uma volta de 12 s) vem do JS. */
html .rede .rede__no{animation:none}
html .rede .rede__brilho{animation:none;opacity:.55}

/* ---------- 7. Parado, com sentido ----------
   Com "menos movimento" (do aparelho ou da chave) cada peça nova fica no
   quadro final: faísca no destino, estações acesas. */
@media (prefers-reduced-motion:reduce){
  html .coxton-moldes .cx-path-spark{animation:none!important;top:65%;opacity:.7}
  html .funil .funil__n{animation:none!important;border-color:var(--azul);background:var(--azul-fundo)}
}
html[data-movimento="menos"] .coxton-moldes .cx-path-spark{animation:none!important;top:65%;opacity:.7}
html[data-movimento="menos"] .funil .funil__n{animation:none!important;border-color:var(--azul);background:var(--azul-fundo)}
html[data-movimento="menos"] .funil .funil__faisca{display:none}