/* Movimento: entrada, deslocamento, escala e brilho usam só transform e opacity, cada efeito com utilidade de UX
   (02-wireframe, seção 7). Estados de hover, foco e seleção trocam apenas cor (color, background-color, border-color)
   em 0,14 a 0,2 s. Nenhuma sombra é animada: o glow liga e desliga sem transição. Única transição de layout: o
   grid-template-rows do FAQ. Tudo respeita prefers-reduced-motion no bloco final. */

@keyframes varredura {
  from {
    transform: translateX(-110%);
  }

  to {
    transform: translateX(110%);
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes aviso-hero {
  from {
    opacity: 0;
    transform: translate3d(0, -8px, 0);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes aviso-demo {
  from {
    opacity: 0;
    transform: translate3d(0, -16px, 0);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes anel {
  0% {
    opacity: 0.9;
    transform: scale(0.8);
  }

  100% {
    opacity: 0;
    transform: scale(1.8);
  }
}

@keyframes destaque {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@keyframes pop {
  from {
    opacity: 0;
    transform: scale(0.6);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes percorre {
  0% {
    opacity: 1;
    transform: translateX(0);
  }

  85% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    /* .fio mede 40px desde a migração para 3 painéis (era 72px com só 2): percorre até a ponta, sobrando a largura
       do próprio ponto (7px, ver .fio span em demo-layout.css) — 40 - 7 = 33px. */
    transform: translateX(33px);
  }
}

/* A camada respira de 0,6 a 1 (a cor do ponto já é a mais clara que o contraste permite, ver .particulas). */
@keyframes deriva {
  from {
    opacity: 0.6;
    transform: translate3d(0, 0, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, -22px, 0);
  }
}

/* ---------- Hero: cartão de aviso, agenda e bolinha azul, uma vez ---------- */
.hero-mock__aviso {
  animation: aviso-hero 0.42s var(--ease) 0.9s both;
}

/* Só opacity, depois do cartão. Nenhuma das duas peças é candidata a LCP: a foto continua a única. */
.espia {
  animation: fade-in 0.4s ease-out 1.1s both;
}

.espia__card--novo .bolinha {
  position: relative;
}

.espia__card--novo .bolinha::after {
  content: "";
  position: absolute;
  inset: -3px;
  border: 1.5px solid var(--blue-hi);
  border-radius: 50%;
  opacity: 0;
  animation: anel 1.2s ease-out 1.1s 1 both;
}

/* ---------- Demonstração ---------- */
.passo:not([hidden]) {
  animation: fade-in 0.16s ease-out;
}

.painel:not([data-inativo]) {
  animation: fade-in 0.18s ease-out;
}

.sucesso__anel {
  animation: pop 0.3s var(--ease) both;
}

.demo-cta {
  animation: fade-in 0.3s ease-out;
}

.push-card.is-entrando {
  animation: aviso-demo 0.42s var(--ease) both;
}

.push-card.is-entrando .push-card__icone::after {
  animation: anel 1.2s ease-out 0.1s 1 both;
}

.ag-card.is-nova {
  animation: fade-in 0.3s ease-out 0.35s both;
}

.ag-card.is-nova::after {
  animation: destaque 1.2s ease-out 0.35s 1 both;
}

.fio.is-ativo span {
  animation: percorre 0.7s var(--ease-io) 1 both;
}

/* ---------- Partículas azuis (CSS puro, 0 JS, 0 DOM extra): só no hero e no CTA final ---------- */
.particulas {
  position: absolute;
  inset: 0;
  overflow: hidden;
  overflow: clip;
  pointer-events: none;
}

/* Pontos azuis: duas camadas, cada uma um TILE SVG (data URI) que se repete. Mais pontos e com halo que antes (13 por par de
   tiles repetidos, contra 3 a 4 visíveis em 1440 px). Por que SVG e não radial-gradient em CSS: a primeira versão desta
   rodada usava gradientes com background-size (tiles de gradientes) e, animada, custava 50 ms por quadro no Firefox e 162 ms no
   WebKit do Playwright (medido; antes da rodada: 6 e 61 ms). O tile SVG é rasterizado uma vez e só é movido: 6 ms no Firefox e
   39 ms no WebKit, o mesmo que sem partículas no Firefox.

   O que limita o brilho é o contraste do texto vizinho: texto azul (o H1 "sozinho", o eyebrow, os links) é MAIS CLARO que o
   fundo, então um ponto claro atrás dele derruba a razão local (medido: ponto de alpha 0,55 = 1,9:1 atrás do H1). Para o texto
   azul pequeno (--blue-hi, luminância 0,354) manter 4,5:1 o pixel atrás dele tem de ficar abaixo de 0,0398. Os núcleos são COR
   OPACA #15336a (luminância 0,0357: o azul da marca a 38% sobre o fundo, 4,72:1 contra --blue-hi) ou #112958: mais azuis e
   mais saturados que um azul-claro translúcido de mesma luminância, então se enxergam melhor, e dois pontos que se cruzam não
   somam brilho. Halo: --blue (#2f7bff) a 14 a 18%. As cores estão dentro do SVG (uma data URI não lê variável de CSS).
   O wireframe propunha ponto claro com um véu (máscara) sobre o texto, mas o texto do hero e do CTA final cobre quase toda a
   área onde as partículas aparecem (a foto e o calendário tampam o resto): o véu não abriria espaço.
   Só transform e opacity animam. */
.particulas::before,
.particulas::after {
  content: "";
  position: absolute;
  inset: -40px 0;
  animation: deriva 11s var(--ease-io) infinite alternate;
  will-change: transform, opacity;
}

/* Camada A: tile de 640 x 520 px, 7 pontos (2 grandes com halo, 3 médios, 2 pequenos) */
.particulas::before {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='520'%3E%3Cdefs%3E%3CradialGradient id='g'%3E%3Cstop offset='.25' stop-color='%2315336a'/%3E%3Cstop offset='.27' stop-color='%232f7bff' stop-opacity='.18'/%3E%3Cstop offset='1' stop-color='%232f7bff' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='m'%3E%3Cstop offset='.25' stop-color='%2315336a'/%3E%3Cstop offset='.27' stop-color='%232f7bff' stop-opacity='.14'/%3E%3Cstop offset='1' stop-color='%232f7bff' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx='58' cy='109' r='12' fill='url(%23g)'/%3E%3Ccircle cx='403' cy='62' r='12' fill='url(%23g)'/%3E%3Ccircle cx='198' cy='244' r='8' fill='url(%23m)'/%3E%3Ccircle cx='538' cy='203' r='8' fill='url(%23m)'/%3E%3Ccircle cx='301' cy='432' r='8' fill='url(%23m)'/%3E%3Ccircle cx='589' cy='458' r='1.5' fill='%23112958'/%3E%3Ccircle cx='115' cy='395' r='1.5' fill='%23112958'/%3E%3C/svg%3E") 0 0 / 640px 520px repeat;
}

/* Camada B: tile de 430 x 390 px, 6 pontos, deriva contrária */
.particulas::after {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='430' height='390'%3E%3Cdefs%3E%3CradialGradient id='g'%3E%3Cstop offset='.25' stop-color='%2315336a'/%3E%3Cstop offset='.27' stop-color='%232f7bff' stop-opacity='.18'/%3E%3Cstop offset='1' stop-color='%232f7bff' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='m'%3E%3Cstop offset='.25' stop-color='%2315336a'/%3E%3Cstop offset='.27' stop-color='%232f7bff' stop-opacity='.14'/%3E%3Cstop offset='1' stop-color='%232f7bff' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx='60' cy='242' r='12' fill='url(%23g)'/%3E%3Ccircle cx='305' cy='105' r='8' fill='url(%23m)'/%3E%3Ccircle cx='168' cy='55' r='8' fill='url(%23m)'/%3E%3Ccircle cx='378' cy='289' r='8' fill='url(%23m)'/%3E%3Ccircle cx='224' cy='355' r='1.5' fill='%23112958'/%3E%3Ccircle cx='21' cy='35' r='1.5' fill='%23112958'/%3E%3C/svg%3E") 0 0 / 430px 390px repeat;
  animation-duration: 14s;
  animation-direction: alternate-reverse;
}

/* reveal.js pausa as partículas quando a seção sai da tela */
.particulas.pausada::before,
.particulas.pausada::after {
  animation-play-state: paused;
}

/* ---------- prefers-reduced-motion: tudo vira estado final, sem varredura, fio, anel ou deriva.
   O reset global com !important é o padrão do wireframe (seção 7) e vale só neste bloco. ---------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }

  /* Sem movimento o ponto precisa se sustentar parado: camada em 1 (era 0,4) */
  .particulas::before,
  .particulas::after {
    animation: none;
    opacity: 1;
  }

  .hero-mock__aviso,
  .espia {
    animation: none;
  }

  .btn--varre::after,
  .fio.is-ativo span,
  .ag-card.is-nova::after,
  .push-card.is-entrando .push-card__icone::after,
  .espia__card--novo .bolinha::after {
    animation: none;
  }
}