/* particles.css
 *
 * Styles for the Noetroniq background "snake" particle effect. See
 * particles.js for the runtime behavior. Two host layers (one above
 * LumenLayers, one below) plus the per-element styling for the snake
 * (a single tapered line with a gradient stroke — no separate head
 * circle; the line's leading edge IS the head).
 *
 * The layers are position: fixed and full-viewport. They sit at the
 * same z-index as .lumen-lighting (0), but DOM order determines stacking
 * among them: the BG layer is inserted BEFORE .lumen-lighting, the FG
 * layer is inserted AFTER. Site content (.subpage-shell, .site-header,
 * .theme-toggle) is at z-index 1+, so it always stays on top.
 */

.noetroniq-particles-layer {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.noetroniq-particles-layer svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* ---- Layer-level depth ------------------------------------------------- */

/* The BG layer is "deeper": softened by LumenLayers' screen blend, so
   the snakes here read as muted, in the background. */
.noetroniq-particles-bg .noetroniq-snake-tail {
  filter: blur(1.2px);
  opacity: 0.4;
}

/* The FG layer is "closer": crisp with a soft glow. The drop-shadow uses
   currentColor, which is set inline by particles.js to the snake's
   picked color (so the glow is in the snake's color, not a fixed color). */
.noetroniq-particles-fg .noetroniq-snake-tail {
  filter: drop-shadow(0 0 1px currentColor) drop-shadow(0 0 3px currentColor);
  opacity: 0.75;
}