/* =============================================================================
   A MATERIA LIQUIDA
   =============================================================================
   Briefing: "Sai o cerebro. Entra uma massa liquida preta, tipo simbionte do
   Venom, que escorre pela pagina e se remonta em outra coisa a cada secao."

   O ROTEIRO EM QUATRO TEMPOS, dele:
     1. abertura: a massa toma a tela inteira, se recolhe e revela a pagina
     2. primeira secao: massa preta, escrita do heroi por cima
     3. transicao: ela ESCORRE pra baixo, ainda preta
     4. secoes seguintes: ela VIRA AMARELA, com ancoras pretas

   E O QUINTO TEMPO, QUE E O TESTE DO SITE INTEIRO. "Trocando a logo, isso poderia
   ser o site de qualquer outra empresa de IA?" A resposta e uma so: a materia
   deixa de ser mancha e vira A LISTA RANQUEADA. Se ela so rolar bonito, e mais um
   site com blob.

   SVG COM FILTRO, E NAO CANVAS NEM WEBGPU, pela falha visivel: canvas que quebra e
   retangulo vazio, WebGPU aqui renderiza por software, e SVG que quebra deixa as
   manchas SOLIDAS -- perde a fusao, nao perde a pagina. O gooey (blur + contraste
   no alfa) e uniao de campo de distancia, e e o que forma o PESCOCO CONCAVO entre
   duas manchas; sem ele "vira balao de festa", nas palavras dele.
   CUSTO: tudo e `animation-timeline`, sem rAF e sem laco. Pagina parada = zero
   repaint, que e o que torna isto aceitavel numa maquina de 4 GB.
   ============================================================================= */

/* O CONTRATO DE EMPILHAMENTO, e ele nao e opcional: `.materia` e absoluta com
   z-index 0 e isso CRIA CONTEXTO DE EMPILHAMENTO -- ela pinta acima de qualquer
   bloco em fluxo normal nao posicionado, mesmo que o bloco venha depois no HTML.
   Sem a linha abaixo a massa cobre o TEXTO da secao. A correcao mora AQUI. */
section > .col { position: relative; z-index: 1; }

/* ONDE O GOOEY PODE ENTRAR, E SO ONDE: FUNDO (as manchas) e DIVISOR DE SECAO.
   O motivo e medido: blur MOVE A PONTA. Numa barra cuja largura E a nota, a ponta
   borrada empurra o 89 pra perto do 85 e a pagina mente por meio pixel; na lista
   de dez, vizinhas de 4px, elas se fundiram numa mancha preta unica -- o pescoco
   concavo que faz a massa parecer liquida e exatamente o que apaga a distancia
   entre duas notas. Decoracao pode fundir; dado, nunca. */

