/* =====================================================================
   BOLT · DNA BOLT
   O miolo da página. Ao descer, a nuvem de partículas do fundo deixa de
   ser esfera, vira funil e fecha numa dupla-hélice — o shader do New Era
   já vive em cena3d-motor.js, aqui só empurramos o `uProg` dele para a
   janela 0,15 → 0,38 conforme esta seção rola.

   Duas camadas por cima da hélice:
     · os três cartões de vidro que ORBITAM a hélice e sobem pela tela
       (print 3) — cada um com o rótulo DNA BOLT;
     · o bloco de duas colunas que entra depois (print 2): pílula,
       título grande em cascata à esquerda, texto e botões à direita.

   Regra de ouro desta seção: nada aqui pode cobrir o rodapé. Os cartões
   são `fixed`, então ficam em opacity 0 e pointer-events:none fora da
   janela de rolagem; o bloco é `sticky`, some junto com a seção.
   ===================================================================== */

.dna {
  position: relative;
  /* a altura da seção É o curso: mais alta, mais devagar a hélice fecha */
  height: 460vh;
}

/* ---------------------------------------------------------------------
   1 · ÓRBITA — os cartões (print 3)
   `fixed` porque a conta de órbita é feita em coordenadas de janela
   (centro da tela, raio em px), exatamente como no código do New Era.
   --------------------------------------------------------------------- */
.dna-orbita {
  position: fixed; inset: 0; z-index: 4;
  pointer-events: none;          /* nunca rouba clique do rodapé */
  opacity: 0;                    /* o JS acende só na janela da hélice */
  perspective: 1200px;
  /* nos extremos da órbita o cartão encosta na borda: recortar aqui
     garante que nenhum navegador invente barra de rolagem lateral */
  overflow: hidden;
}
.dna-orbita > article {
  position: absolute; left: 0; top: 0;
  opacity: 0; will-change: transform, opacity;
}

