/* ---------------------------------------------------------------------------
   Banner da home — variante "nós".

   Carregado só na home. Os valores vêm do handoff; as posições, cores e
   gradientes de cada nó são impressos pelo PHP (inc/hero-nodes.php), que é a
   fonte única desses dados.
   --------------------------------------------------------------------------- */

.wro-hero {
  --mx: 50%;
  --my: 45%;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--wro-navy-900);
  color: #fff;

  /* O respiro acompanha a ALTURA da tela, não a largura. Em notebook o banner
     tomava a tela inteira e nada da seção seguinte aparecia — o visitante não
     tinha sinal de que havia mais conteúdo abaixo. Em monitores altos o clamp
     satura nos 104px do design original. */
  padding-block: clamp(60px, 8.5vh, 104px);
}

/* Camadas de cor: uma por nó, mais a neutra. Todas empilhadas e inertes. */
.wro-hero__tone {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 620ms var(--ease-standard);
}

.wro-hero__tone--idle {
  opacity: 1;
}

/* Com um nó ativo, a neutra sai e a do nó entra. */
.wro-hero.is-active .wro-hero__tone--idle {
  opacity: 0;
}

.wro-hero__tone.is-on {
  opacity: 1;
}

.wro-hero__texture {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.055) 1px, transparent 1px) 0 0 / 8px 8px;
}

/* Véu de legibilidade: escurece a esquerda, onde fica o texto. */
.wro-hero__veil {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to right, rgba(7, 8, 15, 0.84) 0%, rgba(7, 8, 15, 0.5) 44%, rgba(7, 8, 15, 0.06) 100%);
}

.wro-hero__stage {
  position: relative;
}

.wro-hero__grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 56px;
  align-items: center;
}

.wro-hero__eyebrow {
  color: var(--wro-blue-400);
  transition: color 400ms var(--ease-standard);
}

.wro-hero__headline {
  font-family: var(--font-display);
  /* Idem: em tela baixa o título de 56px quebrava em cinco linhas e sozinho
     ocupava quase 300px. */
  font-size: clamp(44px, 6.4vh, 56px);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.02em;
  margin-top: clamp(14px, 2vh, 22px);
  text-wrap: pretty;
}

.wro-hero__accent {
  color: var(--wro-blue-400);
  transition: color 500ms var(--ease-standard);
}

/* min-height evita o salto de layout quando a frase troca de tamanho. */
.wro-hero__lede {
  font-size: 18px;
  line-height: 1.6;
  color: var(--wro-navy-200);
  margin-top: clamp(12px, 2vh, 20px);
  max-width: 520px;
  min-height: 86px;
  text-wrap: pretty;
}

.wro-hero__ctas {
  display: flex;
  gap: 12px;
  margin-top: clamp(18px, 2.6vh, 28px);
  flex-wrap: wrap;
}

.wro-hero__hint {
  margin-top: clamp(16px, 2.4vh, 26px);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.45);
  display: flex;
  align-items: center;
  gap: 8px;
  opacity: 0.75;
  transition: opacity 220ms var(--ease-standard);
}

/* Com um nó fixado a dica ganha peso: é ela que diz como soltar. */
.wro-hero.is-pinned .wro-hero__hint {
  opacity: 1;
}

/* ---------- símbolo ---------- */

.wro-hero__mark-wrap {
  position: relative;
  width: 100%;
  /* O símbolo também não pode crescer além do que a tela comporta. */
  max-width: min(420px, 46vh);
  aspect-ratio: 1 / 1;
  margin-inline: auto;
}

/* A marca é uma div preenchida por gradiente e recortada pela máscara do
   símbolo: o desenho vira uma janela para o campo de cor. */
