/* ==========================================================================
   HERO CENTRADO COM PROVA SOCIAL — prefixo pitch-
   Painel escuro recuado, conteúdo centrado, quatro tempos de entrada.

   Tokens usados:
     --dark --dark-rgb     fundo do painel e das faixas de luz
     --fg --fg-2           promessa e apoio
     --accent              o botão, pela primitiva .btn-primary
     --display --sans      tipografia
     --radius-media        canto do painel e do botão
     --nav-h               folga do menu fixo no topo
     --ease                curva do projeto

   O botão é a primitiva .btn do core. A única coisa que este componente
   sobrescreve nele é a ESCALA da tipografia e o canto — ver o bloco do CTA
   lá embaixo, onde está escrito por quê.
   ========================================================================== */

.pitch{
  /* Corpo da promessa. Calibrado pela LARGURA da linha, não pelo número: a
     referência roda 58px numa grotesca de largura normal e a headline ocupa
     59% da coluna. É essa fração que se persegue quando a display do tema
     muda. */
  --pitch-title:clamp(32px,4vw,58px);

  /* Recuo do painel em relação à borda da página. É o fio de fundo que
     aparece em volta e faz a dobra parecer um aplicativo. */
  --pitch-inset:clamp(10px,1.1vw,16px);

  position:relative;
  /* O respiro lateral aqui NÃO é a coluna: é a moldura do painel. Quem
     continua controlando a coluna de texto é o .wrap, lá dentro (§4). */
  padding:var(--pitch-inset) var(--pitch-inset) 0;
}

.pitch-panel{
  position:relative;
  overflow:hidden;
  border:1px solid color-mix(in srgb,var(--fg) 10%,transparent);
  border-radius:calc(var(--radius-media) + 0px);
  background:var(--dark);
  min-height:calc(100vh - var(--pitch-inset));
}

/* FAIXAS DE LUZ.
   A referência resolve isso com uma imagem de fundo. Imagem de terceiro não
   atravessa (§11), e uma foto de 200KB para desenhar duas diagonais de 5% de
   opacidade seria caro de qualquer forma. Dois gradientes inclinados fazem o
   mesmo, escalam em qualquer tela e leem token.

   color-mix e não rgba com número: o §3 proíbe cor crua, e color-mix é a
   forma de tirar uma opacidade de um token sem inventar um canal. */
.pitch-beams{
  position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(126deg,
      color-mix(in srgb,var(--fg) 6%,transparent) 0%,
      transparent 28%),
    linear-gradient(306deg,
      color-mix(in srgb,var(--fg) 5%,transparent) 0%,
      transparent 24%);
}

/* ---------------------------------------------------------------- corpo */
/* Centrado nos dois eixos. É o que separa esta dobra do hero/full-bleed-media,
   que ancora o texto embaixo para a foto respirar. Aqui não há foto: o centro
   é o lugar da frase. */
.pitch-body{
  position:relative;z-index:2;
  min-height:calc(100vh - var(--pitch-inset));
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  text-align:center;
  /* O menu fixo do projeto passa por cima do topo do painel. */
  padding-top:calc(var(--nav-h) + clamp(32px,6vh,72px));
  padding-bottom:clamp(48px,8vh,96px);
}

/* ---------------------------------------------------------------- prova social */
.pitch-social{
  display:flex;align-items:center;justify-content:center;
  gap:12px;flex-wrap:wrap;
  font-size:14px;line-height:1.45;
  color:var(--fg-muted);
}
.pitch-social-n{font-weight:500;color:var(--fg-2)}

.pitch-faces{display:flex;flex:0 0 auto}

/* O anel é box-shadow e não border: border entra na conta da largura e
   estragaria a sobreposição de -8px, que é o que faz os três rostos lerem
   como um grupo e não como três ícones enfileirados. */
.pitch-face{
  width:28px;height:28px;flex:0 0 auto;
  border-radius:var(--radius-pill);
  object-fit:cover;
  object-position:var(--pitch-face-pos,50% 30%);
  box-shadow:0 0 0 2px var(--dark);
}
.pitch-face + .pitch-face{margin-inline-start:-8px}

/* ---------------------------------------------------------------- promessa */
/* Não usa .display-xl do core: aquela primitiva tem corpo que enche a coluna
   e entrelinha .95, para título de uma ou duas palavras. Esta headline é sete
   palavras, corpo menor e entrelinha 1.07 — são dois desenhos diferentes, e
   juntá-los numa primitiva só faria as duas piorarem. */
.pitch-title{
  font-family:var(--display);font-weight:600;
  font-size:var(--pitch-title);
  line-height:1.07;letter-spacing:-.025em;
  color:var(--fg);
  /* 18ch é o que faz a promessa cair em DUAS linhas, com a quebra depois de
     "escale" — a mesma da referência. Medida em ch e não em px porque o que
     decide a quebra é o número de caracteres, não a largura da tela: trocar a
     display do tema muda os pixels e mantém a quebra. */
  max-width:18ch;
  margin-top:28px;
}

/* Peso 400 e não o 300 que o corpo da página herda: a 24px o Light fica
   fino demais e o apoio some ao lado da promessa. */
