/* Networking — caça-níquel
   O invólucro é alto, o palco fica grudado na tela e o rolo gira
   conforme a rolagem, deixando um perfil por vez em destaque. Quem move
   o rolo é o assets/js/auvp.js: ele traduz a rolagem numa posição
   contínua (`--pos`, de 0 a n-1) e marca com `esta-ativo` o perfil mais
   perto do centro.

   Sem script a dobra é uma lista comum, com os cinco perfis à mostra de
   uma vez — nada aqui depende do rolo para ser lido. É por isso que o
   estado normal é a lista, e o caça-níquel entra depois, atrás da
   classe `auvp-js`. */
/* Título e texto de apoio à esquerda, o rolo à direita — a mesma
   divisão do FAQ, com as mesmas proporções e o mesmo ponto de quebra. */
/* `start`, e não `center`, é o mesmo alinhamento do FAQ — e é o que tira
   o vão. A coluna da esquerda é curta (título e um parágrafo) e a da
   direita tem a altura do rolo inteiro: centralizada, a esquerda descia
   uns 230px, e o que aparecia embaixo da faixa animada era tela vazia. */
.auvp-net__grade {
  display: grid;
  grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}
.auvp-net__statement {
  font-size: clamp(1.6rem, 3.4vw, 3rem);
  line-height: 1.05;
  letter-spacing: -0.035em;
  max-width: 18ch;
}
.auvp-net__complement {
  max-width: 38ch;
  margin-top: clamp(1rem, 2vw, 1.5rem);
  color: var(--ink-80);
  font-size: var(--fs-small);
  line-height: 1.6;
}

.auvp-net__rolo { display: grid; }
/* Ponto numa coluna, texto na outra. Já foi ponto solto por cima, preso
   ao topo do item — mas o conteúdo é centralizado dentro do lugar, e
   quanto mais alto o lugar, mais o ponto ficava acima da linha do
   título. Em coluna, os dois sobem e descem juntos. */
.auvp-net__item {
  display: grid;
  grid-template-columns: 9px minmax(0, 1fr);
  column-gap: clamp(1.25rem, 3vw, 2rem);
  align-items: start;
  align-content: center;
  padding-block: clamp(1rem, 2vw, 1.5rem);
}
/* O ponto é o que o caça-níquel destaca: apagado nos perfis de fora,
   verde e com halo no que está no centro. */
.auvp-net__dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  /* desce até a linha do título: meia linha do h3, menos meio ponto */
  margin-top: calc(clamp(1.35rem, 2.2vw, 1.8rem) * 0.6 - 4.5px);
  background: var(--line);
  transition: background-color 0.4s var(--ease), box-shadow 0.4s var(--ease), transform 0.4s var(--ease);
}
.auvp-net__copy h3 {
  font-family: var(--display);
  font-size: clamp(1.35rem, 2.2vw, 1.8rem);
  margin-bottom: 0.4rem;
  transition: color 0.4s var(--ease);
}
.auvp-net__copy p {
  font-size: var(--fs-small);
  color: var(--ink-60);
  line-height: 1.65;
  max-width: 44ch;
  transition: color 0.4s var(--ease);
}

/* ---- O caça-níquel, quando há script ----
   A rolagem fica presa aqui até os cinco perfis passarem. Quem segura é
   o par de sempre: um invólucro alto (`__pin`) e, dentro dele, um palco
   grudado no topo (`__palco`) do tamanho de uma tela. Enquanto o
   invólucro atravessa, o palco não sai do lugar — a página parece
   travada e o que anda é só o rolo.

   Esse palco já existiu antes e foi tirado por deixar tela demais em
   branco: um conteúdo de ~500px no meio de 900. A diferença agora é a
   altura do lugar, que saiu de 16svh para 24svh — três deles somam
   quase três quartos da tela, e o palco fica cheio em vez de vazio. */
.auvp-js .auvp-net { padding-block: 0; }
/* A dobra que vem depois não precisa do respiro de cima: o palco já tem
   uma tela inteira, e o que se via entre os dois era o rodapé vazio do
   palco somado a esse respiro. */
