/* Cena de partículas da abertura da página Inteligência.

   Inspirada no "Multiple Polygon Masks" do particles.js, com duas diferenças
   deliberadas: a demo é neon sobre preto, e esta página é papel claro com
   tipografia preta — as cores saem dos tokens do site; e a demo é a página
   inteira, enquanto aqui a cena é fundo, grande e atrás do texto.

   A máscara é o monograma CG da marca (inteligencia-monograma.svg, derivado
   do favicon). A cena é ornamento: não há conteúdo aqui, então sem
   JavaScript ela simplesmente não existe. */

/* A abertura vira três faixas: olho, título e a cena ocupando o que sobra.
   A terceira faixa é `1fr`, então a cena começa exatamente onde o título
   termina — sem ninguém precisar saber a altura dele em CSS.

   O plugin prende as partículas aos limites do canvas: empurrar a máscara por
   `polygon.position` não desce nada, só espreme. Quem desce é a caixa. */
/* A abertura mantém a altura natural dela: nada de `min-height` para abrir
   espaço ao grafismo, que foi o que empurrou o conteúdo seguinte para longe.
   Quem desce é o grafismo, sobrepondo — ele é fundo, não um bloco no fluxo. */
.inteligencia__abertura {
  position: relative;
}

/* Camada de fundo, começando logo abaixo do título e sangrando para a
   direita e para baixo. O plugin prende as partículas às bordas do canvas,
   então o tamanho do monograma é o tamanho desta caixa — mover por
   `polygon.position` não desce nada, só espreme. */
.intel-rede {
  --intel-rede-sangria: clamp(0px, 6vw, 90px);
  position: absolute;
  /* Começa logo abaixo do título. O título é o último elemento no fluxo da
     abertura, então a base dele é `100% - padding-bottom` — repetir o clamp do
     padding aqui faz a caixa acompanhar sozinha qualquer viewport, sem
     porcentagem chutada. */
  top: calc(100% - clamp(70px, 10vh, 120px) + clamp(16px, 2.5vh, 32px));
  left: 0;
  right: calc(var(--intel-rede-sangria) * -1);
  height: 660px;
  z-index: 0;
  /* O ponteiro atravessa: quem escuta é a janela (ver o `detectsOn` do JS),
     então o canvas não precisa capturar nada — e assim não rouba a seleção do
     texto que passa por cima dele. */
  pointer-events: none;
}

/* O texto sobe para cima da camada. Sem isto o canvas cobriria o título: ele
   é o último filho e ganharia o empilhamento por ordem de documento. */
.inteligencia__abertura > .inteligencia__eyebrow,
.inteligencia__abertura > .inteligencia__marco {
  position: relative;
  z-index: 1;
}

/* Fora do fluxo. O canvas nasce 300x150 e, esticado a 100% dentro da faixa,
   passava a ditar a altura dela — a faixa media o canvas, o canvas media a
   faixa, e a abertura crescia até 1130px ignorando o `min-height`. Absoluto,
   ele não infla mais nada. */
.intel-rede canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100% !important;
  height: 100% !important;
}

/* Abaixo de 1024px a abertura volta a ser só o título: numa coluna estreita o
   monograma passa por trás do texto e atrapalha a leitura. O JS nem carrega a
   biblioteca aí. */
@media (max-width: 1023px) {
  .intel-rede {
    display: none;
  }
}

/* Sem JavaScript a faixa de baixo fica vazia e a abertura não precisa da
   altura extra que só existe para dar espaço ao monograma. */
.inteligencia__abertura:not(:has(.intel-rede canvas)) {
  min-height: 0;
}

/* Movimento reduzido: a cena não existe — o JS também não a inicia. */
@media (prefers-reduced-motion: reduce) {
  .intel-rede {
    display: none;
  }
}