/* ===== 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;
}

/* ===== 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; }
}

/* ===== Mini-game "O Caminho do Lead" ===== */
#game-wrap { height: clamp(380px, 56vh, 560px); }
#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); }
#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; } }