/* --------------------------------------------------------------------------
   A rede dentro da conversa: componentes/rede.php

   Capitulo ESCURO (--sup-0) entre dois capitulos claros (#demonstracao acima,
   #experiencias abaixo). As duas divisas sao deduzidas pela vizinhanca em
   css/site.css (secao 05): aqui nao ha, e nao pode haver, nenhum ::before de
   sangria, gradiente de transicao ou fio na borda da secao.

   Consequencia de composicao: os ~130px do topo e da base ficam sob a sombra
   de divisa. Nada de grafico sutil rente a borda: as camadas de fundo comecam
   depois da divisa (ver .rede-atmosfera) e o conteudo vive no miolo.

   Escada de superficie usada aqui, agora que a secao e --sup-0:
     pagina --sup-0  ->  palco --sup-1  ->  no/cartao --sup-2  ->  critico --sup-3
   -------------------------------------------------------------------------- */
.secao-rede {
  background: var(--sup-0);
  /* Contem a deriva das camadas de parallax; sem isto o fundo empurra a
     largura da pagina no mobile. */
  /* clip, e nao hidden: `hidden` cria scrollport e as timelines de view()
     daqui para dentro passam a medir esta caixa, que nunca rola, e o
     movimento congela. Nota longa em css/sec-conexoes.css. */
  overflow: hidden;
  overflow: clip;
}

/* --- 3.0 Atmosfera: profundidade do vao escuro ---------------------------
   Duas camadas com forcas diferentes: a malha corre mais que o halo, o halo
   corre mais que o palco. E o que faz a secao ter fundo, meio e frente.
   O `inset` vertical mantem tudo fora da faixa da divisa. */
.rede-atmosfera {
  position: absolute;
  z-index: 0;
  inset: calc(var(--divisa-altura) * 1.2) 0;
  pointer-events: none;
}

.rede-atmosfera > * {
  position: absolute;
  inset: 0;
  display: block;
}

/* Fundo: prancha tecnica, bem apagada. Passo da malha vem do espaco. */
.rede-malha {
  --mov-forca: 7%;
  opacity: 0.6;
  background-image:
    repeating-linear-gradient(90deg, var(--borda) 0 1px, transparent 1px var(--e9)),
    repeating-linear-gradient(var(--borda) 0 1px, transparent 1px var(--e9));
  -webkit-mask-image: radial-gradient(
    116% 54% at 50% 50%,
    var(--texto),
    transparent 74%
  );
  mask-image: radial-gradient(116% 54% at 50% 50%, var(--texto), transparent 74%);
}

/* Meio: dois nucleos de luz verde. O brilho acende no meio da passagem e
   volta ao repouso. E comportamento de sinal, nao de enfeite piscando. */
.rede-halo {
  --mov-forca: 4%;
}

.rede-halo-nucleo {
  --mov-opacidade-min: 0.35;
  --mov-opacidade-max: 1;
  position: absolute;
  inset: 0;
  background:
    radial-gradient(52% 42% at 16% 24%, var(--verde-vidro), transparent 70%),
    radial-gradient(48% 40% at 86% 76%, var(--verde-vidro), transparent 72%);
}

/* --- 3.1 Palco: o diagrama ------------------------------------------------
   Painel --sup-1 sobre a pagina --sup-0: lifta pela superficie, pela borda e
   pela sombra, sem precisar de contraste inventado. A malha do fundo da o ar
   de prancha tecnica. */
.rede-palco {
  --mov-forca: 1.4%;
  position: relative;
  /* clip, e nao hidden: `hidden` cria scrollport e as timelines de view()
     daqui para dentro passam a medir esta caixa, que nunca rola, e o
     movimento congela. Nota longa em css/sec-conexoes.css. */
  overflow: hidden;
  overflow: clip;
  margin: 0;
  padding: var(--e6);
  border: 1px solid var(--borda-forte);
  border-radius: var(--r-xl);
  background: var(--sup-1);
  box-shadow: var(--sombra-3);
}

.rede-palco::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.55;
  background-image:
    repeating-linear-gradient(
      90deg,
      var(--borda) 0 1px,
      transparent 1px 48px
    ),
    repeating-linear-gradient(var(--borda) 0 1px, transparent 1px 48px);
  -webkit-mask-image: radial-gradient(
    80% 70% at 50% 40%,
    var(--texto),
    transparent
  );
  mask-image: radial-gradient(80% 70% at 50% 40%, var(--texto), transparent);
  pointer-events: none;
}

