/* =========================================================
   Tsoah — camada de animação

   Três coisas acontecem aqui:
     1. blocos entram com fade + subida curta conforme a página rola
     2. o diagrama do Eixo Integrador se desenha do centro para fora
     3. os números da seção Marcos sobem acompanhando o scroll (animations.js)

   O hover dos cards não mora aqui — ele é parte do componente e vive
   em style.css, junto com o resto do card.

   Nada nesta folha altera o layout em repouso: toda transição termina
   em transform:none, então a página final é exatamente a do Figma.
   ========================================================= */

html { scroll-behavior: smooth; }

/* ---------------------------------------------------------
   1. Entrada ao rolar
   Só age depois que o JS marca .anim-ready no <html>. Sem JS — ou com
   JS quebrado — nada fica escondido: a página aparece inteira e estática.
   --------------------------------------------------------- */
.anim-ready [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity .7s cubic-bezier(.22, .61, .36, 1),
    transform .7s cubic-bezier(.22, .61, .36, 1);
  transition-delay: calc(var(--i, 0) * 80ms);
}

.anim-ready [data-reveal].is-in {
  opacity: 1;
  transform: none;
}

/* A ilustração entra com um movimento um pouco mais longo.
   Os 45% do Figma não moram mais aqui: agora vivem dentro das máscaras
   (traço .base) e no grupo do eixo, para que o brilho possa passar dos 45%
   sem clarear a ilustração inteira. */
.anim-ready .frase-art[data-reveal] {
  transform: translateY(18px) scale(.96);
  transition-duration: 1.1s;
}

/* O diagrama é só o gatilho: quem anima são as peças dentro dele.
   O transform dele não é decorativo — é a escala que faz o desenho de
   752px caber na seção —, então aqui ela é repetida em vez de zerada. */
.anim-ready .dia[data-reveal] {
  opacity: 1;
  transform: scale(var(--dia-escala));
  transition: none;
}

/* ---------------------------------------------------------
   2. Diagrama do Eixo Integrador se desenhando
   Os anéis são concêntricos, então escalar cada um pelo próprio
   centro equivale a escalar a partir do centro do diagrama.
   --------------------------------------------------------- */
.anim-ready .dia :is(.d-ring, .d-ray, .d-node, .d-label, .d-core) {
  opacity: 0;
  transition:
    opacity .8s ease,
    transform .9s cubic-bezier(.22, .61, .36, 1);
  transition-delay: calc(var(--i, 0) * 70ms);
}

/* anéis: crescem do centro */
.anim-ready .dia .d-ring {
  transform: scale(.88);
  transform-origin: center;
}

/* raios: a linha se estende a partir do próprio meio */
.anim-ready .dia .d-ray {
  transform: scaleY(0);
  transform-origin: 50% 50%;
}

/* nós: aparecem com um leve pop */
.anim-ready .dia .d-node {
  transform: scale(.4);
  transform-origin: center;
  transition-timing-function: cubic-bezier(.34, 1.4, .64, 1);
}

/* rótulos e núcleo: só fade + deslocamento curto.
   Quem gira é a caixa (.dia-label); o texto (.d-label) fica livre para
   fazer a entrada sem brigar pelo mesmo transform. */
.anim-ready .dia .d-label { transform: translateY(8px); }
.anim-ready .dia .d-core {
  transform: scale(.94);
  transform-origin: center;
}

.anim-ready .dia.is-in :is(.d-ring, .d-ray, .d-node, .d-label, .d-core) {
  opacity: 1;
  transform: none;
}

/* ---------------------------------------------------------
   2a. Órbita do diagrama

   O anel colorido, os cinco nós e os cinco nomes formam um grupo só
   (.dia-orbita) que gira em torno do centro. Cada nome recebe
   `dia-contragirar` — mesma duração, sentido oposto — então ele percorre
   a órbita mas o texto continua na horizontal o tempo todo.

   As duas animações partem juntas porque só começam a correr quando o
   diagrama entra na tela: até lá ficam pausadas no quadro zero, e uma
   animação pausada não acumula tempo. É isso que mantém nome e nó
   alinhados para sempre, sem depender de JS.
   --------------------------------------------------------- */

@keyframes dia-girar      { to { transform: rotate(360deg); } }
@keyframes dia-contragirar { to { transform: rotate(-360deg); } }

