/* ==========================================================================
   METODOLOGIA — terceira dobra.

   Uma cena em profundidade: três planos suspensos que o scroll atravessa.

   Duas camadas de layout convivem nesta folha:

     1. FLUXO (o padrão desta folha) — cabeçalho e os três cards empilhados
        verticalmente, legíveis, sem 3D e sem trava de scroll. É o que vale
        sem JavaScript, sem as CDNs, com `prefers-reduced-motion` e em telas
        até 900px.

     2. CENA (tudo sob `.method-3d`) — a experiência completa. A classe é
        acesa pelo assets/js/method.js e só quando ele confirma GSAP,
        ScrollTrigger, largura suficiente e aceitação de movimento.

   Nada é escondido por CSS: o conteúdo nasce visível e o JavaScript só
   acrescenta profundidade.
   ========================================================================== */

.method {
  position: relative;
  padding-block: clamp(96px, 11vw, 160px);
  color: #fff;
  background: var(--c-graphite-deep);
  scroll-margin-top: 88px;
}

/* Halo prateado do design system, recortado no próprio invólucro para não
   gerar rolagem horizontal e para não virar ancestral do palco fixo. */
.method-aura-wrap {
  position: absolute;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.method-aura {
  position: absolute;
  top: 26%;
  left: 8%;
  width: min(880px, 92vw);
  aspect-ratio: 1;
  border-radius: 50%;
  filter: blur(110px);
  opacity: .12;
  background: var(--c-silver);
  animation: auraDrift 26s ease-in-out infinite alternate;
}

/* ==========================================================================
   1. CABEÇALHO

   Mora dentro do palco: na cena ele fica fixo no alto enquanto os planos
   atravessam por baixo. É o que dá contexto permanente à experiência e o
   que impede a metade superior da tela de virar área morta.
   ========================================================================== */
.method-head {
  position: relative;
  z-index: 1;
  margin-bottom: clamp(48px, 6vw, 76px);
}

.method-head-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(240px, .75fr);
  gap: clamp(28px, 5vw, 88px);
  align-items: start;
}