.rede-palco > * {
  position: relative;
  z-index: 1;
}

/* Terceira camada de profundidade, desta vez dentro do painel: a luz corre
   mais que o proprio painel e acende na passagem. */
.rede-palco > .rede-palco-profundidade {
  --mov-forca: 9%;
  position: absolute;
  z-index: 0;
  inset: calc(var(--e9) * -1) 0;
  display: block;
  pointer-events: none;
}

.rede-palco-luz {
  --mov-opacidade-min: 0.3;
  --mov-opacidade-max: 1;
  position: absolute;
  inset: 0;
  display: block;
  background:
    radial-gradient(58% 54% at 20% 36%, var(--verde-vidro), transparent 72%),
    radial-gradient(64% 58% at 88% 88%, var(--verde-vidro), transparent 74%);
}

.rede-palco-topo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--e3) var(--e5);
  margin-bottom: var(--e6);
}

.rede-palco-base {
  margin-top: var(--e6);
  padding-top: var(--e5);
  border-top: 1px solid var(--borda);
  color: var(--suave);
  font-size: var(--c4);
  line-height: 1.75;
}

.rede-palco-base strong {
  color: var(--texto);
  font-weight: var(--p-forte);
}

/* --- 3.2 Cadeia Concentrador -> OLT/PON -> ONU -> CPE -> Wi-Fi ------------ */
.rede-cadeia {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--e6);
  counter-reset: cadeia;
  margin: 0;
  padding: 0;
  list-style: none;
}

.rede-no {
  position: relative;
  display: grid;
  gap: var(--e3);
  align-content: start;
  counter-increment: cadeia;
  padding: var(--e5);
  border: 1px solid var(--borda);
  border-radius: var(--r-md);
  background: var(--sup-2);
}

/* Conector entre dois nos: fio de 1px terminando em um ponto de ligacao. */
.rede-no::before {
  content: "";
  position: absolute;
  top: calc(var(--e5) + 18px);
  right: 100%;
  width: var(--e6);
  height: 7px;
  background:
    radial-gradient(circle, var(--verde) 0 3px, transparent 3.5px) right center /
      7px 7px no-repeat,
    linear-gradient(90deg, var(--borda-forte), var(--verde-linha)) left center /
      100% 1px no-repeat;
  pointer-events: none;
}

.rede-no:first-child::before {
  content: none;
}

/* A cadeia se MONTA quando entra, em vez de ja estar pronta. E o gesto que a
   propria legenda promete ("montada sozinha enquanto a mensagem ainda esta
   sendo lida"), entao aqui o movimento nao e enfeite: ele diz o que o texto
   diz. Cada fio corre da esquerda para a direita, na ordem em que um tecnico
   percorreria: concentrador, OLT, ONU, CPE, Wi-Fi.

   Timeline de scroll: roda no compositor, sem listener e sem rAF. Onde o
   navegador nao suporta, ou onde o sistema pede menos movimento, os fios
   simplesmente ja estao desenhados, que e o estado final de qualquer jeito. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .rede-no::before {
      transform-origin: left center;
      scale: 0 1;
      animation: rede-elo linear both;
      animation-timeline: view();
      animation-range: entry 25% entry 70%;
    }

    @keyframes rede-elo {
      to {
        scale: 1 1;
      }
    }

    /* Na coluna unica cada no entra na sua vez e o escalonamento vem de graca:
       o `view()` de cada no ja e uma timeline diferente. Em linha os cinco sao
       a MESMA linha, entram juntos, e o atraso tem de ser escrito.

       Aqui a timeline muda de dono, e essa e a parte que importa. Medir cada
       no contra si mesmo da uma fase `entry` do tamanho do proprio no. Sao
       180px, e 45% disso sao 80px de rolagem: o fio nao desenha, ele PISCA, e o
       escalonamento de 8% vira 14px, que ninguem ve. Entao a cadeia inteira
       publica uma timeline nomeada e os quatro fios se penduram nela, na fase
       `cover`, que vale altura da janela + altura da cadeia (980px nesta tela).
       A montagem passa a ocupar ~450px de rolagem e cada fio comeca 8% depois
       do anterior, da esquerda para a direita, na ordem em que um tecnico
       percorreria a rede. A janela de 12% e o ponto em que a revelacao dos
       cartoes acabou de disparar: os nos aparecem, e SO ENTAO os fios correm
       entre eles. */
    @media (min-width: 981px) {
      .rede-cadeia {
        view-timeline-name: --rede-cadeia;
      }

      .rede-no::before {
        animation-timeline: --rede-cadeia;
        animation-range: cover 12% cover 34%;
      }

      .rede-no:nth-child(3)::before {
        animation-range: cover 20% cover 42%;
      }

      .rede-no:nth-child(4)::before {
        animation-range: cover 28% cover 50%;
      }

      .rede-no:nth-child(5)::before {
        animation-range: cover 36% cover 58%;
      }
    }

    /* O trilho vertical da versao empilhada desce junto com a leitura. */
    @media (max-width: 980px) {
      .rede-cadeia::before {
        transform-origin: center top;
        scale: 1 0;
        animation: rede-trilho linear both;
        animation-timeline: view();
        animation-range: entry 10% cover 35%;
      }

      @keyframes rede-trilho {
        to {
          scale: 1 1;
        }
      }
    }
  }
}