.wro-hero__mark {
  position: absolute;
  inset: 0;
  background: radial-gradient(60% 60% at var(--mx) var(--my), #ffffff, rgba(219, 234, 254, 0.94) 55%, rgba(147, 197, 253, 0.86) 100%);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  transition: background 520ms var(--ease-standard);
}

.wro-hero__glow {
  position: absolute;
  width: 26%;
  height: 26%;
  margin-left: -13%;
  margin-top: -13%;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(6px);
  mix-blend-mode: screen;
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 320ms var(--ease-standard), transform 320ms var(--ease-standard);
}

.wro-hero__glow.is-on {
  opacity: 1;
  transform: scale(1);
}

.wro-hero__hotspot {
  position: absolute;
  width: 15%;
  height: 15%;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  appearance: none;
}

/* O anel de foco precisa aparecer sobre o fundo escuro — o handoff pede
   explicitamente que os hotspots permaneçam navegáveis por teclado. */
.wro-hero__hotspot:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.wro-hero__tip {
  position: absolute;
  transform: translate(-50%, -140%);
  white-space: nowrap;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.95);
  color: var(--wro-navy-900);
  pointer-events: none;
  opacity: 0;
  transition: opacity 220ms var(--ease-standard);
}

.wro-hero__tip.is-on {
  opacity: 1;
}

/* ---------- responsivo ---------- */

@media (max-width: 900px) {
  .wro-hero {
    padding-block: 64px;
  }

  .wro-hero__grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  /* O símbolo vem primeiro no HTML? Não: o texto vem primeiro e assim fica. */
  .wro-hero__headline {
    font-size: 34px;
  }

  .wro-hero__lede {
    font-size: 16px;
    min-height: 0;
  }

  .wro-hero__mark-wrap {
    max-width: 300px;
  }

  /* No toque não há hover nem cursor: o véu horizontal perde sentido e vira
     vertical, para o texto continuar legível sobre o campo de cor. */
  .wro-hero__veil {
    background: linear-gradient(to bottom, rgba(7, 8, 15, 0.84) 0%, rgba(7, 8, 15, 0.6) 60%, rgba(7, 8, 15, 0.2) 100%);
  }
}

/* Sem movimento: o campo não persegue o cursor e o autoplay não roda (o JS
   também desliga os dois). As trocas de cor continuam, porque são informação. */
@media (prefers-reduced-motion: reduce) {
  .wro-hero__mark,
  .wro-hero__glow {
    transition-duration: 1ms;
  }
}

/* ---------- estado "todas as frentes" ---------- */

/* Somar luz em vez de encobrir: com screen, as seis cores se misturam sobre o
   azul petróleo do fundo, que é o efeito pedido. */
.wro-hero__tone--all {
  mix-blend-mode: screen;
}

.wro-hero.is-all .wro-hero__tone--all {
  opacity: 1;
}

/* Nenhuma cor de nó isolada compete com a mistura. */
.wro-hero.is-all .wro-hero__tone[data-node] {
  opacity: 0;
}

/* O logo sempre na frente das pétalas: é ele a marca, elas são o ambiente.

   `pointer-events: none` é obrigatório aqui. A marca é uma div do tamanho do
   símbolo inteiro, recortada por `mask-image` — mas a máscara só afeta o que é
   PINTADO, não o que é CLICADO: a div continua capturando o ponteiro na sua
   caixa toda. Ao pôr a marca acima dos hotspots na pilha, ela passou a
   interceptar o clique dos seis nós e do centro. O hover seguia funcionando
   (é escutado no wrapper), o que fazia o banner parecer vivo e mesmo assim
   surdo ao clique. */
.wro-hero__mark {
  z-index: 2;
  pointer-events: none;
}

.wro-hero__glow {
  z-index: 1;
}

/* Acima da marca: são eles que recebem o clique e desenham o anel de foco. */
.wro-hero__hotspot {
  z-index: 3;
}

/* E o rótulo acima de tudo, senão some por trás do símbolo. */
.wro-hero__tip {
  z-index: 4;
}

/* No estado combinado cada halo vira uma PÉTALA: uma elipse alongada, deitada
   na direção do seu nó e empurrada para fora, bem maior que o símbolo. Círculos
   concêntricos não davam a forma de flor — só um halo redondo. */
.wro-hero.is-all .wro-hero__glow {
  opacity: 1;
  left: 50%;
  top: 50%;
  width: 48%;
  height: 152%;
  margin: 0;
  border-radius: 50%;
  /* Desfoque contido: com muito borrão a elipse vira bolha e a forma de pétala
     se perde. Aqui ele serve só para suavizar a borda. */
  filter: blur(14px);

  /* rotate leva a pétala para a direção do nó; o translate seguinte a empurra
     para fora, deixando a ponta de dentro perto do centro da flor. */
  transform: translate(-50%, -50%) rotate(var(--angulo)) translateY(-34%);

  /* Borda esmaecida para as vizinhas se misturarem onde se encontram. */
  background: radial-gradient(closest-side, var(--petal) 0%, var(--petal) 48%, transparent 100%);
}

