/* ============================================================================
   IDENTIDADE TPDPLAY - catalogo de efeitos
   Depende de tokens.css (usa --ciano, --azul, --violeta, --grad-marca...).

   Medidas herdadas da referencia (lps.accelera360.com.br/infraestrutura),
   medidas por dentro com web-grafia.js - nao chutadas.

   O BLOCO NO FIM DESLIGA TUDO em prefers-reduced-motion. Nao remova:
   parte do publico 45+ tem sensibilidade a movimento.
   ========================================================================= */

/* ---- 1. GLOW RADIAL (o "teto de catedral" da secao) -------------------
   O que faz a secao parecer iluminada por cima em vez de chapada.        */
.glow { position: relative; overflow: hidden; }
.glow::before {
  content: ""; position: absolute; top: -280px; left: 50%;
  transform: translateX(-50%);
  width: 1000px; height: 680px; pointer-events: none;
  background: radial-gradient(ellipse,
    rgba(0,138,212,.50), rgba(107,67,239,.22) 45%, transparent 66%);
  filter: blur(120px);
}

/* ---- 2. FADE-IN ESCALONADO (entrada do hero) -------------------------
   Cada peca entra com um atraso proprio. O escalonamento e o efeito.     */
.fade-in { opacity: 0; animation: tpd-fade .8s cubic-bezier(.6,.6,0,1) forwards; }
.delay-1 { animation-delay: .10s } .delay-2 { animation-delay: .22s }
.delay-3 { animation-delay: .34s } .delay-4 { animation-delay: .46s }
@keyframes tpd-fade { from { opacity: 0; transform: translateY(14px) } to { opacity: 1; transform: none } }

/* ARMADILHA PROVADA (21/08): um elemento com .fade-in E outra classe animada
   (.pill, .cta-pulso) some da tela. A segunda regra sobrescreve `animation`,
   o fade nunca roda, e o `opacity:0` do .fade-in fica preso. Sem erro nenhum:
   o elemento simplesmente nao existe pro usuario.
   A cura e declarar as DUAS animacoes juntas na combinacao das classes.       */
.fade-in.pill {
  animation: tpd-fade .8s cubic-bezier(.6,.6,0,1) forwards,
             tpd-shimmer 7s ease-in-out infinite;
}
.fade-in.cta-pulso {
  animation: tpd-fade .8s cubic-bezier(.6,.6,0,1) forwards,
             tpd-pulso 3.4s ease-in-out infinite;
}

/* ---- 3. REVEAL EM CASCATA (o 01 / 02 / 03 que "desce") ---------------
   O SEGREDO e o +0,07s por item. Sem o incremento nao ha cascata, ha um
   bloco piscando junto. JS: adicione .visivel quando entrar na viewport. */
.reveal {
  opacity: 0; transform: translateY(22px);
  transition: opacity .7s cubic-bezier(.6,.6,0,1), transform .7s cubic-bezier(.6,.6,0,1);
}
.reveal.visivel { opacity: 1; transform: none; }
.reveal:nth-child(1) { transition-delay: .00s } .reveal:nth-child(2) { transition-delay: .07s }
.reveal:nth-child(3) { transition-delay: .14s } .reveal:nth-child(4) { transition-delay: .21s }
.reveal:nth-child(5) { transition-delay: .28s } .reveal:nth-child(6) { transition-delay: .35s }


/* ============================================================================
   REACOES AO MOUSE - medidas na referencia com `inspecionar-reacoes.js`,
   nao olhadas em print (print e estado PARADO). O vocabulario dela e UM SO:
     . curva sempre cubic-bezier(.6,.6,0,1), em 0,3s
     . o elemento SOBE 2-3px
     . a borda ACENDE na cor da marca
     . a sombra CRESCE
     . e os irmaos entram com delay incremental de +0,07s
       -> o MESMO 0,07s da cascata de reveal. Um numero so na pagina inteira.
   Traduzido: aqui a borda acende no CIANO, nao no roxo deles.
   ⚠ DUAS EXCECOES, e as duas por decisao do HB: a tabela de planos (`.plano`,
   onde o azul e o estado parado e o roxo e a resposta ao gesto) e o card do
   BL-01 (`.bl-card`, 22/08: "da mesma forma que na tabela de planos"). As
   duas sobrescrevem por especificidade, no `blocos.css` - se voce achar que
   a linha roxa ali e um bug do ciano, nao e.
   ========================================================================= */
:root { --curva: cubic-bezier(.6,.6,0,1); --passo-irmao: .07s; }

.reage {
  border: 1px solid rgba(159,196,218,.14);
  transition: border-color .3s var(--curva), transform .3s var(--curva),
              box-shadow .3s var(--curva);
}
.reage:hover, .reage:focus-within {
  border-color: rgba(44,196,255,.55);
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(0,138,212,.20);
}
.reage:nth-child(2) { transition-delay: var(--passo-irmao) }
.reage:nth-child(3) { transition-delay: calc(var(--passo-irmao) * 2) }
.reage:nth-child(4) { transition-delay: calc(var(--passo-irmao) * 3) }
.reage:nth-child(5) { transition-delay: calc(var(--passo-irmao) * 4) }
.reage:nth-child(6) { transition-delay: calc(var(--passo-irmao) * 5) }

