/* ===========================================================
   EFEITOS · A'CASTRO LP de credenciamento Detran-RJ (layout proprio, 15/09)
   Rodada 3 (27/09): selo do nucleo e ORBITA SAIRAM (pedido do Alex, grande
   demais). Ficam os efeitos desta pagina: painel de preparo, passo a passo
   que acende, borda viva, spotlight, grade de servicos com vida no hover.
   Nada de scanner, revelacao por baixo nem brilho no botao (sao da LP 1).

   RODADA DE MOVIMENTO (15/09, pedido do dono via Alex): 1 camada de entrada
   por secao, uma vez, ao rolar. Zero GSAP, zero WebGL: so' CSS (opacity,
   transform, filter) + IntersectionObserver. `prefers-reduced-motion:reduce`
   desliga tudo (guardas `@media (prefers-reduced-motion:no-preference)`
   abaixo); sem JS a classe `.js` no <html> nunca entra e nada fica escondido
   (DS secao 30 detalha a fonte de cada efeito no React Bits/21st.dev).
   =========================================================== */

/* rodada 3 (27/09): a orbita e o selo 3D do nucleo SAIRAM da pagina (audio do
   Alex, 25/09 17h34: "grande demais"), com o bloco 06 inteiro. Versao anterior
   guardada em _versoes\2026-09-24-site-rodada-2\ se precisar voltar. */

/* ===========================================================
   4) BORDA VIVA (porte do React Bits BorderGlow): um arco de luz
   prata percorre a borda do cartao do lado em que o cursor esta'.
   So' no hover (resposta ao gesto); sem efeito em tela de toque.
   =========================================================== */