.method-index {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
  color: rgba(255, 255, 255, .42);
  font-family: var(--font-tech);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.method-index::before {
  content: '';
  flex: none;
  width: 38px;
  height: 1px;
  background: currentColor;
}

/* 18ch quebra em duas linhas — "Como funciona o seu / acompanhamento". Mais
   estreito que isso, "seu" fica órfão numa linha só. */
.method-title {
  max-width: 18ch;
  font-size: clamp(34px, 3.6vw, 52px);
  font-weight: 300;
  line-height: 1.04;
  letter-spacing: -.045em;
  text-wrap: balance;
}

.method-lead {
  max-width: 42ch;
  padding-top: 8px;
  color: rgba(255, 255, 255, .58);
  font-size: clamp(15px, 1.05vw, 17px);
  font-weight: 300;
  line-height: 1.75;
}

/* ==========================================================================
   2. PISTA E PALCO

   No fluxo, a pista não tem altura própria: é apenas o invólucro. Na cena,
   vira o trilho de scroll que o palco fixo consome.

   O recorte é só no eixo X, e por dois motivos.

   Existe porque o navegador calcula o overflow do documento pela caixa do
   card ANTES da divisão de perspectiva: o card do fundo, deslocado na sua
   própria escala, contava como se estivesse em tamanho real e alargava a
   página. `clip` e não `hidden` porque `hidden` criaria contêiner de rolagem
   e o palco perderia o sticky.

   E é só no X porque recortar o Y cortava a sombra do card na borda inferior
   da pista — um degrau horizontal visível no fim da seção, onde a sombra
   escura simplesmente terminava numa linha reta. `overflow-x: clip` com
   `overflow-y: visible` é uma combinação legal (a coerção do CSS só age
   quando um eixo está fora do par visible/clip), então nada é forçado a
   `hidden` e a sombra volta a se dissolver naturalmente.
   ========================================================================== */
.method-runway {
  position: relative;
  z-index: 1;
  overflow-x: clip;
  overflow-y: visible;
}

.method-scene {
  display: grid;
  gap: clamp(18px, 2.4vw, 26px);
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ==========================================================================
   3. CARD

   Plano sólido em `--c-ink` sobre o fundo `--c-graphite-deep`: a diferença
   de valor entre os dois é o que faz cada card ler como superfície iluminada
   suspensa no escuro, sem recorrer a gradiente ou vidro.

   --cw é a largura de referência do card; toda a tipografia interna deriva
   dela, então a peça inteira escala como uma unidade só.
   ========================================================================== */
.method-card {
  --cw: min(64vw, 940px);
  /* --f e --fl são o foco do card, escritos pelo JS na cena (0 ao fundo,
     1 no primeiro plano). Fora dela o padrão 1 deixa tudo resolvido.
     --h é o hover, também escrito pelo JS e só dentro da cena. */
  --f: 1;
  --fl: 1;
  --h: 0;

  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(28px, calc(var(--cw) * .048), 52px);
  overflow: hidden;
  /* A borda é o que sustenta a leitura de "plano" nos cards do fundo, onde
     a opacidade já derrubou o contraste da superfície. */
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: clamp(18px, calc(var(--cw) * .028), 30px);
  background: var(--c-ink);
  box-shadow:
    0 60px 140px rgba(0, 0, 0, .55),
    inset 0 1px 0 rgba(255, 255, 255, .08);
}

/* Número de marca-d'água: sangra pelo canto e ocupa o espaço negativo do
   topo. Oswald é a família de display do sistema, a mesma do wordmark. */
.method-card-num {
  position: absolute;
  top: calc(var(--cw) * -.042);
  right: calc(var(--cw) * .022);
  color: #fff;
  font-family: var(--font-display);
  font-size: clamp(96px, calc(var(--cw) * .22), 210px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -.05em;
  opacity: calc(.055 + .045 * var(--f));
  transition: opacity .3s linear;
  pointer-events: none;
}

.method-card-index {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  color: rgba(255, 255, 255, .46);
  font-family: var(--font-tech);
  font-size: clamp(10px, calc(var(--cw) * .013), 12px);
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.method-card-index::before {
  content: '';
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--c-vital);
  /* Acende conforme o card chega à frente. */
  opacity: calc(.22 + .78 * var(--f));
  transform: scale(calc(.7 + .3 * var(--f)));
}

/* O corpo desce, deixando o vazio do topo para o número. Em fluxo o card não
   tem altura fixa, então o empurrão precisa ser explícito; na cena, onde a
   proporção é fixa, `auto` distribui a sobra sozinho. */
.method-card-body { margin-top: clamp(52px, 6vw, 88px); }

.method-card-title {
  max-width: 16ch;
  font-size: clamp(26px, calc(var(--cw) * .05), 46px);
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: -.04em;
  text-wrap: balance;
}

.method-card-rule {
  display: block;
  width: clamp(48px, calc(var(--cw) * .09), 84px);
  height: 1px;
  margin-block: clamp(16px, calc(var(--cw) * .03), 26px);
  background: var(--c-vital);
  transform: scaleX(var(--f));
  transform-origin: left center;
}

.method-card-text {
  max-width: 38ch;
  color: rgba(255, 255, 255, .62);
  font-size: clamp(15px, calc(var(--cw) * .019), 18px);
  font-weight: 300;
  line-height: 1.7;
  opacity: calc(.55 + .45 * var(--fl));
}

/* Faixa auxiliar: slot para os complementos que ainda dependem do cliente. */
.method-card-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-top: clamp(20px, calc(var(--cw) * .038), 36px);
  padding-top: clamp(14px, calc(var(--cw) * .024), 22px);
  border-top: 1px solid rgba(255, 255, 255, .1);
  opacity: calc(.28 + .72 * var(--fl));
}

.method-card-meta span {
  color: rgba(255, 255, 255, .58);
  font-family: var(--font-tech);
  font-size: clamp(10px, calc(var(--cw) * .013), 12px);
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.method-card-meta em {
  flex: none;
  padding: 3px 9px 2px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: var(--radius-pill);
  color: rgba(255, 255, 255, .5);
  font-family: var(--font-mono);
  font-size: 9px;
  font-style: normal;
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* ==========================================================================
   4. ELEMENTOS QUE SÓ EXISTEM DENTRO DA CENA
   ========================================================================== */
.method-hud,
.method-grid-line { display: none; }

/* ==========================================================================
   5. CENA EM PROFUNDIDADE

   Tudo abaixo só entra em vigor com a classe `.method-3d` no <html>.
   ========================================================================== */
.method-3d .method-runway { height: 400svh; }

.method-3d .method-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  /* A perspectiva vive no palco; os cards são projetados por ela. Nenhum
     ancestral do palco pode ter transform, filter ou perspective — por isso
     o halo mora num invólucro irmão. */
  perspective: min(1600px, 112vw);
  perspective-origin: 50% 58%;
}

/* Fixo no alto do palco. Fica antes da cena no DOM, então os planos passam
   por cima dele ao atravessar a câmera — o que reforça a travessia. */
.method-3d .method-head {
  position: absolute;
  left: 0;
  right: 0;
  top: clamp(92px, 12vh, 132px);
  margin: 0;
}

/* Referência espacial discreta: uma única prumada alinhada com a divisão do
   cabeçalho, no lugar da grade cheia da hero. Dá ao vazio uma medida. */
.method-3d .method-grid-line {
  position: absolute;
  z-index: 0;
  display: block;
  top: 0;
  bottom: 0;
  left: 50%;
  width: min(var(--container), 100vw);
  transform: translateX(-50%);
  pointer-events: none;
}

.method-3d .method-grid-line::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--gutter) + 56%);
  width: 1px;
  background: linear-gradient(
    to bottom,
    transparent,
    rgba(255, 255, 255, .07) 18%,
    rgba(255, 255, 255, .07) 74%,
    transparent
  );
}