.auvp-js .auvp-net + .auvp-section { padding-block-start: 0; }
.auvp-js .auvp-net__pin {
  /* Uma tela para o palco mais um pedaço de rolagem por perfil que falta
     passar. Com cinco perfis dá 100svh + 4 × 40svh: o suficiente para o
     giro ser sentido sem virar um corredor de rolagem. */
  height: calc(100svh + (var(--n, 5) - 1) * 40svh);
}
.auvp-js .auvp-net__palco {
  position: sticky;
  top: 0;
  height: 100svh;
  display: grid;
  align-content: center;
  /* A barra do topo flutua por cima de tudo; o respiro de cima é o que
     impede o rolo de passar por trás dela. Embaixo não há barra nenhuma,
     e o respiro que havia ali só somava ao vão para a dobra seguinte —
     quem fecha a janela por baixo é o esmaecido do mask. */
  padding-block: var(--nav-h) 0;
  box-sizing: border-box;
  overflow: hidden;
}
/* A janela mostra três lugares e o do meio é o que vale. As bordas
   esmaecem, que é o que dá a sensação de rolo girando atrás de uma
   fresta em vez de uma lista andando. */
.auvp-js .auvp-net__janela {
  /* A altura do lugar é fração da tela, não da largura: são três deles
     empilhados dentro de um palco de uma tela, e é a altura que aperta.
     Em `vh` fixos, num celular baixo o terceiro lugar ficava para fora. */
  /* Três lugares de 27svh ocupam ~81% do palco. O número grande serve
     aos dois lados: quanto mais alto o lugar, mais para baixo fica o do
     meio — o que enche o palco no começo e encurta a sobra depois que o
     último perfil passa, quando o lugar de baixo fica vazio. */
  --altura: clamp(120px, 27svh, 280px);
  height: calc(var(--altura) * 3);
  margin-top: 0;
  overflow: hidden;
  /* O halo do ponto em destaque é um box-shadow de 5px, e o ponto começa
     na borda esquerda da janela — sem esta folga o `overflow: hidden`
     cortava o halo ao meio. A margem negativa devolve os 12px, então a
     janela cresce para a esquerda e o conteúdo não sai do lugar. */
  padding-left: 12px;
  margin-left: -12px;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 24%, #000 76%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 24%, #000 76%, transparent 100%);
}
.auvp-js .auvp-net__rolo {
  grid-auto-rows: var(--altura);
  /* Em --pos 0 o primeiro perfil fica no lugar do meio; daí para baixo,
     cada ponto inteiro sobe um lugar. */
  transform: translateY(calc((1 - var(--pos, 0)) * var(--altura)));
}
.auvp-js .auvp-net__item {
  opacity: 0.28;
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
}
.auvp-js .auvp-net__item.esta-ativo { opacity: 1; }
.auvp-js .auvp-net__item.esta-ativo .auvp-net__dot {
  background: var(--verde);
  box-shadow: 0 0 0 5px var(--verde-10);
  transform: scale(1.15);
}

@media (prefers-reduced-motion: reduce) {
  /* Sem o giro, a dobra volta a ser a lista, com todos os perfis à
     mostra e sem janela recortando nada. E sem o palco: prender a
     rolagem numa tela que não gira seria só rolagem perdida. */
  .auvp-js .auvp-net { padding-block: var(--section-y); }
  .auvp-js .auvp-net__pin { height: auto; }
  .auvp-js .auvp-net__palco {
    position: static;
    height: auto;
    padding-block: 0;
    overflow: visible;
  }
  .auvp-js .auvp-net__janela { height: auto; -webkit-mask-image: none; mask-image: none; }
  .auvp-js .auvp-net__rolo { transform: none; grid-auto-rows: auto; }
  .auvp-js .auvp-net__item { opacity: 1; }
}

/* Numa coluna só — que é onde o FAQ também quebra —, o título volta para
   cima do rolo e a janela mostra menos lugares, senão o palco não cabe
   numa tela de celular. */
/* Numa coluna só — que é onde o FAQ também quebra — o título fica acima
   do rolo e sobra bem menos tela para ele. Aqui a janela passa a mostrar
   dois lugares em vez de três, com o perfil da vez no de cima e o
   seguinte espiando embaixo.

   Foi o que resolveu o pior estrago em tela pequena: com três lugares, a
   altura que sobrava para cada um ficava menor que o texto do perfil, e
   os cinco se sobrepunham uns aos outros, ilegíveis. */