/* Barra de estado no topo do no. E um elemento, e nao um ::after, para poder
   receber .mov-fio: a barra se desenha da esquerda para a direita conforme o
   no entra, a leitura chegando. Sem vermelho na paleta, a severidade e
   monocromatica: fio verde (ok) -> tracejado --suave (atencao) -> barra
   solida --texto (critico). */
.rede-no-barra {
  position: absolute;
  inset: 0 0 auto;
  display: block;
  height: 2px;
  border-radius: var(--r-full) var(--r-full) 0 0;
  background: var(--verde-linha);
  pointer-events: none;
}

.rede-no-icone {
  position: relative;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--verde-linha);
  border-radius: var(--r-sm);
  background: var(--verde-vidro);
  color: var(--verde);
}

.rede-no-icone .icone {
  width: 19px;
  height: 19px;
}

/* Ordinal da etapa. */
.rede-no-icone::after {
  content: counter(cadeia);
  position: absolute;
  top: calc(var(--e2) * -1);
  right: calc(var(--e2) * -1);
  display: grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  padding-inline: var(--e1);
  border: 1px solid var(--borda-forte);
  border-radius: var(--r-full);
  background: var(--sup-3);
  color: var(--suave);
  font-size: var(--c5);
  font-weight: var(--p-forte);
  line-height: 1;
}

.rede-no > strong {
  color: var(--texto);
  font-size: var(--c3);
  font-weight: var(--p-max);
  letter-spacing: var(--tk3);
  line-height: 1.3;
}

.rede-no-dado {
  color: var(--suave);
  font-size: var(--c5);
  font-weight: var(--p-forte);
  letter-spacing: var(--tk-largo);
  line-height: 1.5;
  text-transform: uppercase;
}

.rede-no-valor {
  color: var(--suave);
  font-size: var(--c3);
  font-weight: var(--p-medio);
  line-height: 1.5;
  overflow-wrap: anywhere;
}

/* Estado: atencao */
.rede-no--atencao {
  border-color: var(--borda-forte);
}

.rede-no--atencao .rede-no-barra {
  background: repeating-linear-gradient(
    90deg,
    var(--suave) 0 6px,
    transparent 6px 12px
  );
}

.rede-no--atencao .rede-no-icone {
  border-color: var(--borda-forte);
  background: var(--sup-3);
  color: var(--suave);
}

.rede-no--atencao .rede-no-valor {
  color: var(--texto);
  font-weight: var(--p-forte);
}

/* Estado: critico */
.rede-no--critico {
  border-color: var(--borda-forte);
  background: var(--sup-3);
  box-shadow: var(--sombra-2);
}

.rede-no--critico .rede-no-barra {
  background: var(--texto);
}

.rede-no--critico .rede-no-icone {
  border-color: var(--texto);
  background: transparent;
  color: var(--texto);
}

.rede-no--critico .rede-no-valor {
  color: var(--texto);
  font-weight: var(--p-max);
}

/* --- 3.3 Diagnostico + acoes --------------------------------------------- */
.rede-corpo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--esp-grid);
  align-items: start;
  margin-top: var(--esp-bloco);
}

