/* ==========================================================================
   Additive layer for the Three.js variant (three.html).

   Kept in its own file so style.css stays byte-identical to the version the
   WordPress package ships — the demo is purely additive and can be dropped by
   deleting this link and the canvas.
   ========================================================================== */

/* the WebGL layer sits above the CSS glows and below the hero content */
.onep-landing .hero-bg{z-index:-2}

.onep-landing .three-bg{
  position:absolute;inset:0;z-index:-1;
  display:block;width:100%;height:100%;
  pointer-events:none;
}

/* The DOM panel stays in flow so its box keeps driving the layout (and the
   module reads that box to place the 3D plane), but it is not painted — the
   WebGL pass draws it instead. */
.onep-landing .hero-visual .dash-slider{visibility:hidden}

/* The shader pass draws the glow now — and unlike the static radial gradients
   it drifts and breathes. The painted ones are kept at a low level as the base
   so nothing pops if the shader is a frame late, and restored in full when
   WebGL is unavailable. */
.onep-landing .hero-bg .glow-right,
.onep-landing .hero-bg .glow-left,
.onep-landing .hero-bg .glow-bottom{opacity:0}

.no-webgl.onep-landing .hero-bg .glow-right,
.no-webgl.onep-landing .hero-bg .glow-left,
.no-webgl.onep-landing .hero-bg .glow-bottom{opacity:1}
.no-webgl.onep-landing .hero-visual .dash-slider{visibility:visible}

@media (prefers-reduced-motion:reduce){
  /* the module already renders a single static frame */
  .onep-landing .three-bg{opacity:.75}
}