/* --------------------------------------------------------------------------
   01. Faixa de conexoes: componentes/conexoes.php

   Faixa curta e escura (--sup-1) entre o hero e o primeiro capitulo claro
   (#demonstracao). NAO desenha divisa nenhuma: a sombra da borda de baixo e
   deduzida pela vizinhanca em css/site.css (secao 05), com :has(). Qualquer
   sangria, gradiente de transicao ou fio de borda escrito aqui seria o bug
   que o cliente reclamou.

   A composicao tem duas camadas:
     - atmosfera: a arte de fibra optica sangrando pela direita, em deriva
       continua, com veu de token garantindo o contraste do texto;
     - conteudo: chamada a esquerda e a faixa de integracoes a direita, dentro
       de um painel de vidro que se le como diagrama (trilho + nos), nao como
       lista de nomes.
   -------------------------------------------------------------------------- */
.conexoes {
  background: var(--sup-1);
}

/* --- 1.1 Atmosfera -------------------------------------------------------
   `overflow: clip` e proposital: `hidden` criaria um scrollport e as
   timelines de view() das classes .mov-* passariam a medir esta caixa, que
   nunca rola, e o movimento congelaria. `clip` recorta sem criar scrollport.
   O `hidden` acima fica como recuo para quem nao conhece `clip`: sao os mesmos
   navegadores que tambem nao conhecem view(), entao nao ha movimento a perder
   e a sangria continua contida. */
.conexoes-atmosfera {
  position: absolute;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  overflow: clip;
  pointer-events: none;
}

/* Sangra 4% para cada lado para que a deriva (--mov-forca) nunca descubra a
   borda da imagem. */
.conexoes-arte {
  --mov-forca: 3%;
  position: absolute;
  top: 0;
  left: -4%;
  width: 108%;
  height: 100%;
  object-fit: cover;
  object-position: 70% 46%;
  opacity: 0.66;
  /* A mascara e quem apaga a arte nas duas pontas: ela chega a zero antes da
     borda de cima (juncao com o hero) e antes da de baixo (onde mora a sombra
     de divisa do #demonstracao). Por isso aqui nao ha sangria nenhuma.
     Recuo sem color-mix primeiro: onde color-mix nao existe, a declaracao
     seguinte e descartada e a mascara ainda funciona. */
  -webkit-mask-image: radial-gradient(86% 124% at 72% 44%, var(--texto), transparent 72%);
  mask-image: radial-gradient(86% 124% at 72% 44%, var(--texto), transparent 72%);
  -webkit-mask-image: radial-gradient(
    86% 124% at 72% 44%,
    var(--texto) 0%,
    color-mix(in srgb, var(--texto) 62%, transparent) 44%,
    transparent 78%
  );
  mask-image: radial-gradient(
    86% 124% at 72% 44%,
    var(--texto) 0%,
    color-mix(in srgb, var(--texto) 62%, transparent) 44%,
    transparent 78%
  );
}

/* Dois veus de token: o horizontal devolve a coluna da chamada ao --sup-1
   puro; o de baixo fecha a ultima faixa, para que nenhum pixel de arte caia
   em cima da sombra de divisa do #demonstracao. */
.conexoes-veu {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right, var(--sup-1) 0%, transparent 50%),
    linear-gradient(to bottom, transparent 68%, var(--sup-1) 100%);
  background:
    linear-gradient(
      to right,
      var(--sup-1) 0%,
      color-mix(in srgb, var(--sup-1) 86%, transparent) 26%,
      transparent 58%
    ),
    linear-gradient(to bottom, transparent 68%, var(--sup-1) 100%);
}

/* O laco de fibra acende no meio da passagem e apaga na saida (.mov-clarear).
   Nunca chega a zero: a arte continua la, so respira. */
.conexoes-halo {
  --mov-opacidade-min: 0.35;
  --mov-opacidade-max: 1;
  position: absolute;
  inset: 0;
  background: radial-gradient(
    38% 52% at 70% 44%,
    var(--verde-vidro),
    transparent 72%
  );
}

/* --- 1.2 Composicao ------------------------------------------------------ */
.conexoes-conteudo {
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  gap: var(--esp-bloco) var(--esp-grid);
  align-items: center;
}

.conexoes-chamada {
  margin: var(--e4) 0 0;
  color: var(--suave);
  font-family: var(--titulo);
  font-size: var(--t3);
  font-weight: var(--p-normal);
  letter-spacing: var(--tk2);
  line-height: 1.1;
}

.conexoes-chamada strong {
  color: var(--texto);
  font-weight: var(--p-max);
}

.conexoes-apoio {
  margin: var(--e5) 0 0;
  color: var(--suave);
  font-size: var(--c3);
  line-height: 1.8;
}

