/* ═════════════════════════════════════════════════════════════════════
   PULSE Immersive Background — Star Flow
   A canvas-rendered field of cyan dots in 3 depth layers.
   Dots flow vertically. Scroll direction + scroll velocity directly
   drive the flow direction + speed. Motion trails when fast.
   Cyan only. /js/star-flow.js drives it.
   ═════════════════════════════════════════════════════════════════════ */

body {
  background: #030306;
  color: var(--text-1);
}

/* ── Star-flow canvas ────────────────────────────────────────────────── */
#star-flow {
  position: fixed;
  inset: 0;
  z-index: var(--z-bg);
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  pointer-events: none;
  display: block;
  /* Promote to a separate compositor layer so other-content scroll doesn't
     trigger a canvas repaint. Stops the mobile URL-bar-driven jitter. */
  will-change: transform;
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* ── Soft cyan halo behind hero area (static, ambient) ───────────────── */
.bg-halo {
  position: fixed;
  top: 30vh; left: 50%;
  width: 90vmin; height: 90vmin;
  margin-left: -45vmin;
  border-radius: 50%;
  pointer-events: none;
  z-index: var(--z-bg);
  background: radial-gradient(circle, rgba(0, 212, 200, 0.10) 0%, transparent 60%);
  filter: blur(40px);
}

/* ── SVG film grain overlay ──────────────────────────────────────────── */
.grain {
  position: fixed;
  inset: 0;
  z-index: var(--z-hex);
  pointer-events: none;
  opacity: 0.035;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* ── Soft vignette — deepens edges ───────────────────────────────────── */
.vignette {
  position: fixed;
  inset: 0;
  z-index: var(--z-particles);
  pointer-events: none;
  background: radial-gradient(ellipse 110% 90% at 50% 45%, transparent 38%, rgba(0, 0, 0, 0.55) 100%);
}

/* ── Reduced motion — render static low-opacity frame ────────────────── */
@media (prefers-reduced-motion: reduce) {
  #star-flow { opacity: 0.5; }
}

/* ── Light theme ─────────────────────────────────────────────────────── */
[data-theme="light"] body { background: #f8f9fa; }
[data-theme="light"] #star-flow { opacity: 0.55; }
[data-theme="light"] .bg-halo { background: radial-gradient(circle, rgba(0, 168, 160, 0.10) 0%, transparent 60%); }
[data-theme="light"] .grain { opacity: 0.02; }
[data-theme="light"] .vignette {
  background: radial-gradient(ellipse 110% 90% at 50% 45%, transparent 50%, rgba(0, 0, 0, 0.08) 100%);
}