.method-3d .method-scene {
  position: absolute;
  inset: 0;
  display: block;
  max-width: none;
  padding-inline: 0;
  transform-style: preserve-3d;
}

.method-3d .method-card {
  position: absolute;
  left: 50%;
  top: 63%;
  width: var(--cw);
  aspect-ratio: 1.8;
  margin: 0;
  will-change: transform, opacity;
}

.method-3d .method-card-body { margin-top: auto; }

/* --------------------------------------------------------------------------
   Hover — só na cena, e só no plano que está à frente

   O avanço e o giro ficam no transform, escrito pelo JS a cada quadro. Aqui
   ficam as respostas que não disputam transform: a borda ganha corpo, o
   marcador vital acende com o mesmo halo que o design system usa no passo em
   destaque do trilho, a régua estica um fio e o número sai da penumbra.

   Nenhuma transição declarada: --h já chega interpolado do GSAP, e animar
   sombra ou borda por CSS em cima disso só somaria atraso.
   -------------------------------------------------------------------------- */
.method-3d .method-card {
  border-color: rgba(255, 255, 255, calc(.16 + .13 * var(--h)));
}

.method-3d .method-card-index::before {
  box-shadow: 0 0 0 calc(4px * var(--h)) rgba(168, 201, 87, calc(.2 * var(--h)));
}

.method-3d .method-card-rule {
  transform: scaleX(calc(var(--f) + .1 * var(--h)));
}

.method-3d .method-card-num {
  opacity: calc(.055 + .045 * var(--f) + .03 * var(--h));
}

/* Telas baixas: o plano encolhe junto com a viewport para que o cabeçalho,
   os três níveis de profundidade e a barra de etapa continuem cabendo. */
@media (min-width: 901px) and (max-height: 860px) {
  .method-3d .method-card { --cw: min(58vw, 800px); }
}

@media (min-width: 901px) and (max-height: 720px) {
  .method-3d .method-card { --cw: min(52vw, 680px); }
  .method-3d .method-head { top: clamp(84px, 11vh, 104px); }
}

