/* ============================================================
   WOW TIER 3 — WebGL hero particle orb (wow.v3.css)
   Lucius Fox 🎩 | JarvisNextGen.in | 2026-08-14
   Layering: hero-bg(z0) -> aurora(z1) -> canvas(z2) -> content(z2, DOM-later)
   ============================================================ */

#hero-orb {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.6s ease 0.4s;
}

#hero-orb.jng-orb-on { opacity: 1; }

/* Soft vignette above particles so hero copy stays legible
   (pure gradient, zero layout impact, CLS-safe) */
.hero-orb-shade {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background:
    radial-gradient(ellipse 90% 70% at 50% 42%, transparent 55%, rgba(10, 18, 44, 0.55) 100%),
    linear-gradient(180deg, rgba(10, 18, 44, 0.18) 0%, transparent 30%, transparent 72%, rgba(10, 18, 44, 0.4) 100%);
}

/* Reduced particles + no parallax on small screens; keep subtle orb */
@media (max-width: 720px) {
  #hero-orb { opacity: 0.55; }
  .hero-orb-shade { background: linear-gradient(180deg, rgba(10,18,44,0.22) 0%, transparent 32%, transparent 70%, rgba(10,18,44,0.45) 100%); }
}

/* Reduced motion: freeze at a single static frame (JS handles: render once, no rAF loop) */
@media (prefers-reduced-motion: reduce) {
  #hero-orb { opacity: 0.35; }
}