/* ==========================================================================
   HX Smoke Page Background
   One continuous WebGL fluid-sim smoke background behind the entire page,
   scrolling naturally with page content.
   The native browser cursor is intentionally left untouched — no rule in
   this file ever sets `cursor`.
   ========================================================================== */

/* Full-page wrapper, sized to the document's scrollable height (set by JS).
   Sits behind everything (z-index: 0) as a plain background layer — no
   blend mode, so it never mixes with page text or images. */
#hxsp-page-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

#hxsp-smoke-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* Existing page content needs to render above the wrapper. Only nudge
   z-index — position is left alone so we never override a theme's own
   fixed/sticky headers or other intentional positioning. Because the
   wrapper is position:absolute with z-index:0, any body child in normal
   static flow already paints above it by default HTML stacking rules; this
   rule only matters for children that already have position set (relative/
   absolute/fixed/sticky) without their own z-index, which would otherwise
   create a new stacking context at z-index:auto that could tie or lose
   against the wrapper on some browsers. */
body > *:not(#hxsp-page-wrapper) {
  z-index: 1;
}

/* Hard kill switch for touch/coarse-pointer devices — there's no mouse to
   react to there anyway, so the canvas is simply not shown. */
@media (hover: none), (pointer: coarse) {
  #hxsp-page-wrapper {
    display: none !important;
  }
}