/* serpent.css — THE SERPENT background layers (PLAN_BACKGROUND.md section 2) */

/* LAYER 1: Three.js particle field container.
   Pages provide <div id="field-canvas"> in HTML; field-background.js only
   styles the container when it self-creates one, so CSS must position it.
   WITHOUT this rule the WebGL canvas sits in normal flow at the top of the
   page and pushes all content down a full viewport. */
#field-canvas {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
#field-canvas canvas {
  display: block;
}

/* LAYER 3: Ambient Field — deep background φ-circles + drifting particles */
.sacred-ambient-canvas {
  position: fixed;
  inset: 0;
  z-index: -3;
  pointer-events: none;
}

/* LAYER 2: The Serpent — morphing geometry nodes on a golden thread */
.sacred-serpent-canvas {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
}

/* Reduced motion: no animation runs (JS draws a single static frame);
   the static canvases stay visible. */
@media (prefers-reduced-motion: reduce) {
  .sacred-ambient-canvas,
  .sacred-serpent-canvas {
    display: block;
    visibility: visible;
  }
}