/* =====================================================================
   cm-fx.css — hosts for the WebGL gradient, and the fallback beneath it.

   The CSS gradient is painted ALWAYS, on the host itself. The canvas is
   drawn on top of it when WebGL2 is available. That means the no-WebGL
   case, the kill-switch case and the pre-JS first paint are all the same
   code path — there is no flash, and nothing can ever render as a blank
   box. Constraint 5: a decorative effect must never gate content.
   ===================================================================== */
.cm-fx-host{
  position:relative;
  isolation:isolate;
  /* the fallback / first-paint gradient — dark by construction */
  background:
    radial-gradient(ellipse 90% 70% at 22% 18%, rgba(201,162,75,.13) 0%, rgba(0,0,0,0) 62%),
    radial-gradient(ellipse 80% 60% at 78% 82%, rgba(227,199,122,.09) 0%, rgba(0,0,0,0) 58%),
    #050403;
}
/* The canvas sits at z-index:-1 INSIDE the host's own stacking context
   (isolation:isolate contains it). Deliberately no rule touching the other
   children: the homepage hero already has a hand-tuned stack — video 0,
   veil 1, grid 2, content 10 — and forcing `position:relative;z-index:1`
   onto all of them would have un-absolute-positioned the video. */
.cm-fx-host > .cm-fx-canvas{
  position:absolute; inset:0; width:100%; height:100%;
  display:block; z-index:-1; pointer-events:none; border:0;
}

/* Mirror the fallback under RTL so the light source does not jump sides
   when the reader switches to Arabic. */
[dir="rtl"] .cm-fx-host{
  background:
    radial-gradient(ellipse 90% 70% at 78% 18%, rgba(201,162,75,.13) 0%, rgba(0,0,0,0) 62%),
    radial-gradient(ellipse 80% 60% at 22% 82%, rgba(227,199,122,.09) 0%, rgba(0,0,0,0) 58%),
    #050403;
}

/* Reduced motion: the canvas already draws a single still frame, but if the
   effect is off entirely the CSS gradient below is what shows. Nothing moves. */
@media (prefers-reduced-motion: reduce){
  .cm-fx-canvas{ /* one frame is drawn by JS then the loop never starts */ }
}