/* o filtro mora num <svg> escondido no HTML; aqui so o consumo */
.materia {
  position: absolute; inset: 0; z-index: 0;
  pointer-events: none;
  isolation: isolate;   /* o filtro nao pode vazar pro texto que fica por cima */
  filter: url(#gooey);
}
/* sem filtro de SVG em HTML as manchas ficam solidas e visiveis: degradacao
   escolhida, nao acidente */
@supports not (filter: url(#gooey)) {
  .materia { filter: none; opacity: .92; }
}

/* A PROIBICAO, EM REGRA E NAO EM COMENTARIO. Tudo que carrega valor -- barra,
   trilha, fio do piso, razao contabil, linha de razao -- fica fora de qualquer
   filtro, e o `!important` esta aqui de proposito: comentario nao impede copia, e
   esta linha ja foi violada em duas paginas.
   A LISTA PROTEGE .conta-tab E NAO .conta: a tabela nem sempre vem dentro do
   envolucro .razao (no cartaz de index.html ela mora solta dentro da secao), e
   `.conta` era um nome sem uso nenhum no markup -- ou seja, a protecao estava
   escrita pra um seletor que nunca casava e a peca mais importante do site
   ficava de fora dela justamente na pagina onde ela e maior.
   O QUE A REGRA NAO ALCANCA, e por isso vai escrito: filtro nao se desfaz de
   dentro. Elemento com valor que seja DESCENDENTE de `.materia` e renderizado
   pelo filtro do pai, e nenhuma declaracao no filho o tira de la. Regra de
   markup, para os donos de pagina: nada de barra, nota ou conta dentro de
   `.materia`. */
.barras, .barras *, .conta-tab, .conta-tab *, .razao, .razao *,
.linhas, .linhas *, hr {
  filter: none !important;
}

/* NAO PONHA UM VELO DENTRO DE .materia: em 12/08 isso piorou de 9 pra 20 trechos
   com contraste ruim. Filho de elemento com filter passa pelo gooey, e o
   feColorMatrix multiplica o alfa por 20 -- qualquer alfa acima de ~0,5 vira 1, e
   o velo translucido vira retangulo OPACO. Velo, se precisar, e IRMAO de .materia. */

.mancha {
  position: absolute;
  /* a forma nao e circulo: circulo perfeito le como bolha de sabao. Assimetria
     sutil, e ela pode ser em porcentagem aqui porque a mancha e quase quadrada
     (vmax x vmax) -- em elemento largo e baixo porcentagem sempre da elipse. */
  border-radius: 42% 58% 55% 45% / 52% 44% 56% 48%;
  background: var(--materia-cor, var(--tinta));
  will-change: transform;
}

/* ============================================================ 1. ABERTURA
   PRAZO MAXIMO OBRIGATORIO, do briefing: sem ele, navegador sem WebGPU fica com
   tela preta pra sempre. O prazo nao depende de JS -- e animacao CSS com
   `forwards`, que termina sozinha mesmo se o script nunca rodar.
   A duracao esta escrita UMA VEZ SO, na linha `animation` abaixo: comentario que
   cita duracao vira mentira no primeiro ajuste, e ja virou (era 1500ms). A cortina
   existe pra emendar na massa do heroi, nao pra se apresentar. */
.cortina {
  position: fixed; inset: 0; z-index: 90;
  background: var(--tinta);
  pointer-events: none;
  transform-origin: top;
  animation: cortina-sai 900ms cubic-bezier(.76, 0, .24, 1) forwards;
}
/* a borda de baixo e uma gota que escorre, nao uma linha reta: e o que faz "a
   massa se recolhendo" em vez de "uma div subindo" */
.cortina::after {
  content: ""; position: absolute; left: 0; right: 0; top: 100%;
  height: 14vh;
  background: var(--tinta);
  border-radius: 0 0 46% 54% / 0 0 100% 100%;
}
@keyframes cortina-sai {
  0%   { transform: translateY(0); }
  55%  { transform: translateY(-8%); }
  100% { transform: translateY(-118%); }
}
/* quem pediu menos movimento nao ve cortina nenhuma. Nao e "cortina mais rapida":
   e cortina que nunca existiu, senao o primeiro frame ja e um flash. */
@media (prefers-reduced-motion: reduce) {
  .cortina { display: none; }
}

/* ============================================== 2 e 3. O HEROI E O ESCORRER
   As manchas descem e AFINAM: scaleY cresce enquanto scaleX diminui, e e isso que
   le como esticar em vez de encolher -- massa que se conserva.
   A massa do heroi e UM TOM ACIMA do chao escuro: com o heroi tambem preto, massa
   em --tinta seria invisivel e nao haveria forma pra o realce escorregar.
   --tinta-2 e a menor diferenca que ainda desenha a silhueta. */
.materia--heroi { --materia-cor: var(--tinta-2); }
.materia--heroi .m1 { width: 46vmax; height: 46vmax; left: -6vw; top: -8vh; }
.materia--heroi .m2 { width: 30vmax; height: 30vmax; right: -4vw; top: 14vh; }
.materia--heroi .m3 { width: 18vmax; height: 18vmax; left: 42vw; top: 46vh; }

@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .materia--heroi .mancha {
      animation: escorre linear both;
      animation-timeline: scroll(root);
      animation-range: 0 96vh;
    }
    @keyframes escorre {
      to { transform: translateY(58vh) scaleY(1.55) scaleX(.72); }
    }
    .materia--heroi .m2 { animation-range: 0 108vh; }
    /* a m3 e a GOTA QUE SE SOLTA E CHEGA ATRASADA, que segundo o briefing e o
       detalhe que mais faz ler como liquido */
    .materia--heroi .m3 {
      animation-name: gota-solta;
      animation-range: 6vh 120vh;
    }
    @keyframes gota-solta {
      0%   { transform: translateY(0) scale(1); }
      42%  { transform: translateY(16vh) scaleY(1.9) scaleX(.5); }  /* o pescoco */
      58%  { transform: translateY(34vh) scale(.86); }              /* soltou */
      100% { transform: translateY(96vh) scale(.8); }
    }

    /* rotacao lenta e continua, do briefing ("as manchas rolam e giram pelo site
       inteiro"). Vem do SCROLL, nao de laco: girar parado seria protetor de tela. */
    .materia--secao .mancha {
      animation: roda linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 100%;
    }
    @keyframes roda {
      from { transform: rotate(-14deg) translateY(6vh) scale(.94); }
      to   { transform: rotate(16deg) translateY(-6vh) scale(1.06); }
    }
  }
}

