/* cosmic-hero.css — WebGL hero backdrop layering rules
   ------------------------------------------------------
   Pairs with /js/cosmic-hero-bg.js. Mount a
     <canvas id="cosmic-hero-canvas" class="cosmic-hero-bg" aria-hidden="true">
   as the FIRST child of a hero section. Section must establish a stacking
   context so the canvas sits behind text but inside the section bounds.
*/

.cosmic-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0.5;
  /* canvas itself is transparent; opacity controls the overall ambient
     intensity so hero text below remains highly readable */
}

/* Each target hero section gets these via the more-specific selector below.
   We use attribute selectors so we don't accidentally affect unrelated
   .hero / .page-hero on pages we did not touch. */
section.hero:has(> .cosmic-hero-bg),
section.page-hero:has(> .cosmic-hero-bg) {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

/* All direct children of a hero containing the canvas need to sit ABOVE
   the canvas. The canvas is z-index: 0; bumping siblings to z-index: 1
   keeps the layout the same but makes text/buttons receive pointer events
   and render on top. */
section.hero:has(> .cosmic-hero-bg) > *:not(.cosmic-hero-bg),
section.page-hero:has(> .cosmic-hero-bg) > *:not(.cosmic-hero-bg) {
  position: relative;
  z-index: 1;
}

/* Mobile: dial the opacity down a touch more so smaller hero text on
   390px-wide screens stays crisp against the particle field. */
@media (max-width: 768px) {
  .cosmic-hero-bg {
    opacity: 0.42;
  }
}

/* Respect user preference — JS already renders a static frame, but we also
   tone down opacity to minimize visual noise for reduced-motion users. */
@media (prefers-reduced-motion: reduce) {
  .cosmic-hero-bg {
    opacity: 0.35;
  }
}