/* ==========================================================================
   HERO DE DUAS COLUNAS COM PALCO DE PRODUTO
   Prefixo: stage-
   Tokens usados: --bg --fg --fg-2 --fg-muted --rule --accent --dark --dark-rgb
                  --light --display --sans --nav-h --pad --dur --ease
                  --radius-pill --radius-media
   ========================================================================== */

.stage{overflow:hidden}

/* ---- a grade ----
   A coluna de texto é mais larga que o palco, e o padding-top é maior que o
   necessário para limpar o menu. Os dois têm o mesmo motivo, explicado
   abaixo: é a legenda de cursor que precisa de lugar.

   O padding-top é o dobro do que a dobra precisaria para limpar o menu, e é
   deliberado: o vão entre o menu e a headline é onde a legenda de cursor
   pousa. Com o respiro mínimo a bolha cai sobre a primeira linha do título —
   medido, não suposto. Quem usar o hero sem a camada de anotação pode baixar
   o clamp; quem usar com ela, não. */
.stage-grid{
  display:grid;
  /* 1,25 / 1 e não 1 / 1. Medida na referência: coluna de texto 770 contra
     foto 608, ou seja o texto é ~27% mais largo. Não é gosto — é o que dá
     lugar, à direita dos botões, para a legenda de cursor pousar sem cobrir
     o link secundário. Em 1 / 1 a bolha não cabe ali. */
  grid-template-columns:1.25fr 1fr;
  align-items:center;
  gap:clamp(32px,4vw,64px);
  padding-top:calc(var(--nav-h) + clamp(56px,10vh,120px));
  padding-bottom:clamp(56px,9vh,110px);
}

/* ---- headline ----
   Linhas encostadas são a assinatura desta abertura: o bloco vira massa. A
   referência faz isso em caixa alta com entrelinha 1; aqui é caixa baixa,
   porque na biblioteca caixa alta é reservada a texto que é efeito. Em caixa
   baixa 1 não fecha — o "g" de uma linha encosta na seguinte — então a
   entrelinha subiu para 1.06, que é o mínimo que separa sem soltar o bloco. */
.stage-title{
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(34px,4.6vw,68px);
  line-height:1.06;
  letter-spacing:-.022em;
  color:var(--fg);
}
.stage-title em{font-style:normal;font-weight:700;color:var(--accent)}

.stage-desc{
  font-family:var(--sans);
  font-size:16px;
  line-height:1.6;
  color:var(--fg-2);
  max-width:46ch;
  margin-top:clamp(20px,2.4vw,30px);
}

/* ---- ações ----
   O segundo caminho é link de texto, não segundo botão: dois botões lado a
   lado disputam o clique e nenhum dos dois ganha. */
.stage-cta{
  display:flex;align-items:center;
  gap:clamp(16px,2vw,30px);
  flex-wrap:wrap;
  margin-top:clamp(26px,3.2vw,40px);
}
.stage-link{
  font-family:var(--sans);font-weight:600;font-size:14px;
  color:var(--fg);
  border-bottom:1px solid transparent;
  padding-bottom:2px;
  transition:color .3s var(--ease),border-color .3s var(--ease);
}
.stage-link:hover{color:var(--accent);border-bottom-color:var(--accent)}

/* ==========================================================================
   O PALCO
   ========================================================================== */

.stage-media{
  --stage-ratio:1.09;      /* 608x560 da referência. 4/3 e 1/1 também servem */
  --stage-radius:24px;
  position:relative;
}

/* A janela recorta o trilho. O raio vive aqui, não na foto: assim o card que
   encosta na borda também é recortado, e não fica um canto vazando. */
.stage-view{
  position:relative;
  aspect-ratio:var(--stage-ratio);
  overflow:hidden;
  border-radius:var(--stage-radius);
  background:var(--dark-2);   /* o que se vê enquanto a foto não chega */
}

/* O trilho anda em múltiplos de -100%. Quem escreve --stage-i é o script;
   a conta é daqui, e é por isso que mudar a curva não exige tocar no JS. */
.stage-track{
  display:flex;
  height:100%;
  transform:translate3d(calc(var(--stage-i,0) * -100%),0,0);
  transition:transform .72s var(--ease);
  will-change:transform;
}
@media(prefers-reduced-motion:reduce){
  .stage-track{transition:none}
}

