/* Arte da hero de Home (o percurso).
   Carregado SÓ nesta página (inc/head.php). Antes, toda página baixava a
   arte das quatro heros e usava uma: quem abria a home levava junto o
   ciclo, a convergência e a bifurcação sem ver nenhum dos três.
   ⚠️ O que a régua cobra é o TOTAL por página, style.css mais este.
   Dividir para caber no teto seria contornar a régua, não cumpri-la. */

/* ── o fluxo: três nós ligados por um trilho ──────────────────────────── */
/* O grupo é centrado na coluna, e os três cartões têm a MESMA largura. Sem
   isso, centrar cada um deles individualmente desalinharia os ícones — e o
   trilho, que passa pelo eixo deles, deixaria de ser um caminho reto. */
.fluxo {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
}
.fluxo__grupo {
  position: relative;
  display: grid;
  gap: var(--e5);
}
/* O trilho é ITEM do grid, ocupando todas as linhas: assim ele nasce dentro
   do grupo centrado e o deslocamento até o eixo dos ícones volta a ser uma
   conta simples. Posicionado por `left` no palco inteiro, ele ficava ao lado
   do grupo — a linha existia, mas não era o caminho de coisa nenhuma. */
.fluxo__trilho {
  position: absolute;
  left: calc(var(--e3) + 19px);
  top: 32px;      /* meia altura de um cartão: começa no centro do 1º ícone */
  bottom: 32px;   /* e termina no centro do último */
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(to bottom,
      rgb(230 0 126 / .1), rgb(230 0 126 / .55) 18%, rgb(41 171 226 / .55) 82%, rgb(41 171 226 / .1));
  overflow: hidden;
}
/* o pulso que percorre o trilho — a assinatura de movimento desta página:
   o caminho sendo percorrido até o fim, que é literalmente o que o H1 diz */
.fluxo__pulso {
  position: absolute;
  left: -3px;
  width: 8px;
  height: 22%;
  border-radius: 8px;
  background: linear-gradient(to bottom, transparent, var(--branco), transparent);
  opacity: .9;
  top: -22%;
}
@media (prefers-reduced-motion: no-preference) {
  .fluxo__pulso { animation: percorre-o-trilho 4.6s cubic-bezier(.5,0,.5,1) infinite; }}

/* o nó: cartão de vidro. Sem backdrop-filter ele continua legível — o fundo
   translúcido já separa do orbe. */
.no {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--e3);
  padding: var(--e3) var(--e5) var(--e3) var(--e3);
  border-radius: var(--raio-2);
  border: 1px solid rgb(255 255 255 / .12);
  background: rgb(19 43 66 / .72);
  box-shadow: 0 18px 40px -28px rgb(0 0 0 / .9);
  width: min(17.5rem, 78vw);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .no {
    background: rgb(19 43 66 / .46);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
            backdrop-filter: blur(14px) saturate(140%);
  }}
/* os três alinhados: o trilho passa pelo centro dos ícones, e o caminho
   se lê de cima a baixo. Escalonar os cartões deixava a linha solta ao lado
   deles — bonito parado, confuso como percurso. */
.fluxo { gap: var(--e5); }

/* ── a luz que corre na borda dos nós ────────────────────────────────────
   Mesmo princípio do pulso do trilho, agora na moldura: um degradê estreito
   percorre a borda de 1 px e some no resto do caminho. A borda não vira um
   arco-íris parado — ela ACENDE por um trecho e apaga.

   A moldura é um pseudo-elemento com máscara: as duas camadas se cancelam no
   miolo (mask-composite: exclude), sobrando só a borda. É isso que permite o
   cartão continuar de vidro por dentro — a técnica das duas camadas de
   background exigiria um fundo opaco e mataria o backdrop-filter.

   Sentidos alternados de propósito: com todos correndo para o mesmo lado, os
   três viram uma esteira; alternando, cada cartão respira por conta. */
.no::before {
  content: "";
  position: absolute;
  /* -1px porque o elemento posicionado se mede pelo padding box: com inset 0
     a luz corria DENTRO da borda de 1 px e o conjunto lia como 2 px. Assim
     ela ocupa exatamente a borda, e a espessura é a mesma. */
  inset: -1px;
  border-radius: calc(var(--raio-2) + 1px);
  padding: 1px;
  /* BRILHO, não destaque: um branco de baixa opacidade passando por cima da
     borda. Com Pink e Sky aqui a moldura virava um segundo elemento colorido
     disputando com o ícone e com o botão — e a página já tem dois lugares em
     que essas cores significam alguma coisa. */
  background: linear-gradient(115deg,
      transparent 38%,
      rgb(255 255 255 / .5) 50%,
      transparent 62%);
  background-size: 320% 100%;
  background-position: 100% 0;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  opacity: .75;
}
/* VAI E VOLTA, e não em laço.
   Com `infinite` simples, a luz saía por um lado e reaparecia no outro: entre
   uma coisa e outra ela ficava fora do cartão, e a leitura era "congelou e
   recomeçou". Com `alternate` ela percorre a borda e retorna pelo mesmo
   caminho — não existe ponto de emenda para o olho achar.
   O `ease-in-out` desacelera nas pontas, que é onde o sentido inverte; como
   as pontas ficam um pouco além da borda, a desaceleração acontece fora da
   vista e o movimento parece contínuo. */
@media (prefers-reduced-motion: no-preference) {
  .no--1::before { animation: correr-borda 15s ease-in-out infinite alternate; }
  .no--2::before { animation: correr-borda 17s ease-in-out infinite alternate-reverse; animation-delay: -6s; }
  .no--3::before { animation: correr-borda 13s ease-in-out infinite alternate; animation-delay: -9s; }}

.no__icone {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border-radius: 13px;
  background: linear-gradient(140deg, rgb(230 0 126 / .22), rgb(41 171 226 / .18));
  border: 1px solid rgb(255 255 255 / .1);
  color: var(--pink-300);
}
.no--3 .no__icone { color: var(--sky-500); }
.no__icone svg { width: 24px; height: 24px; }

.no__texto { display: grid; gap: 2px; line-height: 1.25; }
.no__texto b { font-family: var(--fonte-titulo); font-size: var(--t2); color: var(--branco); }
.no__texto i { font-style: normal; font-size: var(--t1); color: var(--navy-200); }@media (max-width: 1023px) {
  /* o caminho primeiro, os indicadores depois: no HTML eles vêm antes porque
     no desktop ocupam os cantos de cima e de baixo — aqui a leitura é vertical
     e o percurso é que abre o assunto */
  .fluxo { position: static; order: 1; }
  .fluxo__grupo { margin-inline: auto; }}@media (min-width: 1024px) {
  .fluxo { justify-items: start; }
  .fluxo { gap: var(--e6); }}