/* So o paragrafo NU. Ver a nota de .dupla-texto p:not([class]) em
   css/pagina.css. Seletor de elemento pesa (0,1,1) e vence calado o
   .nota e o .sobretitulo, que pesam (0,1,0). */
.rede-alertas > p:not([class]),
.rede-acoes > p:not([class]) {
  margin-top: var(--e4);
  font-size: var(--c3);
  line-height: 1.8;
}

.rede-alertas > ul {
  display: grid;
  gap: var(--e4);
  margin: var(--e6) 0 0;
  padding: 0;
  list-style: none;
}

.rede-alerta {
  position: relative;
  padding: var(--e5) var(--e5) var(--e5) var(--e6);
  border: 1px solid var(--borda);
  border-radius: var(--r-md);
  background: var(--sup-2);
  transition: border-color var(--dur-2) var(--ease);
}

.rede-alerta:hover {
  border-color: var(--borda-forte);
}

.rede-alerta::before {
  content: "";
  position: absolute;
  inset: var(--e4) auto var(--e4) var(--e4);
  width: 2px;
  border-radius: var(--r-full);
  background: var(--suave);
}

.rede-alerta--atencao::before {
  background: repeating-linear-gradient(
    var(--suave) 0 5px,
    transparent 5px 10px
  );
}

.rede-alerta--critico::before {
  background: var(--texto);
}

.rede-alerta strong {
  display: block;
  margin-bottom: var(--e1);
  color: var(--texto);
  font-size: var(--c3);
  font-weight: var(--p-forte);
  letter-spacing: var(--tk3);
  line-height: 1.4;
}

.rede-alerta span {
  display: block;
  color: var(--suave);
  font-size: var(--c4);
  line-height: 1.75;
}

.rede-alertas > .nota {
  margin-top: var(--e5);
}

.rede-acoes > .grade {
  gap: var(--e5);
  margin-top: var(--e6);
}

.rede-acoes .cartao {
  display: grid;
  gap: var(--e4);
  align-content: start;
}

.rede-acoes h4 {
  margin: 0;
  color: var(--texto);
  font-family: var(--titulo);
  font-size: var(--t5);
  font-weight: var(--p-forte);
  letter-spacing: var(--tk3);
  line-height: 1.35;
}

.rede-acoes .cartao p {
  font-size: var(--c3);
  line-height: 1.75;
}

/* Nao usar flex: o <strong> e os nos de texto viram itens de flex e a frase
   quebra em colunas. O icone sai do fluxo e o texto continua inline. */
.rede-acoes-nota {
  position: relative;
  margin-top: var(--e5);
  padding: var(--e5) var(--e5) var(--e5) calc(var(--e5) + var(--e6));
  border: 1px solid var(--borda);
  border-radius: var(--r-md);
  background: var(--sup-2);
  color: var(--suave);
  font-size: var(--c4);
  line-height: 1.75;
}

.rede-acoes-nota .icone {
  position: absolute;
  top: calc(var(--e5) + 2px);
  left: var(--e5);
  width: 18px;
  height: 18px;
  color: var(--verde);
}

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

/* --- 3.4 ERPs ------------------------------------------------------------
   A regua que abre o bloco e um elemento com .mov-fio: risca da esquerda para
   a direita quando entra, em vez de ja estar la. E divisa interna do capitulo,
   nada a ver com a divisa entre capitulos. */
.rede-erps {
  position: relative;
  margin-top: var(--esp-bloco);
  padding-top: var(--esp-bloco);
}

.rede-regua {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 1px;
  background: linear-gradient(
    90deg,
    var(--verde-linha),
    var(--borda) 34%,
    var(--borda)
  );
  pointer-events: none;
}

.rede-erps-intro {
  display: grid;
  grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
  gap: var(--e4) var(--esp-grid);
  align-items: baseline;
  margin-bottom: var(--e6);
}

.rede-erps-intro p {
  max-width: 70ch;
  font-size: var(--c3);
  line-height: 1.8;
}

.rede-erps-grade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
  gap: var(--e5);
  margin: 0;
  padding: 0;
  list-style: none;
}

.rede-erps-grade > li {
  display: grid;
  gap: var(--e3);
  align-content: start;
  justify-items: start;
  padding: var(--e5);
  transition:
    border-color var(--dur-2) var(--ease),
    background var(--dur-2) var(--ease);
}