.dna-cartao {
  width: clamp(210px, 24vw, 320px);
  border-radius: 24px;
  border: 1px solid var(--ne-borda-forte);
  background: var(--ne-cartao);
  padding: clamp(1.4rem, 2vw, 2.2rem);
  box-shadow: 0 24px 80px rgba(0,0,0,.55);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
}
.dna-kicker {
  margin: 0 0 1.4rem;
  font-size: .72rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: rgba(255,255,255,.9);
}
.dna-numero {
  margin: 0 0 .9rem; display: inline-block;
  font-size: clamp(40px, 4.2vw, 64px); font-weight: 700;
  line-height: 1; letter-spacing: -.03em;
  background-image: linear-gradient(135deg, var(--ne-quente), var(--ne-frio));
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.dna-texto {
  margin: 0; font-size: clamp(13px, 1vw, 15px);
  line-height: 1.5; color: var(--ne-mudo);
}

/* ---------------------------------------------------------------------
   2 · BLOCO DE DUAS COLUNAS (print 2)
   Preso na tela enquanto a seção rola, e vai embora com ela — por isso
   o rodapé continua inteiro logo abaixo.
   --------------------------------------------------------------------- */
.dna-preso {
  position: sticky; top: 0;
  height: 100svh; display: flex; align-items: center;
  pointer-events: none;
}
.dna-bloco {
  pointer-events: auto;
  width: 100%; max-width: 1400px; margin: 0 auto;
  padding-inline: clamp(1.2rem, 6vw, 6rem);
  display: flex; align-items: center; gap: clamp(2rem, 5vw, 3.75rem);
  text-align: left;
}
/* Largura em px, não em `ch`: o `ch` de uma DIV mede pela fonte DELA
   (16 px), não pela do <h2> de 62 px — a coluna nascia com 160 px e o
   título descia uma palavra por linha. */
.dna-bloco-esq { flex: 1 1 52%; min-width: 0; max-width: 640px; }
.dna-bloco-dir { flex: 1 1 48%; min-width: 0; max-width: 480px; }

.dna-selo {
  position: relative; display: inline-flex; align-items: center; gap: 8px;
  border-radius: 9999px; background: var(--ne-vidro);
  padding: 10px 20px; margin-bottom: 1.5rem;
  font-size: clamp(13px, .95vw, 14px); font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: #fff;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: 0 4px 20px rgba(0,0,0,.2);
}

.dna-bloco h2 {
  margin: 0;
  font-size: clamp(30px, 4.2vw, 62px); line-height: 1.03;
  letter-spacing: -.03em; font-weight: 700;
  overflow: hidden; padding-bottom: .12em;
  /* fica invisível até a rolagem mandar entrar: as letras só ganham
     opacidade 0 depois de fatiadas, e sem isto o título aparecia inteiro
     e chapado bem antes da hora */
  opacity: 0; transition: opacity .2s linear;
}
.dna-bloco.mostra h2 { opacity: 1; }
/* mesma máscara de ponta do New Era, só onde a linha tem folga */
@media (min-width: 1100px) {
  .dna-bloco h2 {
    -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 84%, rgba(0,0,0,.4) 100%);
            mask-image: linear-gradient(90deg, #000 0%, #000 84%, rgba(0,0,0,.4) 100%);
  }
}
.dna-bloco p.dna-lead {
  margin: 0 0 2.2rem;
  font-size: clamp(15px, 1.25vw, 18px); line-height: 1.55; color: var(--ne-mudo);
}
.dna-acoes { display: flex; gap: 1rem; flex-wrap: wrap; }

/* ---------------------------------------------------------------------
   3 · ENTRADA
   Cópia local da cascata/revelação do nova.css. Não dá para reaproveitar
   [data-cascata] direto: o motion.js observa esses atributos e acenderia
   o bloco assim que ele encostasse na tela — e aqui quem manda no tempo
   é a rolagem da própria seção.
   --------------------------------------------------------------------- */
.dna-bloco h2 .palavra { display: inline-block; white-space: nowrap; }
.dna-bloco h2 .car {
  display: inline-block;
  transform: translateY(40px); opacity: 0; filter: blur(16px);
  transition:
    transform 1200ms var(--ne-saida),
    opacity   1200ms var(--ne-saida),
    filter    1200ms var(--ne-saida);
  transition-delay: var(--atraso, 0ms);
}
.dna-bloco.mostra h2 .car { transform: none; opacity: 1; filter: blur(0); }

.dna-bloco .sobe {
  opacity: 0; transform: translateY(30px);
  transition: opacity 1.2s var(--ne-entra), transform 1.2s var(--ne-entra);
  transition-delay: var(--atraso, 0ms);
}
.dna-bloco.mostra .sobe { opacity: 1; transform: none; }

/* ---------------------------------------------------------------------
   4 · CELULAR
   Uma coluna, cartões menores — e a órbita fica mais estreita para os
   três não virarem uma pilha só.
   --------------------------------------------------------------------- */
@media (max-width: 900px) {
  .dna { height: 400vh; }
  .dna-bloco { flex-direction: column; align-items: flex-start; gap: 1.8rem; }
  .dna-bloco-esq, .dna-bloco-dir { max-width: 100%; width: 100%; }
  .dna-bloco p.dna-lead { margin-bottom: 1.6rem; }
  .dna-acoes { width: 100%; max-width: 320px; flex-direction: column; }
  .dna-acoes .btn { width: 100%; }
  .dna-cartao { padding: 1.2rem 1.3rem; border-radius: 20px; }
  .dna-kicker { margin-bottom: .9rem; }
}
@media (max-width: 560px) {
  .dna-cartao { width: 200px; }
  .dna-numero { font-size: 34px; }
  .dna-texto { font-size: 12.5px; line-height: 1.45; }
}

/* ---------------------------------------------------------------------
   5 · QUEM PEDE MENOS MOVIMENTO
   Sem órbita e sem cascata: o texto simplesmente está lá.
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .dna { height: 100svh; }
  .dna-orbita { display: none; }
  .dna-bloco h2 .car, .dna-bloco .sobe {
    transition: none !important; transform: none !important;
    opacity: 1 !important; filter: none !important;
  }
}