.stage-slide{position:relative;flex:0 0 100%;height:100%}
.stage-shot{width:100%;height:100%;object-fit:cover;object-position:50% 42%}

/* ==========================================================================
   OS CARDS FLUTUANTES
   ========================================================================== */

.stage-cards{position:absolute;inset:0;pointer-events:none}

/* Posição em porcentagem da foto, escrita inline no markup. Porcentagem e
   não pixel porque o palco encolhe com a coluna: em pixel o card sai da
   foto na primeira tela estreita.

   A boiada usa `translate`, não `transform`, e isso é o que permite os dois
   movimentos coexistirem: `translate` e `transform` são propriedades
   distintas e se compõem, então a entrada do passo (transform) não briga com
   a flutuação contínua (translate). Com os dois em `transform` um apagaria
   o outro, e a saída seria um invólucro a mais só para separá-los. */
.stage-card{
  --stage-card-radius:14px;
  --stage-bob:11px;         /* amplitude medida na referência */
  --stage-bob-dur:6s;
  --stage-bob-delay:0s;

  position:absolute;
  left:var(--stage-cx,6%);
  top:var(--stage-cy,50%);
  display:flex;align-items:center;gap:12px;
  max-width:64%;
  padding:12px;
  background:var(--light);
  border-radius:var(--stage-card-radius);
  box-shadow:0 16px 38px rgba(var(--dark-rgb),.17);
  animation:stageBob var(--stage-bob-dur) var(--ease) var(--stage-bob-delay) infinite alternate;
}

/* Amplitudes e tempos ligeiramente diferentes por posição: em fase igual os
   três cards sobem e descem juntos e a foto inteira parece respirar, o que
   entrega o truque. Dessincronizar é o que faz parecerem objetos soltos. */
.stage-card:nth-child(2){--stage-bob:8px;--stage-bob-dur:7.2s;--stage-bob-delay:-2.4s}
.stage-card:nth-child(3){--stage-bob:13px;--stage-bob-dur:5.4s;--stage-bob-delay:-1.1s}

@keyframes stageBob{
  from{translate:0 0}
  to{translate:0 calc(var(--stage-bob) * -1)}
}

/* ---- os passos ----
   Card com data-stage-step nasce fora e entra quando é a vez dele. A entrada
   carrega blur indo a zero, como o §5 manda para toda entrada — é o mesmo
   desenho do [data-rv] do core, só que disparado por classe em laço em vez
   de por IntersectionObserver uma única vez. */
.stage-card[data-stage-step]{
  opacity:0;
  filter:blur(10px);
  transform:translateY(16px);
  visibility:hidden;
  transition:opacity .6s var(--ease),filter .7s var(--ease),
             transform .6s var(--ease),visibility .6s;
}
.stage-card[data-stage-step].is-on{
  opacity:1;filter:blur(0);transform:none;visibility:visible;
}
@media(prefers-reduced-motion:reduce){
  .stage-card{animation:none}
  .stage-card[data-stage-step]{transition:opacity .3s linear,visibility .3s}
  .stage-card[data-stage-step].is-on{filter:none;transform:none}
}
/* SEM JAVASCRIPT, A NARRATIVA MOSTRA O DESFECHO. Os passos nascem fora de cena
   e quem os traz é o laço do script; sem ele, o palco ficava só com a foto e
   a conversa inteira sumia — "Pronto: sua estrutura sucessória mapeada" era
   justamente a frase que fecha o argumento. O último passo de cada slide é
   sempre o último filho da .stage-cards (os passos dividem a mesma posição e
   se substituem), então é ele que aparece. Achado pelo bin/varredura.js. */
@media (scripting: none){
  .stage-card[data-stage-step]:last-child{
    opacity:1;filter:none;transform:none;visibility:visible;
  }
}

/* ---- variante: nota de conversa ----
   Pílula com ícone em círculo. É o card da narrativa. */
.stage-card-note{border-radius:var(--radius-pill);padding:10px 20px 10px 10px}
.stage-card-icon{
  flex:0 0 auto;
  width:40px;height:40px;
  display:grid;place-items:center;
  border-radius:var(--radius-pill);
  background:color-mix(in srgb,var(--accent) 16%,var(--light));
  color:var(--accent);
}
.stage-card-icon svg{width:19px;height:19px;display:block}
.stage-card-line{
  font-family:var(--sans);font-weight:600;font-size:13px;line-height:1.35;
  color:var(--dark);
}