/* --------------------------------------------------------------------------
   Indicador de etapa
   -------------------------------------------------------------------------- */
.method-3d .method-hud {
  position: absolute;
  z-index: 3;
  left: 0;
  right: 0;
  bottom: clamp(24px, 3.4vh, 40px);
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.method-hud-ticks {
  display: flex;
  align-items: center;
  gap: 6px;
}

.method-hud-tick {
  width: 16px;
  height: 2px;
  border-radius: 2px;
  background: rgba(255, 255, 255, .2);
  transition:
    width var(--speed-mid) var(--ease-out),
    background var(--speed-mid) var(--ease-out);
}

.method-hud-tick.is-on { background: var(--c-vital); }
.method-hud-tick.is-current { width: 26px; }

.method-hud-count {
  color: rgba(255, 255, 255, .42);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .1em;
}

.method-hud-count b {
  color: #fff;
  font-weight: 400;
}

/* ==========================================================================
   6. FLUXO EM TELAS GRANDES

   Vale para movimento reduzido e para o caso de as CDNs não responderem.
   O card ocuparia a largura inteira do container e viraria uma faixa larga
   demais para a escala tipográfica que carrega; o teto o mantém alinhado à
   esquerda, na mesma borda das dobras anteriores.
   ========================================================================== */
@media (min-width: 901px) {
  .method-scene { justify-items: start; }
  .method-card { max-width: 760px; }
}

/* ==========================================================================
   7. FLUXO EM TELAS PEQUENAS

   Aqui NÃO existe contexto 3D compartilhado. A entrada lateral gira cada
   card, mas a perspectiva é individual — o method.js a aplica dentro do
   próprio transform de cada peça.

   O motivo é concreto: com `perspective` no palco e `preserve-3d` no
   invólucro, os três cards passavam a viver num mesmo contexto 3D. O Chrome
   promovia cada um a camada e, com a sombra grande somada à opacidade
   animada, rasterizava em blocos — a emenda entre blocos aparecia como um
   risco vertical atravessando o card inteiro durante a transição. Sem o
   contexto compartilhado o artefato desaparece, e não se perde nada: em
   fluxo os cards são irmãos empilhados que nunca se cruzam no espaço.
   ========================================================================== */
@media (max-width: 900px) {
  .method-head-grid {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .method-title { max-width: 18ch; }
  .method-lead { padding-top: 0; max-width: 56ch; }

  .method-scene { gap: clamp(20px, 4vw, 30px); }

  .method-card {
    --cw: min(86vw, 520px);
    padding: clamp(24px, 6vw, 34px);
    transform-origin: 50% 50%;
  }

  /* Empilhado, o número perde a função de preencher vazio e passaria por
     cima do título; recua para o canto e diminui. */
  .method-card-num {
    top: calc(var(--cw) * -.03);
    font-size: clamp(76px, calc(var(--cw) * .24), 120px);
  }

  .method-card-body { margin-top: clamp(48px, 13vw, 72px); }
  .method-card-title { max-width: 14ch; }
}

@media (max-width: 640px) {
  .method { padding-block: clamp(80px, 16vw, 104px); }
  .method-card-text { max-width: none; }

  /* As microcopies finais são maiores que os antigos selos provisórios.
     No mobile, a faixa empilha para preservar a leitura sem recorte. */
  .method-card-meta {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }

  .method-card-meta em {
    flex: 0 1 auto;
    width: 100%;
    max-width: 100%;
    border-radius: var(--radius-sm);
    line-height: 1.5;
    white-space: normal;
  }
}

/* ==========================================================================
   8. MOVIMENTO REDUZIDO

   O JavaScript já desiste da cena e da entrada lateral nesse modo — nenhum
   card recebe transform e a leitura fica em fluxo. Aqui só desligamos o
   movimento ambiente.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .method-aura { animation: none; }
  .method-card-num,
  .method-hud-tick { transition: none; }
}