/* ===== TOKENS ===== */
:root {
  --bg: #0a1228;
  --surface: #0e1a38;
  --surface-2: #13234a;
  --border-soft: rgba(255,255,255,0.05);
  --border: rgba(255,255,255,0.10);
  --text: #ffffff;
  --text-2: #cbd5e1;   /* slate-300 */
  --text-3: #94a3b8;   /* slate-400 */
  --energy-core: #fff7ed;
  --energy: #fb923c;   /* orange-400 */
  --energy-deep: #f97316; /* orange-500 */
  --circuit: #2a4a7c;
}

html { scroll-behavior: smooth; }
body { background-color: var(--bg); color: var(--text); }

/* ===== KEYFRAMES ===== */
@keyframes fadeInUpBlur {
  0%   { opacity: 0; transform: translateY(24px); filter: blur(8px); }
  100% { opacity: 1; transform: translateY(0);   filter: blur(0); }
}
.reveal { opacity: 0; }
.reveal.in { animation: fadeInUpBlur 0.8s cubic-bezier(0.2,0.8,0.2,1) both; }
.reveal.d1 { animation-delay: 0.10s; }
.reveal.d2 { animation-delay: 0.20s; }
.reveal.d3 { animation-delay: 0.30s; }

@keyframes nodePulse {
  0%,100% { filter: drop-shadow(0 0 4px var(--energy)); }
  50%     { filter: drop-shadow(0 0 16px var(--energy-deep)); }
}
.trail-node.lit { animation: nodePulse 2s ease-in-out infinite; }

/* ===== COMPONENTES (além do Tailwind) ===== */
/* Electric card: borda com gradiente glow */
.electric-card { position: relative; }
.electric-card::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  padding: 1px;
  background: linear-gradient(180deg, var(--energy) 0%, rgba(251,146,60,0) 70%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none;
}