/* ---- variante: item de catálogo ---- */
.stage-card-thumb{
  flex:0 0 auto;
  width:46px;height:46px;
  overflow:hidden;
  border-radius:10px;
  background:color-mix(in srgb,var(--accent) 14%,var(--light));
}
.stage-card-thumb img{width:100%;height:100%;object-fit:cover}
.stage-card-text{display:flex;flex-direction:column;gap:3px;min-width:0}
.stage-card-title{
  font-family:var(--sans);font-weight:600;font-size:12.5px;line-height:1.3;
  color:var(--dark);
}
.stage-card-value{
  font-family:var(--display);font-weight:700;font-size:15px;letter-spacing:-.01em;
  color:var(--accent);
}

/* ---- variante: par de números ----
   O filete entre as células é o que separa duas grandezas sem virar tabela. */
.stage-card-stat{gap:0;padding:14px 4px}
.stage-card-cell{
  display:flex;flex-direction:column;gap:4px;
  padding-inline:16px;
}
.stage-card-cell + .stage-card-cell{border-left:1px solid var(--rule)}
.stage-card-label{
  font-family:var(--sans);font-weight:500;font-size:11px;line-height:1.3;
  color:var(--fg-muted);
}
.stage-card-figure{
  font-family:var(--display);font-weight:700;font-size:16px;letter-spacing:-.015em;
  white-space:nowrap;
  color:var(--accent);
}

/* ==========================================================================
   AS SETAS
   ========================================================================== */

.stage-nav{
  position:absolute;
  left:50%;bottom:clamp(14px,2.4vw,22px);
  transform:translateX(-50%);
  display:flex;gap:12px;
  z-index:2;
}
.stage-arrow{
  width:44px;height:44px;
  display:grid;place-items:center;
  border:1px solid color-mix(in srgb,var(--light) 45%,transparent);
  border-radius:var(--radius-pill);
  background:color-mix(in srgb,var(--light) 80%,transparent);
  color:var(--dark);
  padding:0;
  transition:background .3s var(--ease);
}
.stage-arrow svg{width:20px;height:20px;display:block}
/* Sem salto no hover (CLAUDE.md §6, 2026-09-29): o disco acende e não
   cresce, a mesma regra do .btn do core — botão não salta nem move. */
.stage-arrow:hover{background:var(--light)}
@supports (backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px)){
  .stage-arrow{
    backdrop-filter:blur(10px) saturate(140%);
    -webkit-backdrop-filter:blur(10px) saturate(140%);
  }
}

/* ==========================================================================
   MOBILE
   Uma coluna, palco embaixo. O palco vira 4/3 porque em largura cheia o
   1.09 fica alto demais e empurra o CTA para fora da primeira tela — e o
   CTA acima da dobra é o motivo da dobra existir.
   Abaixo de 560px os cards encolhem e o terceiro sai: três objetos numa
   foto de 320px de largura viram uma pilha ilegível.
   ========================================================================== */
@media(max-width:980px){
  .stage-grid{
    grid-template-columns:1fr;
    gap:clamp(30px,5vh,46px);
    padding-top:calc(var(--nav-h) + clamp(20px,4vh,44px));
  }
  .stage-media{--stage-ratio:4/3}
  .stage-desc{max-width:60ch}
}

@media(max-width:560px){
  .stage-media{--stage-ratio:1}
  .stage-card{max-width:80%;padding:9px}
  .stage-card-note{padding:8px 15px 8px 8px}
  .stage-card-icon{width:32px;height:32px}
  .stage-card-icon svg{width:15px;height:15px}
  .stage-card-line,.stage-card-title{font-size:11.5px}
  .stage-card-figure{font-size:14px}
  .stage-card-cell{padding-inline:11px}
  /* Só card PERMANENTE sai. Esconder um passo da narrativa o apagaria para
     sempre — o laço continuaria dando a vez a um card invisível, e o slide
     ficaria vazio um terço do tempo. */
  .stage-card:nth-child(3):not([data-stage-step]){display:none}
  .stage-arrow{width:38px;height:38px}
  .stage-arrow svg{width:17px;height:17px}
}