/* website2 v3 — CENA 2 · "Números" =========================================
 * O roteiro pedia o diagnóstico com contadores (ROTEIRO-V3 §3, Cena 2).
 * Escolha feita na construção: em vez de estatísticas de terceiros que não
 * podemos verificar, os números são **os do nosso próprio site**, todos
 * medidos e todos rastreáveis (trace do Chrome DevTools, Lighthouse, o
 * ficheiro de build). É o que DESIGN-SYSTEM-V3 §4 chama números reais — e é
 * a única forma de um estúdio provar desempenho sem citar um estudo.
 *
 * Acento da cena: --pulse.
 * ========================================================================= */

/* O FUNDO ENTRA COM A COR QUE O HERO ENTREGA E SÓ DEPOIS AFUNDA.
   Medido na costura, banda de 26px de cada lado: o hero entrega ali
   `rgb(18,18,29)` — é o `--ink` com a luz do sinal por cima — e as medidas
   começavam a `var(--void)`, `rgb(7,8,13)`. Degrau de 12.3 por canal, que é o
   que se lia como "acabou uma página e começou outra".
   A experiência separou as causas: desligar só o `border-top` deixava o degrau
   em 12.3 (não era ele), desligar só o fundo baixava-o a 1.7. Daí o gradiente:
   `--ink` no topo, `--void` a partir de um terço. O `border-top` sai na mesma,
   porque valia os restantes ~1.0 e uma linha de corte numa costura é
   exactamente o que não pode lá estar. A régua interna da grelha
   (`.numbers-grid`) fica — essa é estrutura, não costura. */
.numbers{color:var(--paper);position:relative;
  /* A CURVA GLOBAL, não um degrau achatado. O roteiro pede
     `#07080D -> #0F121B -> #171B27`: a Cena 02 tem de POUSAR mais funda que a
     Cena 01, não ficar igual a ela. Minimizar o degrau da costura, sozinho,
     premiava exactamente o erro contrário — pintar as duas cenas da mesma cor.
     Arranca na cor que o hero entrega, sobe até `--ink-2` no corpo da grelha,
     e recolhe para `--void` no fim, porque é `--void` que a Cena 03 recebe (a
     costura 02->03 media 0.3 e não pode regredir por causa desta). */
  background:linear-gradient(to bottom,
    color-mix(in srgb, var(--ink-2) 40%, var(--ink)) 0,
    var(--ink) 14%,
    var(--ink-2) 42%,
    var(--ink) 74%,
    var(--void) 100%);
  padding:clamp(88px,13vh,150px) 0 clamp(80px,12vh,140px)}
/* a luz que vem do hero não acaba a régua: continua por cima da costura e
   dissolve-se. Sem faixa horizontal — é um halo, e é o que substitui a linha */
