/* ═══════════════════════════════════════════════════════════
   AuralogicX — Neural Network Background Styles
   css/background.css
═══════════════════════════════════════════════════════════ */

/* ─── Fixed canvas ───────────────────────────────────────── */
#neural-bg {
  position:       fixed;
  top:0; left:0;
  width:100%; height:100%;
  z-index:        -2;
  pointer-events: none;
  display:        block;
}

/* ─── Data streams (falling lines) ──────────────────────── */
.data-streams {
  position:       fixed;
  top:0; left:0; width:100%; height:100%;
  z-index:        -1;
  pointer-events: none;
  overflow:       hidden;
}
.data-stream {
  position:   absolute;
  top:        -200px;
  width:      1px;
  background: linear-gradient(180deg, transparent, rgba(0,212,255,.65), transparent);
  opacity:    0;
  animation:  stream-fall var(--dur,7s) linear var(--delay,0s) infinite;
}
.data-stream.v {
  background: linear-gradient(180deg, transparent, rgba(124,58,237,.65), transparent);
}
@keyframes stream-fall {
  0%   { opacity:0; transform:translateY(0) }
  8%   { opacity:.5 }
  92%  { opacity:.5 }
  100% { opacity:0; transform:translateY(110vh) }
}

/* ─── Circuit nodes (floating squares) ──────────────────── */
.circuit-nodes {
  position:       fixed;
  top:0; left:0; width:100%; height:100%;
  z-index:        -1;
  pointer-events: none;
  overflow:       hidden;
}
.cnode {
  position:          absolute;
  border:            1px solid rgba(0,212,255,.13);
  border-radius:     4px;
  opacity:           0;
  animation-fill-mode: both;
  animation:         cnode-drift var(--cndur,18s) ease-in-out var(--cndel,0s) infinite alternate;
}
.cnode.v { border-color: rgba(124,58,237,.16) }
@keyframes cnode-drift {
  0%   { opacity:0;    transform:translateY(0)     rotate(0deg)  }
  12%  { opacity:.35 }
  88%  { opacity:.35 }
  100% { opacity:0;    transform:translateY(-50px) rotate(45deg) }
}