/* =========================================================================
   XONWARE — Mesh canvas CSS
   Positions the WebGL <canvas> as a backdrop layer inside [data-mesh]
   containers. Provides a CSS-only fallback for environments without WebGL.
   ========================================================================= */

[data-mesh] {
  position: relative;
}

/* The canvas is appended as the LAST child of the host but positioned
   absolutely behind all foreground content via z-index: 0. Other content
   in the host should set position:relative + z-index:1 to layer above. */
.xa-mesh-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  /* Match host border-radius if any — the canvas IS a rectangle but
     visually inherits the host's clipping when overflow:hidden is set. */
  border-radius: inherit;
}

/* Ensure direct children of [data-mesh] sit above the mesh */
[data-mesh] > *:not(.xa-mesh-canvas) {
  position: relative;
  z-index: 1;
}

/* CSS fallback when WebGL is unavailable — uses the static mesh from
   premium-polish.css `.xa-multihero::before` style. */
.xa-mesh-fallback {
  background:
    radial-gradient(ellipse 50% 40% at 18% 22%, rgba(26, 35, 126, .14) 0%, transparent 65%),
    radial-gradient(ellipse 45% 35% at 82% 28%, rgba(139, 197, 63, .12) 0%, transparent 65%),
    radial-gradient(ellipse 55% 45% at 50% 90%, rgba(34, 211, 238, .14) 0%, transparent 70%);
}

/* When the mesh is INSIDE .xa-multihero (which has overflow:hidden),
   the canvas is naturally clipped to the section. */

/* Allow the existing ::before mesh in premium-polish.css to be hidden
   when a real WebGL mesh is rendered on the same container. */
.xa-multihero[data-mesh]::before,
.page-hero[data-mesh]::before {
  display: none;
}