/* ============================================================
   Aya Atma — Floating particles background (cosmic bokeh)
   The .aya-particles wrapper fills its host container and sits
   BEHIND the container's content (z-index:-1 + isolation on host,
   applied by particles.js). Pointer events pass through.
   ============================================================ */

.aya-particles {
  position: absolute;
  inset: 0;
  z-index: -1;              /* behind the host's content, above its background */
  overflow: hidden;
  pointer-events: none;
  contain: strict;          /* perf: isolates layout/paint of the layer */
}

.aya-particles canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* ------------------------------------------------------------
   Optional helper: deep-space background + soft vignette.
   Add this class to the HOST container (in Elementor:
   Advanced → CSS Classes → aya-space-bg), or keep your own
   dark background instead.
   ------------------------------------------------------------ */
.aya-space-bg {
  background:
    /* vignette (darker edges, like the photo reference) */
    radial-gradient(120% 95% at 50% 45%,
      rgba(0, 0, 0, 0) 55%,
      rgba(1, 4, 12, 0.65) 100%),
    /* deep blue nebula glow, off-centre */
    radial-gradient(90rem 60rem at 30% 20%,
      #0b2b52 0%,
      #071a35 38%,
      #030b1a 72%,
      #01050e 100%);
  background-color: #02060f; /* fallback */
}