/* Landing do AutoDJ. Paleta e vocabulário visual do próprio app: fundo escuro
   azulado, verde do deck A, azul do deck B. */
:root {
  --bg: #04070d;
  --bg-2: #0b1220;
  --txt: #e2e8f0;
  --txt-2: #94a3b8;
  --linha: #1e293b;
  --verde: #4ade80;
  --azul: #60a5fa;
  --card: rgba(15, 23, 42, 0.72);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--txt);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--azul); }

.wrap { width: min(1120px, 92vw); margin-inline: auto; }

/* ---------- herói ---------- */
.hero {
  position: relative; overflow: hidden;
  padding: 96px 0 72px; min-height: 100vh;
  display: flex; align-items: center;
}
/* o fundo em gradiente é o PLANO B da cena 3D: sem WebGL, sobra ele, e a seção
   continua apresentável em vez de virar um retângulo preto. */
.hero::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(900px 520px at 50% 30%, #12233d 0%, #060a12 62%, var(--bg) 100%);
  z-index: 0;
}
/* A cena é fundo, não conteúdo: opacidade baixa e uma máscara que apaga o miolo,
   onde ficam título e botões. Sem a máscara as barras cruzam o texto e a página
   fica ilegível — foi o que aconteceu na primeira montagem. */
/* A cena é o herói — quase opaca. A máscara apaga só a FAIXA DO TEXTO (topo),
   não o centro inteiro: na primeira tentativa o buraco era tão grande que a cena
   sumia e sobrava uma página escura e vazia. */