.numbers::before{
  content:""; position:absolute; left:50%; top:0; transform:translate(-50%,-38%);
  /* 100%, nao 120%: a 390px os 120% davam 468px num viewport de 390 e a
     mancha saia 39px para cada lado — `document.scrollWidth` 429 contra 390,
     que e overflow horizontal a serio (apanhado pela QA da travessia, nao a
     olho). O sangramento que interessa nesta mancha e o VERTICAL, que e o que
     atravessa a costura; o horizontal nao acrescentava nada. */
  width:min(1400px,100%); height:clamp(160px,26vh,340px);
  pointer-events:none; z-index:0;
  background:radial-gradient(60% 50% at 50% 50%,
    color-mix(in srgb, var(--flux) 9%, transparent) 0%,
    color-mix(in srgb, var(--pulse) 5%, transparent) 42%,
    transparent 72%);
  filter:blur(6px);
}
/* ---- A PONTE CROMÁTICA 01 -> 02 --------------------------------------
   O degradê de `.numbers` acima resolvia a CURVA da cena mas não a
   FRONTEIRA. Medido no browser a 1440x900, banda de 5px de cada lado da
   costura: em cima `rgb(12,13,18)` (a tela do sinal sobre `--void`), em
   baixo `rgb(18,21,31)` (o 0% do degradê desta secção). +6/+8/+13 por
   canal num único pixel — é essa aresta que se lê como "acabou uma página
   e começou outra", e nenhum halo por cima dela a apaga, porque o problema
   não é falta de luz, é o salto.

   Uma ponte, duas metades, um só token. As duas metades vivem neste
   ficheiro de propósito (e não uma em `signal.css`): partilham `--seam12`
   e a MESMA lista de paragens invertida, e mantê-las à vista uma da outra
   é o que impede que amanhã só uma seja afinada — que é como a costura
   volta. `numbers.css` carrega depois de `signal.css`, por isso a metade
   de cima pode ser declarada aqui.

   Porque não um `linear-gradient` só, com um stop na fronteira: um stop
   coincidente com a aresta devolve exactamente a aresta. Aqui a cor chega
   a 100% de `--seam12` no último pixel de `.signal` E arranca a 100% no
   primeiro de `.numbers` — o mesmo valor dos dois lados, logo não há
   fronteira para ler.

   A NÉVOA RADIAL NÃO ENTRA AQUI, e é uma decisão medida, não um esquecimento.
   A primeira versão da ponte trazia a sua própria (flux 7% / pulse 4%) e
   ficou uma FAIXA: com `.numbers::before` já a pousar um halo por cima da
   costura, os dois somavam-se e a banda de ~300px à volta da fronteira
   media `rgb(27,23,38)` contra `rgb(16,19,29)` do corpo da secção — quase o
   dobro de brilho, e uma faixa horizontal é exactamente o que este pedido
   proíbe, tal como a linha. A névoa continua a existir; é o
   `.numbers::before`, que já está calibrado (desktop / reduzido / 820px) e
   já atravessa a costura pelo seu `translate(-50%,-38%)`.

   Fica ATRÁS dos feixes (`.bx` é `position:fixed; z-index:45`) e atrás do
   conteúdo (`.numbers-inner` é `z-index:1`), e nenhuma das metades
   participa no layout nem intercepta ponteiro. */
:root{
  /* o tom exacto em que o degradê de `.numbers` arranca (o seu 0%).
     Nenhuma das metades da ponte escreve outra cor de base. */
  --seam12: color-mix(in srgb, var(--ink-2) 40%, var(--ink));
}
.signal::after,
.numbers::after{
  content:""; position:absolute; left:0; right:0;
  height:42vh; pointer-events:none;
}
/* metade de cima: o preto do sinal a receber o azul nocturno.
   Paira sobre `.signal-stage` (pseudo-elemento = último na ordem de
   pintura do mesmo contexto), por isso a tela vai cedendo com ela. */
.signal::after{
  bottom:0; z-index:2;
  background:
    linear-gradient(to bottom,
      color-mix(in srgb, var(--seam12) 0%, transparent) 0%,
      color-mix(in srgb, var(--seam12) 16%, transparent) 40%,
      color-mix(in srgb, var(--seam12) 52%, transparent) 70%,
      color-mix(in srgb, var(--seam12) 86%, transparent) 89%,
      var(--seam12) 100%);
}
/* metade de baixo: a mesma cor continua e só depois entrega a secção ao
   seu próprio degradê. As paragens são as de cima, pela ordem inversa. */
.numbers::after{
  top:0; z-index:0;
  background:
    linear-gradient(to bottom,
      var(--seam12) 0%,
      color-mix(in srgb, var(--seam12) 86%, transparent) 11%,
      color-mix(in srgb, var(--seam12) 52%, transparent) 30%,
      color-mix(in srgb, var(--seam12) 16%, transparent) 60%,
      color-mix(in srgb, var(--seam12) 0%, transparent) 100%);
}

.numbers-inner{position:relative; z-index:1}
.numbers-inner{width:min(1320px,100% - clamp(32px,6vw,96px));margin-inline:auto}

.numbers-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.86fr);
  gap:clamp(24px,4vw,64px);align-items:end;margin-bottom:clamp(44px,7vh,86px)}
.numbers-eyebrow{display:block;font:500 11px/1 var(--ff-mono,ui-monospace,monospace);
  letter-spacing:.16em;text-transform:uppercase;color:var(--pulse);margin-bottom:18px}
.numbers-title{margin:0;font-family:var(--ff-display);font-weight:700;
  font-size:clamp(28px,4.6vw,62px);line-height:1;letter-spacing:-.03em;color:var(--paper)}
.numbers-title em{font-style:normal;color:var(--pulse)}
.numbers-lede{margin:0;font-size:clamp(14px,1.2vw,17px);line-height:1.6;color:var(--paper-dim)}