/* --- 1.3 Painel da faixa -------------------------------------------------
   Herda .cartao e .cartao--vidro: o vidro desfoca a arte atras, o que ao
   mesmo tempo da a textura premium e melhora a legibilidade (o desfoque
   derruba os picos de luz das fibras). 78% de --sup-2 sobre o pixel MAIS
   claro da imagem, sem desfoque nenhum, ainda deixa --suave em 5,2:1. */
.conexoes-faixa {
  display: grid;
  gap: var(--e6);
  border-radius: var(--r-xl);
  background: var(--sup-2);
  background: color-mix(in srgb, var(--sup-2) 78%, transparent);
  box-shadow: var(--sombra-3);
}

/* Trilho: a linha que amarra os tres nos. Desenha-se da esquerda para a
   direita conforme a faixa sobe a tela (.mov-fio). */
.conexoes-trilho {
  height: 1px;
  background: linear-gradient(
    to right,
    var(--verde-linha),
    var(--borda-forte) 58%,
    transparent
  );
}

.conexoes-trilhas {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--esp-grid);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Cada trilha pendura um no sobre o trilho. O deslocamento e o proprio
   espaco da grade: --e6 de volta ate o trilho, --e1 para centrar o ponto. */
.conexoes-trilha {
  position: relative;
}

.conexoes-trilha::before {
  content: "";
  position: absolute;
  top: calc((var(--e6) + var(--e1)) * -1);
  left: 0;
  width: var(--e2);
  height: var(--e2);
  border-radius: var(--r-full);
  background: var(--verde);
  box-shadow: 0 0 0 var(--e1) var(--verde-vidro);
}

.conexoes-trilha-rotulo {
  display: flex;
  align-items: center;
  gap: var(--e2);
  margin: 0 0 var(--e5);
}

.conexoes-trilha-rotulo .icone {
  width: 16px;
  height: 16px;
  color: var(--verde);
}

.conexoes-itens {
  margin: 0;
  padding: 0;
  list-style: none;
}

.conexoes-itens > li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--e2);
}

.conexoes-itens > li + li {
  margin-top: var(--e4);
  padding-top: var(--e4);
  border-top: 1px solid var(--borda);
}

.conexoes-nome {
  color: var(--texto);
  font-size: var(--c2);
  font-weight: var(--p-forte);
  letter-spacing: var(--tk3);
  line-height: 1.4;
}

.conexoes-nome small {
  margin-left: var(--e1);
  color: var(--suave);
  font-size: var(--c5);
  font-weight: var(--p-forte);
  letter-spacing: var(--tk-largo);
}

.conexoes-item--acento .conexoes-nome {
  color: var(--verde);
}

.conexoes-papel {
  flex-basis: 100%;
  margin-top: var(--e2);
  color: var(--suave);
  font-size: var(--c3);
  line-height: 1.65;
}

.conexoes-nota {
  margin: 0;
  padding-top: var(--e5);
  border-top: 1px solid var(--borda);
  color: var(--suave);
  font-size: var(--c4);
  line-height: 1.8;
}

.conexoes-nota strong {
  color: var(--texto);
  font-weight: var(--p-forte);
}

/* --- 1.4 Responsivo: 1200 / 980 / 680 / 380 ----------------------------- */
@media (max-width: 1200px) {
  .conexoes-conteudo {
    grid-template-columns: minmax(0, 240px) minmax(0, 1fr);
  }

  .conexoes-trilhas {
    gap: var(--e6);
  }
}

@media (max-width: 980px) {
  .conexoes-conteudo {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Empilhado, a chamada nao fica mais sobre o negativo da arte: o veu passa
     a ser vertical e cobre a faixa inteira. */
  .conexoes-veu {
    background: linear-gradient(
      to bottom,
      var(--sup-1) 0%,
      transparent 34%,
      transparent 68%,
      var(--sup-1) 100%
    );
    background: linear-gradient(
      to bottom,
      var(--sup-1) 0%,
      color-mix(in srgb, var(--sup-1) 78%, transparent) 30%,
      transparent 66%,
      var(--sup-1) 100%
    );
  }

  .conexoes-arte {
    object-position: 66% 44%;
  }
}

@media (max-width: 680px) {
  .conexoes-trilhas {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--e5);
  }

  /* Em coluna unica o no de cada trilha desce para a propria regua. */
  .conexoes-trilha + .conexoes-trilha {
    padding-top: var(--e5);
    border-top: 1px solid var(--borda);
  }

  .conexoes-trilha + .conexoes-trilha::before {
    top: calc(var(--e1) * -1);
  }

  .conexoes-trilha-rotulo {
    margin-bottom: var(--e4);
  }

  .conexoes-arte {
    opacity: 0.44;
  }

  /* No celular o painel ocupa quase toda a largura: desfocar a arte atras
     dele custaria caro e renderia quase nada. */
  .conexoes-faixa {
    backdrop-filter: none;
  }
}

@media (max-width: 380px) {
  .conexoes-faixa {
    gap: var(--e5);
    padding: var(--e5);
  }

  .conexoes-itens > li {
    gap: var(--e1);
  }
}