.anim-ready .dia.is-in .dia-orbita,
.anim-ready .dia.is-in .dia-label { animation-play-state: running; }

/* O núcleo respira: uma escala curta mais um halo que se abre e some. */
@keyframes dia-pulsar {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.03); }
}

@keyframes dia-halo {
  0%   { transform: scale(.94); opacity: 0; }
  28%  { transform: scale(1);   opacity: 1; }
  78%  { transform: scale(1.1); opacity: 0; }
  100% { transform: scale(.94); opacity: 0; }
}

.anim-ready .dia.is-in :is(.dia-pulso, .dia-halo) { animation-play-state: running; }

/* fora da tela não há o que ver — animations.js liga e desliga.
   A classe precisa vir junto com .is-in para ganhar da regra acima. */
.anim-ready .dia.is-in.orb-pausada :is(.dia-orbita, .dia-label, .dia-pulso, .dia-halo) {
  animation-play-state: paused;
}

/* ---------------------------------------------------------
   2b. Ilustração de órbitas

   Cada linha circular é revelada por uma máscara. Dentro dela há dois
   papéis, ambos traços brancos — a máscara lê luminância, então 45% de
   branco mostra a linha na opacidade do Figma e 100% a mostra em realce.

   .base   a curva inteira a 45%. Desenhada uma vez, quando a seção entra
           na tela (self-drawing SVG: dasharray + dashoffset).
   .glow   três segmentos em cascata que correm pela curva em loop infinito
           e clareiam o trecho por onde passam — a impressão de órbita.
           Eles nunca apagam a linha: só a realçam.

   O ciclo fecha sozinho porque o padrão do tracejado tem exatamente o
   comprimento do caminho: deslocar um --len inteiro volta ao ponto de
   partida, sem emenda visível.
   --------------------------------------------------------- */

@keyframes orbitar {
  to { stroke-dashoffset: calc(var(--len) * -1); }
}

/* a linha, desenhada uma vez na entrada */
.anim-ready .frase-art .base {
  stroke-dasharray: var(--len);
  stroke-dashoffset: var(--len);
  transition: stroke-dashoffset 1.9s cubic-bezier(.36, .06, .2, 1);
  transition-delay: calc(var(--d, 0) * 1ms);
}
.anim-ready .frase-art.is-in .base {
  stroke-dashoffset: var(--off-end, 0px);
}

/* o brilho que orbita.
   --seg    tamanho do segmento
   --fase   desloca cada segmento da cascata dentro do anterior, via
            animation-delay negativo — o "nariz" fica mais forte
   --dur    volta completa; cada órbita tem a sua, para não pulsarem juntas */
.anim-ready .frase-art .glow {
  stroke-dasharray: var(--seg) calc(var(--len) - var(--seg));
  stroke-opacity: 0;
  animation: orbitar var(--dur, 11s) linear infinite;
  animation-delay: calc(var(--fase, 0) * var(--dur, 11s) * -1);
  transition: stroke-opacity .9s ease;
  transition-delay: 2.3s;   /* entra depois que a linha terminou de nascer */
}
.anim-ready .frase-art.is-in .glow {
  stroke-opacity: var(--op, .3);
}

/* fora da tela não há o que ver — animations.js liga e desliga */
.frase-art.orb-pausada .glow { animation-play-state: paused; }

/* ---------------------------------------------------------
   3. Acessibilidade
   Quem pede menos movimento no sistema recebe a página estática,
   com os números já nos valores finais (animations.js cuida disso).
   --------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .anim-ready [data-reveal],
  .anim-ready .dia :is(.d-ring, .d-ray, .d-node, .d-label, .d-core) {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  /* o transform do .dia é a escala que faz o desenho caber, não enfeite */
  .anim-ready .dia[data-reveal] {
    transform: scale(var(--dia-escala)) !important;
  }
  .anim-ready .frase-art .base {
    stroke-dashoffset: var(--off-end, 0px) !important;
    transition: none !important;
  }
  .anim-ready .frase-art .glow { animation: none !important; stroke-opacity: 0 !important; }

  /* o diagrama fica parado, do jeito que está no Figma */
  .dia-orbita,
  .dia-label,
  .dia-pulso,
  .dia-halo { animation: none !important; }
}