/* ===== Glass effect (ref: Fundamentos de Vibe Design) ===== */
/* base navy translúcida + véu branco diagonal + borda refratada (branca no topo-esq, laranja no canto-inf-dir) */
.glass-card {
  position: relative;
  -webkit-backdrop-filter: blur(13px) saturate(1.3);
  backdrop-filter: blur(13px) saturate(1.3);
  background-color: rgba(14, 26, 56, 0.20) !important; /* bem translúcido: as luzes do vídeo aparecem por trás do vidro (blur menor preserva os pontos de luz) */
  background-image:
    radial-gradient(circle at var(--gx, 50%) var(--gy, 0%), rgba(255,255,255,0.10), transparent 55%),
    linear-gradient(135deg, rgba(255,255,255,0.06), rgba(255,255,255,0.015) 55%);
}
.tilt { will-change: transform; }
/* fallback p/ navegadores sem backdrop-filter (alguns mobile): card mais opaco pra manter legibilidade */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .glass-card { background-color: rgba(14, 26, 56, 0.82) !important; }
}
.glass-card::before,
.glass-card::after {
  content: ""; position: absolute; inset: 0;
  border-radius: inherit; border: 1px solid transparent;
  pointer-events: none;
}
.glass-card::before { /* brilho de vidro no topo-esquerdo */
  border-color: rgba(255,255,255,0.55);
  -webkit-mask-image: linear-gradient(135deg, #fff, transparent 45%);
  mask-image: linear-gradient(135deg, #fff, transparent 45%);
}
.glass-card::after { /* reflexo laranja no canto inferior-direito */
  border-color: rgba(251,146,60,0.5);
  -webkit-mask-image: linear-gradient(135deg, transparent 55%, #fff);
  mask-image: linear-gradient(135deg, transparent 55%, #fff);
}

/* ===== REDUCED MOTION ===== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal, .reveal.in { animation: none !important; opacity: 1 !important; filter: none !important; }
  .trail-node.lit { animation: none !important; }
  /* hover scale desligado */
  .hover\:scale-105:hover, .hover\:scale-\[1\.02\]:hover { transform: none !important; }
  /* videos de fundo viram poster estatico (WCAG 2.2.2 Pause/Stop/Hide) */
  #hero-video, #scroll-bg { display: none !important; }
}

/* ===== MODO FOCO (toggle manual — pílula no canto inf-esq) ===== */
/* Equilibrado: espelha o reduced-motion + esconde cometa e o jogo; MANTÉM o vidro. */
html.modo-foco { scroll-behavior: auto; }
html.modo-foco .reveal,
html.modo-foco .reveal.in { animation: none !important; opacity: 1 !important; filter: none !important; }
html.modo-foco .trail-node.lit { animation: none !important; }
html.modo-foco .hover\:scale-105:hover,
html.modo-foco .hover\:scale-\[1\.02\]:hover { transform: none !important; }
html.modo-foco #hero-video,
html.modo-foco #scroll-bg { display: none !important; }
/* extras do modo foco: cometa/trilha, tilt 3D e o jogo do final somem */
html.modo-foco #trail,
html.modo-foco #trail-top { display: none !important; }
html.modo-foco .tilt { transform: none !important; }
html.modo-foco #caminho { display: none !important; }

/* ===== Logos dos clientes (PB, branco, sem fundo) ===== */
.logo-img { height: 30px; width: auto; max-width: 140px; object-fit: contain;
  filter: brightness(0) invert(1); opacity: .68; transition: opacity .25s; }
.logo-link:hover .logo-img { opacity: 1; }
@media (min-width: 768px) { .logo-img { height: 36px; } }

/* ===== Trilha do cometa: zigue-zague em TODOS os formatos. O script.js corre as verticais nas
   calhas/margens e cruza a horizontal só nos vãos vazios entre seções (nunca por cima do conteúdo).
   No mobile huga as bordas (margem fina); no desktop usa as margens largas do conteúdo centralizado ===== */

/* ===== Foto do Nikolai (integrada — derrete no fundo) ===== */
.nikolai-photo {
  border-radius: 14px;
  -webkit-mask-image: linear-gradient(to bottom, #000 56%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 56%, transparent 100%);
}
.foto-vazia { width: 100%; max-width: 22rem; aspect-ratio: 1; border-radius: 14px;
  background: linear-gradient(160deg, var(--surface-2), var(--bg));
  display: grid; place-items: center; }
.foto-vazia .nikolai-photo { display: none; }
.foto-vazia::after { content: "NZ"; font-family: 'Inter', sans-serif; font-weight: 900;
  font-size: 2.75rem; letter-spacing: .04em; color: var(--text-3); }

/* ===== Mini-game "O Caminho do Lead" (enfeite full-bleed na largura) ===== */
#game-wrap { height: clamp(460px, 70vh, 680px); }
#game-canvas { display: block; width: 100%; height: 100%; outline: none; cursor: pointer; }
#game-canvas:focus-visible { box-shadow: inset 0 0 0 2px rgba(251,146,60,.6); }
summary:focus-visible { outline: none; box-shadow: 0 0 0 2px rgba(251,146,60,.6); border-radius: 10px; }
#btn-ligar, #btn-auto { transition: opacity .4s ease, transform .4s ease; }
#btn-ligar.is-hidden, #btn-auto.is-hidden { opacity: 0; pointer-events: none; transform: translateY(8px); }
#game-queda {
  position: absolute; left: 50%; top: 38%; transform: translateX(-50%);
  font-family: 'JetBrains Mono', monospace; font-size: 13px; color: #fff7ed;
  background: rgba(10,18,40,.85); padding: 8px 14px; border-radius: 8px;
  opacity: 0; transition: opacity .3s ease; pointer-events: none; white-space: nowrap;
}
#game-queda.show { opacity: 1; }
@keyframes btnPulse { 0%,100% { box-shadow: 0 0 30px -6px rgba(249,115,22,.6); } 50% { box-shadow: 0 0 36px 0 rgba(249,115,22,.95); } }
#btn-ligar.pulse { animation: btnPulse 1.1s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { #game-hint { display: none; } #btn-ligar.pulse { animation: none; } }