[data-borda]{--prox:0;--ang:45deg;--mx:50%;--my:50%}
.cartao__luz{
  position:absolute;inset:-14px;border-radius:30px;pointer-events:none;z-index:2;
  opacity:calc((var(--prox) - 32) / 68);transition:opacity .35s ease;
  -webkit-mask-image:conic-gradient(from var(--ang) at 50% 50%, #000 0%, #000 7%, transparent 21%, transparent 79%, #000 93%, #000 100%);
          mask-image:conic-gradient(from var(--ang) at 50% 50%, #000 0%, #000 7%, transparent 21%, transparent 79%, #000 93%, #000 100%);
  filter:drop-shadow(0 0 4px rgba(4,108,144,.45)) drop-shadow(0 0 12px rgba(160,212,240,.55));
}
.cartao__luz::before{
  content:"";position:absolute;inset:14px;border-radius:16px;padding:1.5px;
  background:linear-gradient(135deg,#FFFFFF 0%,#AEBCC5 38%,var(--azul-500) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
}
/* 4a) spotlight interno seguindo o cursor (porte do React Bits SpotlightCard,
   Components): luz suave por baixo do texto, so' acende no hover/foco. */
[data-borda]::after{
  content:"";position:absolute;inset:0;border-radius:inherit;z-index:0;pointer-events:none;
  opacity:0;transition:opacity .4s ease;
  background:radial-gradient(circle 200px at var(--mx) var(--my), rgba(4,108,144,.1), transparent 72%);
}
[data-borda]:hover::after,[data-borda]:focus-within::after{opacity:1}
/* ---------- 4b) icone: leve giro + escala no hover, igual em todo cartao ---------- */
.ic-circ{transition:transform .3s cubic-bezier(.34,1.4,.64,1),box-shadow .3s ease}
[data-borda]:hover .ic-circ{transform:scale(1.1) rotate(-4deg)}
/* ---------- 4c) toque: sem hover, pulso curto (spotlight + icone) so' uma
   vez, quando o cartao entra na tela, em vez de ficar sem nenhum efeito ---------- */
@media (prefers-reduced-motion:no-preference){
  @keyframes toque-spot{ 0%{opacity:0} 40%{opacity:1} 100%{opacity:0} }
  @keyframes toque-icone{ 0%{transform:scale(1) rotate(0)} 40%{transform:scale(1.1) rotate(-4deg)} 100%{transform:scale(1) rotate(0)} }
  .cartao--toque::after{animation:toque-spot 1.3s ease-out .1s 1}
  .cartao--toque .ic-circ{animation:toque-icone 1.3s ease-out .1s 1}
}

/* ===========================================================
   5) ENTRADA POR SECAO (base React Bits AnimatedContent/FadeContent):
   bloco sobe e some com um leve fade, uma vez, quando entra na tela.
   Marcacao no HTML: [data-entra-grupo] no container, [data-entra] em cada
   item; o JS escalona o atraso por indice em --atraso. Sem [data-entra-grupo]
   nada muda (item some do fluxo normal se nao tiver JS/guarda). will-change
   so' enquanto ainda nao entrou, pra nao deixar camada de composicao presa.
   =========================================================== */
@media (prefers-reduced-motion:no-preference){
  html.js [data-entra-grupo] [data-entra]{
    opacity:0;transform:translateY(22px);
    transition:opacity .5s cubic-bezier(.16,1,.3,1) var(--atraso,0s),
               transform .55s cubic-bezier(.16,1,.3,1) var(--atraso,0s);
  }
  html.js [data-entra-grupo]:not(.entrou) [data-entra]{will-change:opacity,transform}
  html.js [data-entra-grupo].entrou [data-entra]{opacity:1;transform:none}
}

/* ===========================================================
   6) TITULOS (H1/H2): entrada palavra por palavra com desfoque saindo
   (base React Bits BlurText, TextAnimations). O JS quebra o texto em
   <span class="palavra"> preservando o texto original (leitor de tela,
   selecao, `nao-quebra` e `quebra-desk/quebra-cel` intactos: a quebra so'
   acontece dentro de nos de texto puros, nunca dentro de .nao-quebra ou
   <em>, que entram inteiros como 1 bloco). O destaque em italico prata
   (<em>) ganha +3 passos de atraso pra entrar logo depois do resto da
   frase (pedido do dono). Sem JS ou com movimento reduzido, o texto nunca
   foi quebrado em <span>: fica inteiro e visivel desde sempre. */
@media (prefers-reduced-motion:no-preference){
  html.js [data-titulo-anim] .palavra{
    display:inline-block;opacity:0;filter:blur(6px);transform:translateY(.3em);
    transition:opacity .5s cubic-bezier(.16,1,.3,1), filter .5s cubic-bezier(.16,1,.3,1), transform .5s cubic-bezier(.16,1,.3,1);
    transition-delay:calc(var(--i,0) * .04s);
  }
  html.js [data-titulo-anim]:not(.entrou) .palavra{will-change:opacity,filter,transform}
  html.js [data-titulo-anim] .palavra--destaque{transition-delay:calc((var(--i,0) + 3) * .04s)}
  html.js [data-titulo-anim].entrou .palavra{opacity:1;filter:blur(0);transform:none}
}

/* ===========================================================
   8) BRILHO NO BOTAO PRINCIPAL (base React Bits GlareHover): uma faixa de
   luz atravessa o botao no hover/foco, uma vez por gesto. So' reage ao
   gesto, nada continuo (impacto tem teto). Todo `.btn--acao` da pagina,
   nao so' o do fecho: mesmo efeito pro mesmo tipo de botao (pedido do dono).
   =========================================================== */
.btn--acao{position:relative;overflow:hidden}
.btn--acao::after{
  content:"";position:absolute;top:0;left:-60%;width:34%;height:100%;
  background:linear-gradient(115deg, transparent, rgba(255,255,255,.65), transparent);
  transform:skewX(-18deg);transition:left .7s ease;pointer-events:none;
}
.btn--acao:hover::after,.btn--acao:focus-visible::after{left:130%}

/* ---------- foco animado nos campos do formulario ---------- */
.campo label{transition:color .2s ease}
.campo:focus-within label{color:var(--azul-600)}

/* o botao do cabecalho e' copia da LP ISO 9001, e la' ele nao tem o brilho:
   fica igual (DS secao 33) */
.topo .btn--acao::after{display:none}

/* ===========================================================
   10) RODADA 2 (23/09): REVELACAO UNICA DE FOTO E MAPA ([data-revela])
   - foto do hero: assenta (escala 1.06 > 1) no carregamento;
   - foto do bloco 02: abre como cortina na mesma diagonal do recorte;
   - foto do bloco 03: sobe de opacidade;
   - mapa do estado: o contorno e as divisas dos 92 municipios se desenham
     (stroke-dasharray/dashoffset herdam do <use> para o <symbol>, e os
     caminhos tem pathLength="1").
   Uma vez, ao entrar na tela. Sem JS ou com movimento reduzido: estado final.
   =========================================================== */
@media (prefers-reduced-motion:no-preference){
  html.js .hero__foto[data-revela] img{transform:scale(1.06);transition:transform 1.4s cubic-bezier(.16,1,.3,1)}
  html.js .hero__foto[data-revela].visto img{transform:none}

  /* a cortina vai na <picture>, nao na <figure>: o IntersectionObserver do
     Chromium respeita o clip-path do alvo, e uma figura toda recortada nunca
     "entra na tela" (medido: ficou sem .visto e a imagem lazy nem carregou) */
  html.js .acontece__foto[data-revela] picture{clip-path:polygon(100% 0,100% 0,100% 100%,100% 100%);transition:clip-path .9s cubic-bezier(.65,0,.35,1)}
  html.js .acontece__foto[data-revela].visto picture{clip-path:var(--recorte)}
  html.js .acontece__foto[data-revela] .acontece__fio{opacity:0;transition:opacity .5s ease .7s}
  html.js .acontece__foto[data-revela].visto .acontece__fio{opacity:1}

  html.js .mercado__foto[data-revela]{opacity:0;transition:opacity 1s ease}
  html.js .mercado__foto[data-revela].visto{opacity:1}

  html.js .mapa[data-revela] .mapa__svg{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.6s cubic-bezier(.45,0,.2,1) .15s}
  html.js .mapa[data-revela].visto .mapa__svg{stroke-dashoffset:0}
  html.js .mapa[data-revela] .mapa__capital{opacity:0;transition:opacity .5s ease 1.4s}
  html.js .mapa[data-revela].visto .mapa__capital{opacity:1}

  /* capital: um pulso lento de luz, o unico movimento continuo do mapa */
  .mapa__capital::after{animation:capital-pulsa 2.8s ease-out infinite}
  @keyframes capital-pulsa{0%{transform:scale(.6);opacity:.9}100%{transform:scale(2.6);opacity:0}}

  /* setas entre as etapas do bloco 02: o traco corre da esquerda, uma vez */
  html.js .etapas[data-entra-grupo] .etapa + .etapa::before{transform:scaleX(0);transform-origin:left center;transition:transform .6s cubic-bezier(.16,1,.3,1) calc(var(--atraso,0s) + .2s)}
  html.js .etapas[data-entra-grupo].entrou .etapa + .etapa::before{transform:none}

  /* medidor do bloco 05: as casas acendem em sequencia quando o cartao entra */
  html.js .formas__lista .medidor i{transition:background-color .35s ease,box-shadow .35s ease}
  html.js .formas__lista .medidor i:nth-child(2){transition-delay:.12s}
  html.js .formas__lista .medidor i:nth-child(3){transition-delay:.24s}
  html.js .formas__lista .medidor i:nth-child(4){transition-delay:.36s}
  html.js .formas__lista:not(.entrou) .medidor i{background:rgba(0,72,108,.1)!important;box-shadow:none!important}

}

@media (prefers-reduced-motion:reduce){
  .btn,.btn .seta{transition:none}
  .btn:hover{transform:none}
  .btn--acao::after{transition:none;left:-60%!important}
  .ic-circ{transition:none}
  [data-borda]:hover .ic-circ{transform:none}
}