@media (max-width: 860px) {
  /* Uma coluna só, e com teto de largura: no tablet, esparramada na
     tela inteira, ela deixava metade da dobra vazia à direita. */
  .auvp-net__grade {
    grid-template-columns: minmax(0, 560px);
    justify-content: center;
    gap: clamp(1.5rem, 4vw, 2.5rem);
  }
  .auvp-net__copy p { font-size: 0.85rem; line-height: 1.5; max-width: none; }
  .auvp-net__complement { max-width: none; }
  .auvp-js .auvp-net__janela {
    /* O teto é alto de propósito: com dois lugares só, um teto baixo
       deixava o palco do tablet meio vazio. Aqui os dois acompanham a
       tela até bem tarde. */
    --altura: clamp(150px, 24svh, 260px);
    height: calc(var(--altura) * 2);
    /* O esmaecido começa tarde de propósito: cortando cedo, o segundo
       lugar sumia quase inteiro e a metade de baixo do palco lia como
       espaço vazio em vez de "tem mais vindo aí". */
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 72%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 0%, #000 72%, transparent 100%);
  }
  /* Com o perfil da vez no primeiro lugar, o deslocamento perde o +1. */
  .auvp-js .auvp-net__rolo { transform: translateY(calc(var(--pos, 0) * var(--altura) * -1)); }

  /* Dois lugares é regra de tela baixa, não de tela estreita. No tablet
     em pé cabem os três de novo — e com dois eles deixavam a metade de
     baixo do palco vazia, que é justamente o que o palco grudado não
     pode fazer. Quem manda aqui é a altura, então o corte é por ela. */
  @media (min-height: 1000px) {
    .auvp-js .auvp-net__janela {
      --altura: clamp(150px, 22svh, 240px);
      height: calc(var(--altura) * 3);
      -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 24%, #000 76%, transparent 100%);
      mask-image: linear-gradient(to bottom, transparent 0%, #000 24%, #000 76%, transparent 100%);
    }
    /* De volta ao lugar do meio: o +1 volta junto. */
    .auvp-js .auvp-net__rolo { transform: translateY(calc((1 - var(--pos, 0)) * var(--altura))); }
  }
}

/* ---- O caça-níquel no celular ----
   O giro e a trava são os mesmos do desktop; o que muda é a conta da
   altura do lugar.

   Em tela grande o lugar é fração da tela (`27svh`) e sobra palco: o que
   fica em volta do rolo é respiro. Num celular não sobra nada, e o
   `24svh` da faixa de 860px deixava a soma (título + dois lugares) bem
   menor que o palco — o resto virava vão, e o pior aparecia depois do
   último perfil, quando o lugar de baixo esvazia: ~360px de nada no
   390x844.

   Aqui o lugar deixa de ser fração da tela e passa a ser o que sobra do
   palco depois do título, dividido pelo número de lugares. O rolo passa
   a preencher o palco em vez de flutuar no meio dele, e o vão que sobrava
   vira o lugar do perfil seguinte — que é conteúdo, não vazio.

   As 13rem são a reserva do bloco de título (o `h2` em duas linhas, o
   parágrafo de apoio e o intervalo entre eles). Se esse texto crescer,
   é esse número que acompanha. */
@media (max-width: 720px) {
  .auvp-js .auvp-net__janela {
    --altura: clamp(120px, calc((100svh - var(--nav-h) - 13rem) / 3), 230px);
    height: calc(var(--altura) * 3);
    /* Três lugares com o da vez no meio, como no desktop: o esmaecido
       volta a ser simétrico. */
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 22%, #000 78%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, #000 22%, #000 78%, transparent 100%);
  }
  .auvp-js .auvp-net__rolo { transform: translateY(calc((1 - var(--pos, 0)) * var(--altura))); }

  /* Celular baixo: com três lugares, o que sobra para cada um fica menor
     que o texto de um perfil e eles se sobrepõem. Aí são dois, com o da
     vez em cima e o seguinte espiando embaixo. */
  @media (max-height: 719px) {
    .auvp-js .auvp-net__janela {
      --altura: clamp(120px, calc((100svh - var(--nav-h) - 13rem) / 2), 200px);
      height: calc(var(--altura) * 2);
      -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 72%, transparent 100%);
      mask-image: linear-gradient(to bottom, #000 0%, #000 72%, transparent 100%);
    }
    .auvp-js .auvp-net__rolo { transform: translateY(calc(var(--pos, 0) * var(--altura) * -1)); }
  }
}