/* ============================================================
 * JESUN.DEV hero 3D layer styles (Vega, Motion Designer)
 * Pairs with hero3d.js and hero3d-snippet.html. Nova integrates.
 * No em dash anywhere in this file.
 * ============================================================ */

/* ---- stacking hardening ----
 * The 3D layer uses z-index -1. Giving .hero its own stacking
 * context keeps the layer pinned behind the hero content but
 * above the page background, regardless of insertion order.
 * isolation changes nothing else about layout or paint. */
.hero {
  isolation: isolate;
}

/* ---- 3D layer: behind everything in the hero ----
 * Stack order inside .hero (bottom to top):
 *   -1  .hero3d-layer   (this file, Three.js constellation)
 *    0  .circuit svg    (static traces, style.css)
 *    0  .particle-layer (2D particles, motion.css / motion.js)
 *    0  .hero::before / ::after (glow washes, style.css)
 *    2  .hero-inner     (all copy and CTAs, style.css)
 *    -   .scroll-cue    (auto, paints above)
 * The canvas never intercepts input. */
.hero3d-layer {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}

.hero3d-layer canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* ---- reduced motion: the layer never initializes ----
 * (hero3d.js exits before the CDN fetch). The static hero
 * background (obsidian + blueprint grid + glow washes) is the
 * fallback, so nothing else is needed here. This rule is belt
 * and suspenders for any markup-only edge case. */
@media (prefers-reduced-motion: reduce) {
  .hero3d-layer {
    display: none !important;
  }
}