/* ---- a grelha de medidas ---------------------------------------------- */
.numbers-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:0;margin:0;padding:0;list-style:none;border-top:1px solid var(--rule-strong)}
.measure{padding:clamp(26px,3.4vw,40px) clamp(16px,2vw,30px) clamp(24px,3vh,34px);
  border-bottom:1px solid var(--rule);border-right:1px solid var(--rule);position:relative}
.measure:last-child{border-right:0}
/* o traço que acende por baixo da medida quando ela entra em vista */
.measure::after{content:"";position:absolute;left:0;bottom:-1px;height:1px;width:100%;
  background:var(--pulse);transform:scaleX(0);transform-origin:left center;
  transition:transform .7s cubic-bezier(.22,.61,.36,1)}
.measure.is-read::after{transform:scaleX(1)}

.measure-value{display:flex;align-items:baseline;gap:4px;
  font-family:var(--ff-display);font-weight:700;letter-spacing:-.04em;
  font-size:clamp(40px,5.6vw,82px);line-height:.9;color:var(--paper)}
.measure-value u{text-decoration:none;font-size:.42em;letter-spacing:-.01em;color:var(--paper-dim)}
.measure-label{display:block;margin-top:14px;font-size:14px;line-height:1.45;color:var(--paper)}
.measure-source{display:block;margin-top:9px;
  font:500 10px/1.5 var(--ff-mono,ui-monospace,monospace);letter-spacing:.11em;
  text-transform:uppercase;color:var(--paper-faint)}

/* ---- nota de rodapé da cena ------------------------------------------- */
.numbers-note{margin:clamp(26px,4vh,44px) 0 0;max-width:72ch;
  font:500 10px/1.7 var(--ff-mono,ui-monospace,monospace);letter-spacing:.09em;
  text-transform:uppercase;color:var(--paper-faint)}

@media(max-width:980px){
  .numbers-head{grid-template-columns:1fr;align-items:start}
  .numbers-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .measure:nth-child(2n){border-right:0}
}
@media(max-width:560px){
  .numbers-grid{grid-template-columns:1fr}
  .measure{border-right:0}
}
@media(prefers-reduced-motion:reduce){
  .measure::after{transition:none;transform:scaleX(1)}
}

/* ---- chamada para acção da cena das medidas ---------------------------
   A secção media e depois deixava o leitor sem saída. A copy nova termina
   num convite explícito, por isso precisa de um botão — alinhado com a
   nota, não centrado, para não competir com os números. */
.numbers-cta{margin-top:clamp(20px,3vh,32px)}

/* ---- movimento reduzido: recalibrar a entrega de cor ------------------- */
/* O degradê acima foi calibrado contra o hero COM o sinal a animar, que
   entrega ali ~(18,18,29). Parado, o hero entrega ~(14,10,19) e o mesmo
   degradê passava a ler-se como um degrau de 10.7. Aqui arranca mais escuro
   e o halo recolhe, porque sem movimento uma mancha de luz por cima da
   fronteira lê-se como uma mancha, não como luz. */
@media (prefers-reduced-motion: reduce){
  .numbers{
    background:linear-gradient(to bottom,
      color-mix(in srgb, var(--ink) 42%, var(--void)) 0,
      var(--ink) 16%,
      var(--ink-2) 42%,
      var(--ink) 74%,
      var(--void) 100%);
  }
  .numbers::before{opacity:.45}
}

/* ---- telemóvel: mesma razão, menos halo -------------------------------- */
/* A 390px a mancha ocupa proporcionalmente muito mais ecrã e o degrau medido
   subia para 7.7. Com o halo recolhido a costura volta a ler-se contínua. */
@media (max-width:820px){
  .numbers::before{opacity:.55; height:clamp(120px,18vh,220px)}
  /* e o hero entrega aqui ~(13,13,20), mais escuro do que em 1440 — o mesmo
     degradê arrancava 6 valores acima e via-se a linha. Medido: 8.0 -> abaixo
     de 3 com este arranque. */
  .numbers{
    background:linear-gradient(to bottom,
      color-mix(in srgb, var(--ink) 65%, var(--void)) 0,
      var(--ink) 18%,
      var(--ink-2) 44%,
      var(--ink) 76%,
      var(--void) 100%);
  }
}