#cena {
  position: absolute; inset: 0; z-index: 1; opacity: 0.95;
  -webkit-mask-image: radial-gradient(78% 42% at 50% 20%, transparent 0%, transparent 40%, #000 82%);
  mask-image: radial-gradient(78% 42% at 50% 20%, transparent 0%, transparent 40%, #000 82%);
}
#cena canvas { display: block; width: 100%; height: 100%; }
/* ⚠️ VÉU OBRIGATÓRIO. Com o anel aceso atrás, o subtítulo cinza sobre barras
   brancas simplesmente some — contraste zero. O véu é um gradiente radial escuro
   sob o texto: preserva a cena (não é uma caixa opaca) e devolve a leitura. */
.hero-conteudo { position: relative; z-index: 2; text-align: center; }
.hero-conteudo::before {
  content: "";
  position: absolute; inset: -8% -12% -18% -12%;
  background: radial-gradient(60% 58% at 50% 42%, rgba(4, 7, 13, 0.92) 0%, rgba(4, 7, 13, 0.72) 46%, transparent 78%);
  z-index: -1;
  pointer-events: none;
}
/* e o texto ganha peso: cinza claro em vez de médio, com sombra de apoio */
.sub { text-shadow: 0 2px 18px rgba(4, 7, 13, 0.95); }
.tagline { text-shadow: 0 2px 20px rgba(4, 7, 13, 0.9); }

.marca { display: inline-flex; align-items: center; gap: 14px; }
.marca i { color: #7dd3fc; font-style: normal; font-size: 44px; line-height: 1; }
.marca b { font-size: 60px; font-weight: 800; letter-spacing: -1.6px; }

.tagline { font-size: clamp(19px, 2.4vw, 26px); color: var(--txt); margin: 14px 0 8px; font-weight: 600; }
.sub { color: #cbd5e1; max-width: 62ch; margin: 0 auto 30px; }

.acoes { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.btn {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 12px 22px; border-radius: 999px; text-decoration: none;
  font-weight: 700; font-size: 15px; border: 1px solid transparent;
  transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
.btn-1 { background: var(--azul); color: #04070d; }
.btn-2 { border-color: var(--linha); color: var(--txt); background: rgba(15, 23, 42, 0.6); }
.btn:hover { transform: translateY(-2px); }
.btn-2:hover { border-color: var(--azul); }
@media (prefers-reduced-motion: reduce) { .btn:hover { transform: none; } }

/* ---------- vídeo (Remotion) ---------- */
.video-caixa {
  position: relative; z-index: 2; margin: 0 auto;
  width: min(940px, 92vw); border-radius: 16px; overflow: hidden;
  border: 1px solid var(--linha); box-shadow: 0 26px 70px rgba(0, 0, 0, 0.55);
  background: #000;
}
.video-caixa video { display: block; width: 100%; height: auto; }

/* ---------- seções ---------- */
section { padding: 74px 0; border-top: 1px solid var(--linha); }
h2 { font-size: clamp(25px, 3.2vw, 34px); margin: 0 0 10px; letter-spacing: -0.6px; }
.secao-lead { color: var(--txt-2); max-width: 66ch; margin: 0 0 34px; }

.grade { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(272px, 1fr)); }
.card {
  background: var(--card); border: 1px solid var(--linha);
  border-radius: 14px; padding: 20px 20px 22px;
}
.card h3 { margin: 0 0 8px; font-size: 17px; display: flex; align-items: center; gap: 9px; }
.card p { margin: 0; color: var(--txt-2); font-size: 14.5px; }
.card .ico { font-size: 20px; }
.card.verde { border-left: 3px solid var(--verde); }
.card.azul { border-left: 3px solid var(--azul); }

figure { margin: 0 0 10px; }
figure img {
  width: 100%; height: auto; display: block;
  border-radius: 12px; border: 1px solid var(--linha);
}
figcaption { color: var(--txt-2); font-size: 13.5px; margin-top: 9px; text-align: center; }

.telas { display: grid; gap: 26px; }

table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--linha); }
th { color: var(--txt); font-weight: 700; }
td { color: var(--txt-2); }
code {
  background: rgba(96, 165, 250, 0.12); color: #bfdbfe;
  padding: 1px 6px; border-radius: 5px; font-size: 0.9em;
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}
pre {
  background: #0b1220; border: 1px solid var(--linha); border-radius: 12px;
  padding: 16px 18px; overflow-x: auto; font-size: 13.5px;
}
pre code { background: none; color: #cbd5e1; padding: 0; }

.aviso {
  border-left: 3px solid #f59e0b; background: rgba(245, 158, 11, 0.08);
  padding: 14px 16px; border-radius: 0 10px 10px 0; color: var(--txt-2); font-size: 14.5px;
}

footer { border-top: 1px solid var(--linha); padding: 34px 0 54px; color: var(--txt-2); font-size: 14px; }
footer a { margin-right: 16px; }

@media (max-width: 640px) {
  .marca b { font-size: 42px; }
  .hero { padding: 58px 0 44px; }
  #cena { opacity: 0.35; }
}

/* seta de rolagem: diz que a página continua, sem ocupar o palco */
.rolar {
  display: block; width: 26px; height: 42px; margin: 46px auto 0;
  border: 2px solid var(--linha); border-radius: 999px; position: relative;
}
.rolar span {
  position: absolute; left: 50%; top: 9px; width: 4px; height: 8px;
  margin-left: -2px; border-radius: 2px; background: var(--azul);
  animation: descer 1.9s ease-in-out infinite;
}
@keyframes descer { 0%,100% { transform: translateY(0); opacity: 1 } 60% { transform: translateY(13px); opacity: .2 } }
@media (prefers-reduced-motion: reduce) { .rolar span { animation: none } }

/* segunda linha do herói: a história de como foi feito, um degrau abaixo da promessa */
.sub-2 { font-size: 15.5px; color: #94a3b8; margin-top: -12px; }
.sub-2 code { font-size: 0.95em; }

/* números da seção de construção */
.numeros {
  display: grid; gap: 14px; margin: 30px 0 0;
  grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
}
.numeros div {
  background: var(--card); border: 1px solid var(--linha);
  border-radius: 12px; padding: 18px 16px; text-align: center;
}
.numeros b {
  display: block; font-size: 30px; font-weight: 800; letter-spacing: -1px;
  background: linear-gradient(96deg, var(--verde), var(--azul));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.numeros span { display: block; color: var(--txt-2); font-size: 13px; margin-top: 3px; }

/* ---------- diagrama animado do SEM-VOZ ---------- */
/* O movimento CONTA a história: um pulso viaja pelas ligações (a faixa indo e
   voltando), e no passo do modelo a trilha de voz APAGA enquanto as outras três
   ficam — que é literalmente o que o instrumental é. */
.fluxo {
  display: flex; align-items: stretch; gap: 6px; flex-wrap: wrap;
  margin-top: 26px;
}
.fx-passo {
  flex: 1 1 168px; min-width: 168px;
  background: var(--card); border: 1px solid var(--linha);
  border-radius: 14px; padding: 16px 14px; text-align: center;
  animation: fx-entra .5s ease both; animation-delay: calc(var(--i) * .12s);
}
.fx-larga { flex: 1.6 1 250px; }
.fx-ico { font-size: 26px; line-height: 1; margin-bottom: 8px; }
.fx-passo b { display: block; font-size: 15px; margin-bottom: 4px; }
.fx-passo span { display: block; color: var(--txt-2); font-size: 12.5px; line-height: 1.5; }

/* ligação com pulso correndo */
.fx-liga { flex: 0 0 34px; position: relative; align-self: center; height: 2px; background: var(--linha); border-radius: 2px; }
.fx-liga i {
  position: absolute; top: -2px; left: 0; width: 12px; height: 6px; border-radius: 3px;
  background: var(--azul); box-shadow: 0 0 12px var(--azul);
  animation: fx-pulso 2.4s linear infinite;
}
@keyframes fx-pulso { 0% { left: -12px; opacity: 0 } 15% { opacity: 1 } 85% { opacity: 1 } 100% { left: 34px; opacity: 0 } }
@keyframes fx-entra { from { opacity: 0; transform: translateY(10px) } to { opacity: 1; transform: none } }

/* as quatro trilhas do modelo */
.stems { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 12px; }
.stem { text-align: center; }
.stem i {
  display: block; height: 30px; border-radius: 4px; margin-bottom: 5px;
  animation: stem-pulsa 1.1s ease-in-out infinite alternate;
}
.stem b { font-size: 10.5px; font-weight: 600; color: var(--txt-2); letter-spacing: .2px; }
.s-bat i { background: var(--verde); animation-delay: .0s }
.s-bax i { background: #34d399; animation-delay: .18s }
.s-out i { background: var(--azul); animation-delay: .36s }
/* a VOZ é a que sai: pisca e apaga, num ciclo mais longo que o das outras */
.s-voz i { background: #f87171; animation: stem-sai 3.4s ease-in-out infinite; }
.s-voz b { color: #fca5a5; }
@keyframes stem-pulsa { from { transform: scaleY(.55) } to { transform: scaleY(1) } }
@keyframes stem-sai {
  0%, 30% { opacity: 1; transform: scaleY(1) }
  55%, 90% { opacity: .12; transform: scaleY(.2) }
  100% { opacity: 1; transform: scaleY(1) }
}

@media (prefers-reduced-motion: reduce) {
  .fx-passo, .fx-liga i, .stem i { animation: none !important }
  .s-voz i { opacity: .2 }
}
@media (max-width: 720px) {
  .fx-liga { display: none }
  .fluxo { gap: 10px }
}

/* crédito de construção: menor que o resto do rodapé, é nota de rodapé de verdade */
.creditos { font-size: 13px; color: #64748b; line-height: 1.7; max-width: 78ch; }
.creditos a { color: #7dd3fc; }
.creditos code { font-size: 0.92em; }

/* subtítulo dentro de seção e a tabela do modelo */
.sub-h3 { font-size: 19px; margin: 40px 0 8px; letter-spacing: -0.3px; }
.tab-modelo th:first-child { color: var(--txt-2); font-weight: 600; white-space: nowrap; }
.tab-modelo td { vertical-align: top; }