/* ================================================ 4. A VIRADA PRA VERDE
   "Ela vira verde, com ancoras pretas. Essa inversao e a virada dramatica do
   site." Com a secao inteira verde (secoes.css, .sec-virada), a massa passa a ser
   TOM SOBRE TOM: --verde-2 desenha silhueta sem criar um segundo fundo por baixo
   do texto. Era isso que produzia os 8 trechos abaixo de 3:1. */
.materia--secao { --materia-cor: var(--verde-2); }
.materia--secao .m1 { width: 34vmax; height: 34vmax; right: -10vw; top: -6vh; }
.materia--secao .m2 { width: 20vmax; height: 20vmax; right: 12vw; top: 30vh; }

/* A ANCORA VAI PRO PE DA SECAO, e nao no meio dela. Ela estava em `top: 12vh`, e
   em 1366 isso a punha DENTRO da coluna de leitura: como a ancora e preta e o texto
   da secao verde e preto, o resultado nao era texto coberto, era texto
   CAMUFLADO. "a garantia" virou "A GARANT" na captura, e o medidor tinha acusado
   1,69:1 -- eu quase descartei como artefato, e ele estava certo. */
.materia--secao .ancora {
  position: absolute; width: 7vmax; height: 7vmax;
  right: 16vw; top: auto; bottom: 4vh;
  background: var(--tinta);
  border-radius: 48% 52% 45% 55% / 55% 46% 54% 45%;
}

/* variante espelhada, pra o olho nao decorar o padrao */
.materia--esq .m1 { right: auto; left: -12vw; }
.materia--esq .m2 { right: auto; left: 10vw; }
.materia--esq .ancora { right: auto; left: 15vw; }

/* ============================================ O REFLEXO: "reflexo, nao cor"
   O realce fica FORA do filtro gooey de proposito: dentro dele, o contraste do
   canal alfa comeria o degrade e o realce viraria uma mancha chapada. */
.brilho {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  mix-blend-mode: soft-light;
  background:
    radial-gradient(38% 26% at 26% 16%, rgba(255,255,255,.9), transparent 70%),
    radial-gradient(22% 16% at 72% 62%, rgba(255,255,255,.55), transparent 72%);
}
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .brilho {
      animation: realce linear both;
      animation-timeline: scroll(root);
      animation-range: 0 140vh;
    }
    /* o realce escorrega na superficie: ele se move em direcao DIFERENTE da massa,
       senao parece adesivo colado nela */
    @keyframes realce {
      to { transform: translate3d(6vw, 22vh, 0) scale(1.25); }
    }
  }
}