/* O CTA clareia, sobe e ganha sombra. NUNCA muda a cor do texto no hover:
   o contraste medido tem que valer parado E com o mouse em cima.           */
.cta { transition: filter .3s var(--curva), transform .3s var(--curva),
                   box-shadow .3s var(--curva); }
.cta:hover, .cta:focus-visible {
  filter: brightness(1.12); transform: translateY(-2px);
  box-shadow: 0 8px 26px rgba(44,196,255,.34);
}
.cta:active { transform: translateY(0); filter: brightness(1.04); }

/* Link de texto: sublinhado que cresce, sem empurrar o layout. */
.link-marca {
  color: var(--ciano); text-decoration: none;
  background-image: linear-gradient(var(--ciano), var(--ciano));
  background-size: 0% 2px; background-repeat: no-repeat; background-position: 0 100%;
  transition: background-size .3s var(--curva);
}
.link-marca:hover, .link-marca:focus-visible { background-size: 100% 2px; }

/* ---- 4. PULSO DO CTA (anel que respira, 3,4s) ------------------------ */
.cta-pulso { animation: tpd-pulso 3.4s ease-in-out infinite; }
@keyframes tpd-pulso {
  0%, 100% { box-shadow: 0 0 0 0 rgba(44,196,255,.42) }
  50%      { box-shadow: 0 0 0 18px rgba(44,196,255,0) }
}

/* ---- 6. A CARGA DO DESTAQUE (1,15s, UMA vez, quando a secao entra) ---
   A palavra do .destaque nasce BRANCA (igual ao resto do titulo) e a cor
   entra deslizando da direita pra esquerda: ela 'carrega'. Nao repete,
   nao pisca, nao chama de novo - e a entrada da secao, nao um loop.

   O GUARDA `.js-blocos` existe por causa de uma armadilha real: se o
   estado inicial (branco) fosse global, qualquer pagina SEM o blocos.js
   deixaria a palavra presa no branco pra sempre - o destaque sumia e
   ninguem via erro nenhum. Entao quem POE o estado inicial e o proprio
   JS que sabe desfaze-lo: sem ele, a palavra ja nasce colorida.        */
.js-blocos .destaque {
  background-position: 100% 0;
  transition: background-position 1.15s var(--curva);
}
.js-blocos .destaque.visivel { background-position: 0 0; }

/* ---- 5. SHIMMER DO PILL (7s, lento de proposito) --------------------- */
/* ARMADILHA PROVADA (21/08): a versao anterior tinha texto #CDEBFA e um
   shimmer de .18 de alfa. No PICO do shimmer o fundo do proprio pill clareia
   e o contraste do texto cai pra 4,11:1 - REPROVA para 15px. O efeito estava
   sabotando a legibilidade do texto que ele decora. Medido com
   _auditar-contraste (pixel real, nao tabela). Cura: tinta branca, shimmer
   mais discreto e base um pouco mais escura.                                */
.pill {
  display: inline-block; border-radius: var(--raio-pill);
  border: 1px solid rgba(44,196,255,.42);
  background-color: rgba(0,110,175,.16);
  padding: 10px 22px;
  font-size: var(--t-rotulo); font-weight: 600; color: #FFFFFF;
  background-image: linear-gradient(100deg, transparent 30%, rgba(44,196,255,.10) 50%, transparent 70%);
  background-size: 220% 100%;
  animation: tpd-shimmer 7s ease-in-out infinite;
}
@keyframes tpd-shimmer { 0% { background-position: 140% 0 } 100% { background-position: -40% 0 } }

/* ============================================================================
   APOSENTADOS EM 21/08/2026 — .particula / .meteoro / .no
   Substituidos pela REDE VIVA (`rede-neural.js` + `.camada.rede-viva`).

   Motivo (HB): "esse fundo so com pontinhos fica estranho, tem que ter
   conexoes, como uma rede neural". E ele esta certo pelo desenho: ponto solto
   nao significa nada. O que le como INTELIGENCIA e a LIGACAO entre os nos —
   e ligacao precisa nascer da distancia, recalculada, nao de posicao fixa.

   Nao foram deixados "por via das duvidas": catalogo inflado e catalogo que
   ninguem confia. Quem quiser o efeito antigo, esta no git e nesta nota.
   ========================================================================= */

/* ---- 9. FAIXA DE MARCA (o unico lugar do --grad-marca com seguranca) --
   Faixa decorativa SEM texto por cima. Com texto, o roxo mata o contraste. */
.faixa-marca { height: 4px; border-radius: 4px; background: var(--grad-marca); }

/* ============================================================================
   O DESLIGADOR. Obrigatorio. Nao remova.
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  .fade-in, .cta-pulso, .pill {
    animation: none !important;
  }
  .fade-in { opacity: 1 !important; transform: none !important; }
  .reage, .cta, .link-marca { transition: none !important; }
  .reage:hover, .cta:hover { transform: none !important; }
  .reveal  { opacity: 1 !important; transform: none !important; transition: none !important; }
  .js-blocos .destaque { background-position: 0 0 !important; transition: none !important; }
}