/* shader-gradient.css
   Pick ONE mode per canvas.

   Full page:   <canvas class="shader-bg shader-bg--fixed" aria-hidden="true"></canvas>
                Put page content in a wrapper with  position: relative; z-index: 1;

   Contained:   <div class="shader-host">
                  <canvas class="shader-bg shader-bg--contained" aria-hidden="true"></canvas>
                  <div class="shader-content">…</div>
                </div>
*/

.shader-bg {
  display: block;
  pointer-events: none;
  z-index: 0;
  /* The canvas is drawn at ~35% resolution; let the browser smooth the upscale. */
  image-rendering: auto;
}

.shader-bg--fixed {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100vh;
  height: 100lvh; /* ignored by older browsers, which keep 100vh */
}

.shader-host {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.shader-bg--contained {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.shader-content {
  position: relative;
  z-index: 1;
}

/* Optional readability veil, like Luma's overlays. Place it between canvas and content. */
.shader-veil {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgb(0 0 0 / 0) 35%, rgb(0 0 0 / 0.45) 100%);
}
.shader-bg--fixed ~ .shader-veil { position: fixed; }

/* Panels on top: use a semi-opaque fill. Avoid backdrop-filter: blurring a moving
   canvas every frame is the most expensive thing you can do to it on a phone. */