/* ================================================== O CANONICO DA BARRA
   =============================================================================
   UM desenho de barra pro site inteiro, e ele mora aqui porque a barra E a materia:
   a massa deixa de ser mancha e vira a lista ranqueada. Antes as dez barras
   nasciam grudadas pelo gooey e se separavam com o scroll; era bonito e era
   mentira, porque durante o gesto inteiro a largura na tela nao era a nota. Hoje a
   materia vira lista PELO CONTEXTO -- mesma coluna, mesmo preto, a mancha girando
   atras da secao -- e a lista ja chega pronta.

   AS QUATRO MEDIDAS, e nenhuma e gosto:
     retangulo de canto reto   raio RECUA a ponta, e a ponta e a nota
     height 12px               fio grosso, nao bloco: o assunto e o comprimento
     gap 4px                   dez barras a 8px liam como oito; a 4px leem como uma
                               escala. Menos que isso volta a fundir.
     ponta chapada             sem sombra, sem degrade, sem filtro (regra la em cima)

   A LARGURA NASCE PRONTA, NO `style` DO ELEMENTO. Nao ha `--n`, nao ha calc de
   eixo aqui, e nao e esquecimento: largura que depende de variavel de CSS e largura
   que so existe DEPOIS que a folha aplica, e este projeto ja publicou tres secoes
   invisiveis. A traducao de nota pra largura (eixo cortado 80-100, cada ponto
   valendo 5% da pista, minimo de 3% pra quem esta no fundo do eixo) e feita na
   origem e sai escrita no HTML, onde qualquer um confere contra o v2.js.

   NADA AQUI ANIMA. Nem entrada, nem opacidade, nem transform. Uma barra acima do
   piso que apareca por UM frame sem cruzar o fio condena a rodada inteira, e o unico
   jeito de garantir zero frames errados e nao ter frames. Decoracao anima geometria;
   dado, nao. */
.barras { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.barras li {
  display: grid;
  grid-template-columns: 1fr 3rem;
  gap: var(--e2) var(--e4);
  align-items: center;
}
.barra-quem { grid-column: 1; grid-row: 1; display: grid; gap: 2px; min-width: 0; }
.barra-nome { font-family: var(--display); font-weight: 700; letter-spacing: -.01em; }
.barra-det  { font-family: var(--dado); font-size: var(--t-rot); color: var(--texto-fraco); }
.barra-nota {
  grid-column: 2; grid-row: 1;
  font-family: var(--dado); font-weight: 700; font-size: var(--t-corpo);
  font-variant-numeric: tabular-nums; text-align: right;
}
/* a trilha e o chao da escala: ela existe pra que a barra curta tenha contra o que
   ser curta. Sem trilha, 88 e 82 sao duas barras pretas de tamanhos parecidos. */
.barra-cx   { grid-column: 1 / -1; grid-row: 2; height: 12px; background: var(--linha); }
.barra-cx i { display: block; height: 100%; background: var(--texto); }

/* ABAIXO DE 900px A TRILHA DESCE INTEIRA pra linha de baixo: ao lado do nome ela
   ficaria com ~130px, e a distancia entre a primeira e a ultima e a unica coisa que
   esta lista tem pra dizer. Ai o nome precisa MASCARAR o fio do piso -- com a trilha
   ocupando a largura toda, a regua cai a 25% do bloco e passa por dentro de "Maria
   Joaquina", e fio de 3px riscando nome nao le como regua, le como texto riscado.
   Com chao proprio o fio aparece so na faixa das trilhas: segmentos colineares, que
   o olho continua costurando como uma regua unica. */
@media (max-width: 899px) {
  .barra-quem, .barra-nota { position: relative; z-index: 3; background: var(--fundo); }
}
/* 18rem e nao 16: em 16rem o detalhe mais longo ("6 de 6 · 16 anos em Java · Porto
   Alegre", 38 caracteres de mono a 11px) quebrava com "Alegre" orfao na segunda
   linha, e nome com detalhe orfao desalinha a coluna inteira. */
@media (min-width: 900px) {
  .barras li { grid-template-columns: 18rem 1fr 3rem; }
  .barra-cx   { grid-column: 2; grid-row: 1; }
  .barra-nota { grid-column: 3; grid-row: 1; }
}

/* AS RECUSADAS. Elas nao somem e nao viram cinza-de-erro: ficam em --texto-fraco,
   que e 5,4:1 no papel e continua legivel, so que sem disputar peso com quem passou.
   O que as distingue nao e a cor, e a POSICAO -- estao abaixo do <hr>. */
.barras--fora .barra-cx i { background: var(--texto-fraco); }
.barras--fora .barra-nota { color: var(--texto-fraco); }

/* o rotulo do corte passa POR CIMA do fio e leva o chao junto: sem isso, em tela
   estreita a regua cai em cima da letra do proprio rotulo dela. */
.regua-rot {
  position: relative; z-index: 3;
  display: block; width: fit-content;
  margin-bottom: var(--e4);
  padding-right: var(--e3);
  background: var(--fundo);
}