.rede-erps-grade > li:hover {
  border-color: var(--borda-forte);
  background: var(--sup-3);
}

.rede-erps-grade > li > strong {
  color: var(--texto);
  font-family: var(--titulo);
  font-size: var(--t5);
  font-weight: var(--p-max);
  letter-spacing: var(--tk3);
  line-height: 1.2;
}

.rede-erp-nota {
  color: var(--suave);
  font-size: var(--c4);
  line-height: 1.6;
}

.rede-erps-grade .selo {
  white-space: normal;
}

.rede-erps .nota {
  max-width: 96ch;
  margin-top: var(--e5);
}

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

/* --------------------------------------------------------------------------
   05. Responsivo: 1200 / 980 / 680 / 380
   -------------------------------------------------------------------------- */
@media (max-width: 1200px) {
  .rede-cadeia {
      gap: var(--e5);
    }

  .rede-no {
      padding: var(--e4);
    }

  .rede-no::before {
      top: calc(var(--e4) + 18px);
      width: var(--e5);
    }
}

@media (max-width: 980px) {
  .rede-palco {
      padding: var(--e5);
    }

  /* Cadeia vertical: o conector vira uma espinha lateral. */
  .rede-cadeia {
      position: relative;
      grid-template-columns: minmax(0, 1fr);
      gap: var(--e4);
      padding-left: var(--e6);
    }

  .rede-cadeia::before {
      content: "";
      position: absolute;
      top: var(--e5);
      bottom: var(--e5);
      left: 3px;
      width: 1px;
      background: linear-gradient(var(--verde-linha), var(--borda-forte));
      pointer-events: none;
    }

  .rede-no {
      grid-template-columns: auto minmax(0, 1fr) auto;
      grid-template-areas:
        "ico nome valor"
        "ico dado valor";
      gap: var(--e1) var(--e4);
      align-items: center;
      padding: var(--e4) var(--e5);
    }

  .rede-no::before,
    .rede-no:first-child::before {
      content: "";
      top: 50%;
      right: auto;
      left: calc(var(--e6) * -1);
      width: var(--e6);
      margin-top: -3px;
      background:
        radial-gradient(circle, var(--verde) 0 3px, transparent 3.5px) right
          center / 7px 7px no-repeat,
        linear-gradient(90deg, var(--borda-forte), var(--verde-linha)) left center /
          100% 1px no-repeat;
    }

  .rede-no-icone {
      grid-area: ico;
    }

  .rede-no > strong {
      grid-area: nome;
    }

  .rede-no-dado {
      grid-area: dado;
    }

  .rede-no-valor {
      grid-area: valor;
      text-align: right;
    }

  .rede-corpo {
      grid-template-columns: minmax(0, 1fr);
    }

  .rede-erps-intro {
      grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 680px) {
  /* Tela estreita: a secao ja e alta e as duas divisas comem mais da altura
     visivel. A atmosfera perde forca para nao competir com o texto. */
  .rede-malha {
      --mov-forca: 4%;
      opacity: 0.4;
    }

  .rede-halo {
      --mov-forca: 2.5%;
    }

  .rede-palco {
      padding: var(--e4);
      border-radius: var(--r-lg);
    }

  .rede-cadeia {
      padding-left: var(--e5);
    }

  .rede-no {
      grid-template-columns: auto minmax(0, 1fr);
      grid-template-areas:
        "ico nome"
        "ico dado"
        "ico valor";
      align-items: start;
      gap: var(--e1) var(--e3);
      padding: var(--e4);
    }

  .rede-no::before,
    .rede-no:first-child::before {
      left: calc(var(--e5) * -1);
      width: var(--e5);
    }

  .rede-no-icone {
      align-self: center;
    }

  .rede-no-valor {
      text-align: left;
    }

  .rede-alerta {
      padding: var(--e4) var(--e4) var(--e4) var(--e5);
    }

  .rede-alerta::before {
      inset: var(--e3) auto var(--e3) var(--e3);
    }
}

@media (max-width: 380px) {
  .rede-palco {
      padding: var(--e3);
    }

  .rede-cadeia {
      padding-left: var(--e4);
    }

  .rede-no::before,
    .rede-no:first-child::before {
      left: calc(var(--e4) * -1);
      width: var(--e4);
    }

  .rede-erps-grade > li,
    .rede-no {
      padding: var(--e3);
    }
}