/**
 * NCDL Particle Network — Stylesheet  v1.0
 * ══════════════════════════════════════════
 * Styles for the full-screen animated canvas background.
 *
 * Design decisions
 * ─────────────────
 * • position: fixed keeps the canvas stationary while the page scrolls.
 * • z-index: 1 floats the canvas above static page content but below all
 *   Bootstrap-positioned UI (navbar z-1030, modals z-1050, tooltips z-1070).
 * • pointer-events: none guarantees the canvas never intercepts clicks,
 *   hovers, text selection, focus, or any other user interaction.
 * • will-change + translateZ(0) promotes the canvas to its own GPU
 *   compositing layer, enabling hardware-accelerated rasterisation.
 * • The canvas itself has no background-color; ctx.clearRect() leaves
 *   pixels fully transparent, so the page background always shows through.
 *
 * @file  public/assets/css/ncdl-particles.css
 */

/* ── Canvas ──────────────────────────────────────────────────────────────── */

#ncdl-particles-canvas {
  position: fixed;
  top:    0;
  left:   0;
  width:  100%;
  height: 100%;

  /* Above static content, below all Bootstrap UI components */
  z-index: 1;

  /* Never intercept mouse / touch / keyboard events */
  pointer-events: none;

  /* GPU layer promotion — smooth 60 fps compositing */
  will-change: transform;
  transform: translateZ(0);
  backface-visibility: hidden;

  /* Fade-in: starts invisible, JS adds .ncdl-particles-visible to reveal */
  opacity: 0;
  transition: opacity 1.2s ease;
}

#ncdl-particles-canvas.ncdl-particles-visible {
  opacity: 1;
}

/* ── Reduced-motion override ─────────────────────────────────────────────── */
/* The JS already skips initialisation if prefers-reduced-motion is set,    */
/* but this CSS rule is a belt-and-braces safety net.                       */

@media (prefers-reduced-motion: reduce) {
  #ncdl-particles-canvas {
    display: none !important;
  }
}

/* ── Mobile safety ───────────────────────────────────────────────────────── */
/* Ensure the canvas never causes horizontal overflow on narrow viewports.  */

#ncdl-particles-canvas {
  max-width: 100vw;
  max-height: 100vh;
  overflow: hidden;
}

/* ── Dark-mode tweak ─────────────────────────────────────────────────────── */
/* Slightly reduce canvas opacity on dark theme so the gold particles       */
/* don't over-saturate the interface — the engine colour values also adapt. */

[data-theme="dark"] #ncdl-particles-canvas {
  opacity: 0;          /* reset — JS will apply .ncdl-particles-visible */
}

[data-theme="dark"] #ncdl-particles-canvas.ncdl-particles-visible {
  opacity: 0.90;       /* subtle pull-back on dark bg */
}