/* Com tudo aceso, rótulo em cada nó viraria poluição. */
.wro-hero.is-all .wro-hero__tip {
  opacity: 0;
}

/* O véu abre um pouco: o campo de cor é o assunto neste estado. */
.wro-hero.is-all .wro-hero__veil {
  background: linear-gradient(to right, rgba(7, 8, 15, 0.78) 0%, rgba(7, 8, 15, 0.34) 46%, rgba(7, 8, 15, 0) 100%);
}

/* ---------- nó central ---------- */

.wro-hero__hotspot--center {
  width: 13%;
  height: 13%;
}

/* O anel do centro existe SÓ para quem navega por teclado, que precisa ver onde
   está o foco. No mouse ele denunciava a fronteira da área clicável — e ficava
   à mostra enquanto a visão geral estivesse ativa, porque o ponteiro costuma
   permanecer ali depois do clique. Para o mouse bastam o cursor e a própria
   reação do banner. */
.wro-hero__hotspot--center::after {
  content: "";
  position: absolute;
  inset: -18%;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.55);
  opacity: 0;
  transform: scale(0.85);
  transition: opacity 220ms var(--ease-standard), transform 220ms var(--ease-standard);
}

.wro-hero__hotspot--center:focus-visible::after {
  opacity: 1;
  transform: scale(1);
}

@media (prefers-reduced-motion: reduce) {
  .wro-hero__tone--all {
    transition-duration: 1ms;
  }
}

/* No estado combinado as manchas da marca SOMAM luz em vez de se cobrirem.
   Sem isto, seis camadas de fundo empilhadas simplesmente se ocultam — a de
   cima vence — e o miolo lavava para branco. Com `screen` sobre base preta,
   cada cor acende a sua região e os encontros clareiam, que é o efeito da
   referência. */
.wro-hero.is-all .wro-hero__mark {
  background-blend-mode: screen;
}

/* As pétalas agora alcançam a coluna de texto. Duas medidas para o texto não
   perder contraste: ele passa a ficar acima delas na pilha, e ganha um véu
   escuro próprio enquanto a flor está aberta. Sem isso, o azul do H1 sobre a
   pétala turquesa fica ilegível. */
.wro-hero__copy {
  position: relative;
  z-index: 3;
}

.wro-hero.is-all .wro-hero__copy::before {
  content: "";
  position: absolute;
  inset: -8% -14% -8% -40%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(62% 74% at 34% 50%, rgba(7, 8, 15, 0.78), rgba(7, 8, 15, 0) 76%);
}

/* ---------- cenas de fundo ---------- */

/* PROTÓTIPO — só a cena de "IA aplicada" existe por enquanto.

   A cena entra DEPOIS das camadas de cor e da textura, e ANTES do véu: assim
   ela soma luz sobre o campo já formado e continua submissa ao véu, que é quem
   garante o contraste do texto.

   Duas regras de convivência com o resto do banner:

   1. A cena é sempre azul, nunca da cor do nó. A cor específica de cada frente
      acende no halo do símbolo; se o fundo também mudasse de cor a cada nó, o
      banner viraria festival. A única mistura de cores continua sendo a flor,
      no clique do nó central.

   2. É desenho, não vídeo. A referência de movimento que serviu de base usa um
      MP4 de 8,9 MB para um fundo que, no fim, aparece tingido de azul e
      desfocado. Aqui o mesmo movimento sai em poucos KB, nítido em qualquer
      resolução, na cor exata da marca — e para sozinho quando o visitante pede
      menos movimento. */