.pitch-desc{
  font-size:clamp(16px,1.6vw,24px);line-height:1.38;
  font-weight:400;
  color:var(--fg-2);
  /* 44ch = duas linhas, como no original. */
  max-width:44ch;
  margin-top:32px;
}

.pitch-act{margin-top:30px}

/* CTA. Herda forma, cor e transição da primitiva .btn/.btn-primary do core e
   sobrescreve DUAS coisas: a escala da tipografia e o canto.

   O .btn da casa é um rótulo — 11.5px, caixa alta, tracking largo, pílula.
   O botão desta referência é uma frase: corpo de leitura, caixa baixa, canto
   de 12px. Não é gosto: um hero cujo único caminho adiante é este botão pede
   um alvo que se leia à distância, e o rótulo pequeno some no meio do painel.

   Seletor duplo (.pitch .pitch-cta) de propósito: .btn e .pitch-cta têm a
   mesma especificidade, e o §6.4 proíbe depender de qual folha carregou
   primeiro. Mesma solução do .hgal-cap .hgal-type. */
.pitch .pitch-cta{
  font-family:var(--sans);
  font-size:16px;font-weight:600;
  letter-spacing:normal;text-transform:none;
  padding:16px 32px;
  border-radius:var(--radius-media);
}

/* ---------------------------------------------------------------- entrada */
/* Quatro tempos, disparados por .in na raiz — a convenção que o
   hero/full-bleed-media abriu (ver o script.js dele). IntersectionObserver
   não serve num hero: a dobra já está na tela quando a página abre.

   Os atrasos são os da referência, medidos no navegador:
     prova social  0.12s
     promessa      0.30s + 54ms por palavra
     apoio         0.90s + 33ms por palavra
     botão         1.62s

   O que a referência NÃO tem e aqui tem é o blur. O §5 do contrato é
   explícito — "nada entra seco" — e o hero/full-bleed-media é anterior a
   essa regra, o que explica (não justifica) ele transicionar só opacidade e
   deslocamento. */
.pitch-social,
.pitch-w,
.pitch-act{
  opacity:0;
  filter:blur(12px);
  transform:translateY(24px);
  transition:opacity .9s var(--ease),
             filter .9s var(--ease),
             transform .9s var(--ease);
}

.pitch-w{display:inline-block}

.pitch-social{transition-delay:.12s;transition-duration:1s}
.pitch-title .pitch-w{transition-delay:calc(.3s + var(--pitch-i,0) * 54ms)}
.pitch-desc .pitch-w{transition-delay:calc(.9s + var(--pitch-i,0) * 33ms)}

/* O botão não sobe: ele estoura. É o único movimento diferente da dobra, e
   é o que faz o olho parar nele depois de a frase inteira ter passado. */
.pitch-act{
  transform:scale(.6);
  transition-duration:.7s;
  transition-delay:1.62s;
}

.pitch.in .pitch-social,
.pitch.in .pitch-w,
.pitch.in .pitch-act{opacity:1;filter:blur(0);transform:none}

/* Quem pediu menos movimento recebe a dobra inteira, pronta, sem espera.
   Colado na regra que ele desliga, como manda o §6.5. */
@media(prefers-reduced-motion:reduce){
  .pitch-social,
  .pitch-w,
  .pitch-act{opacity:1;filter:none;transform:none;transition:none}
}

/* ---------------------------------------------------------------- mobile */
@media(max-width:760px){
  .pitch-body{
    padding-top:calc(var(--nav-h) + 32px);
    padding-bottom:56px;
    /* 100vh em celular conta com a barra do navegador recolhida: a dobra
       fica alta demais e o botão cai abaixo da linha d'água. Deixar a altura
       ser o conteúdo é o que garante o botão à vista. */
    min-height:0;
  }
  .pitch-panel{min-height:0}
  .pitch-title{max-width:none;margin-top:22px}
  .pitch-desc{max-width:38ch;margin-top:20px}
  .pitch-act{margin-top:26px}
  .pitch .pitch-cta{width:100%}
}

/* ==========================================================================
   SEM JAVASCRIPT, O CONTEUDO APARECE. §5 do contrato.

   Estas regras revelam por CLASSE PROPRIA (`.pitch.in`), e nao pelo `[data-rv]` do
   core — por isso o `@media (scripting: none)` do core/motion.css nao as
   alcanca: ele cobre `[data-rv]`, `.w` e `.ttl`, e mais nada.

   Sem esta excecao, com o JavaScript desligado a headline inteira ficava invisivel — sao 25 palavras em nos separados. Medido com
   `node bin/medir.js <preview> --sem-js`: 25 nos com texto proprio em opacidade 0
   ========================================================================== */
/* `.pitch-act`, e não `.pitch-cta`: quem nasce apagado é o INVÓLUCRO do
   botão (ver a entrada acima), e liberar o filho não acende o pai. A versão
   anterior listava `.pitch-cta` e um `.pitch-lead` que nem existe no markup —
   e o único caminho adiante do hero sumia sem JavaScript. Achado pelo
   bin/varredura.js, que procura texto que nunca aparece. */
@media (scripting: none){
  .pitch-w,
  .pitch-social,
  .pitch-act{opacity:1;transform:none;filter:none;transition:none}
}