.wro-hero__cenas {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.wro-hero__cena {
  position: absolute;
  inset: 0;
  opacity: 0;
  /* Azul do próprio banner: todo o traço da cena herda isto por currentColor. */
  color: var(--wro-blue-300, #93c5fd);
  mix-blend-mode: screen;
  transition: opacity 760ms var(--ease-standard);
}

.wro-hero__cena.is-on {
  opacity: 0.5;
}

.wro-hero__cena svg {
  width: 100%;
  height: 100%;
  display: block;

  /* Deriva lenta e contínua: é o que faz a cena parecer viva mesmo quando
     nenhum pulso está passando na frente do olho.

     A escala é CONSTANTE de propósito. O que tremia era a mudança de escala:
     a cada quadro os traços finos caíam em subpixels diferentes e o
     antisserrilhado piscava, o que aparece como vibração — mais visível em
     tela pequena, onde os traços já ocupam menos pixels. Com a escala fixa e
     só a posição mudando, mais o `will-change`, o navegador rasteriza o
     desenho uma vez e o compositor apenas o desloca. */
  transform: scale(1.08);
  animation: wro-cena-deriva 34s ease-in-out infinite alternate;
  will-change: transform;
}

@keyframes wro-cena-deriva {
  from { transform: scale(1.08) translate(-1.3%, 0.7%); }
  to   { transform: scale(1.08) translate(1.3%, -1%); }
}

/* As trilhas são o desenho parado; os pulsos é que correm por cima delas. */
.wro-cena-trilhas {
  opacity: 0.3;
}

.wro-cena-terminais {
  opacity: 0.45;
}

/* pathLength="100" normaliza todas as trilhas: o mesmo dasharray produz um
   pulso do mesmo tamanho aparente numa trilha curta e numa longa. */
.wro-cena-pulsos path {
  stroke-dasharray: 13 87;
  stroke-dashoffset: 100;
  opacity: 0.9;
  animation: wro-cena-pulso 3.6s linear infinite;
  animation-delay: var(--atraso, 0s);
}

@keyframes wro-cena-pulso {
  to { stroke-dashoffset: 0; }
}

.wro-cena-chip {
  opacity: 0.75;
}

.wro-cena-nucleo {
  opacity: 0.35;
  animation: wro-cena-nucleo 3.6s ease-in-out infinite;
}

@keyframes wro-cena-nucleo {
  0%, 100% { opacity: 0.28; }
  50%      { opacity: 0.72; }
}

/* Em tela estreita a cena competiria com o texto por espaço e por contraste. */
@media (max-width: 900px) {
  .wro-hero__cena.is-on {
    opacity: 0.3;
  }

  /* E a deriva sai de cena. Cada animação interna (pulsos, engrenagens) já
     obriga a redesenhar o SVG a cada quadro; somar a isso o deslocamento do
     conjunto é o que fazia a cena engasgar no celular. O movimento que
     interessa — o de dentro — continua. */
  .wro-hero__cena svg {
    animation: none;
    will-change: auto;
    transform: scale(1.08);
  }
}

@media (prefers-reduced-motion: reduce) {
  .wro-hero__cena svg,
  .wro-cena-pulsos path,
  .wro-cena-nucleo {
    animation: none;
  }

  /* Sem os pulsos correndo, deixa a trilha inteira acesa: a cena continua
     legível como desenho. */
  .wro-cena-pulsos path {
    stroke-dasharray: none;
    stroke-dashoffset: 0;
    opacity: 0.35;
  }
}

/* ---------- cenas: elementos específicos ---------- */

/* Automação: as barras crescem do eixo e a tendência se desenha depois delas,
   como um painel que abre. O ciclo inteiro recomeça, para a cena não morrer
   num quadro parado depois dos primeiros segundos. */
.wro-cena-barras rect {
  opacity: 0.55;
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: wro-cena-barra 7s var(--ease-standard) infinite;
  animation-delay: var(--atraso, 0s);
}

@keyframes wro-cena-barra {
  0%, 6%    { transform: scaleY(0.06); }
  34%, 76%  { transform: scaleY(1); }
  100%      { transform: scaleY(0.06); }
}

.wro-cena-tendencia,
.wro-cena-seta {
  stroke-dasharray: 100 100;
  stroke-dashoffset: 100;
  animation: wro-cena-desenha 7s var(--ease-standard) infinite;
}

.wro-cena-tendencia { animation-delay: 0.9s; }
.wro-cena-seta      { animation-delay: 2.1s; }

@keyframes wro-cena-desenha {
  0%, 12%   { stroke-dashoffset: 100; }
  40%, 78%  { stroke-dashoffset: 0; }
  100%      { stroke-dashoffset: 100; }
}

/* Automação: um trem de engrenagens. Cada uma gira em torno do próprio centro,
   que vem inline do PHP porque é dado do desenho, não do estilo. Raio maior
   gira mais devagar e o sentido alterna a cada engrenagem — é isso que faz o
   conjunto ler como engrenado em vez de rodas soltas girando por perto. */
.wro-cena-engrenagem {
  opacity: 0.8;
  transform-box: view-box;
  transform-origin: var(--cx) var(--cy);
  animation-duration: var(--duracao, 40s);
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

.wro-cena-engrenagem--horario { animation-name: wro-cena-engrena-h; }
.wro-cena-engrenagem--anti    { animation-name: wro-cena-engrena-a; }

@keyframes wro-cena-engrena-h {
  to { transform: rotate(360deg); }
}

@keyframes wro-cena-engrena-a {
  to { transform: rotate(-360deg); }
}

/* Plataformas: os blocos flutuam fora de fase, o que dá a impressão de peças
   soltas e escolhíveis em vez de uma grade rígida. O preenchimento fraco é o
   que os faz ler como vidro, e não como caixa vazia. */
.wro-cena-blocos {
  fill: currentColor;
  fill-opacity: 0.07;
}

.wro-cena-blocos rect {
  opacity: 0.5;
  animation: wro-cena-flutua 6.4s ease-in-out infinite alternate;
  animation-delay: var(--atraso, 0s);
}

@keyframes wro-cena-flutua {
  from { transform: translateY(-7px); }
  to   { transform: translateY(7px); }
}

/* Continuidade: o anel gira devagar em volta do símbolo. As folgas entre os
   quatro arcos são o desenho — é por elas que se percebe o giro. */
.wro-cena-ciclo {
  transform-box: view-box;
  transform-origin: 458px 210px;
  animation: wro-cena-gira 46s linear infinite;
}

@keyframes wro-cena-gira {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .wro-cena-barras rect,
  .wro-cena-tendencia,
  .wro-cena-seta,
  .wro-cena-engrenagem,
  .wro-cena-blocos rect,
  .wro-cena-ciclo {
    animation: none;
  }

  /* Sem a animação de desenho, o traço precisa aparecer inteiro. */
  .wro-cena-barras rect { transform: none; }

  .wro-cena-tendencia,
  .wro-cena-seta {
    stroke-dashoffset: 0;
  }
}

/* ---------- a visão geral se apaga sozinha ---------- */

/* Clicar no nó central acende a mistura das seis cores como sempre, mas ela
   não fica acesa indefinidamente: as cores vão perdendo força ao longo de dez
   segundos até o banner voltar ao normal, como se o próprio clique se
   desfizesse. Quem quiser encerrar antes clica de novo no centro.

   Os dez segundos estão aqui e no JS (ALL_DURA), que é quem devolve o estado.
   A animação segura a cor cheia no primeiro quarto do tempo — sem essa pausa a
   mistura já nasce sumindo e o clique parece não ter surtido efeito. */
@keyframes wro-hero-esmaece {
  0%, 24% { opacity: 1; }
  100%    { opacity: 0; }
}

.wro-hero.is-all .wro-hero__tone--all,
.wro-hero.is-all .wro-hero__glow,
.wro-hero.is-all .wro-hero__copy::before {
  /* Linear de propósito. Com a curva padrão do site (saída suave) a cor caía
     quase toda nos primeiros segundos e depois só rastejava: aos 5s já tinha
     perdido três quartos da força. O pedido é perder intensidade AO LONGO dos
     dez segundos, então o declínio precisa ser parelho. */
  animation: wro-hero-esmaece 10s linear forwards;
}

/* Sem movimento: a cor fica cheia e some de uma vez quando o JS devolve o
   estado. O que importa é a informação — a mistura existe e depois sai —, não
   a transição entre as duas. */
@media (prefers-reduced-motion: reduce) {
  .wro-hero.is-all .wro-hero__tone--all,
  .wro-hero.is-all .wro-hero__glow,
  .wro-hero.is-all .wro-hero__copy::before {
    animation: none;
  }
}