/* ============================================================
   BLOCK DISTORTION — Element styles

   TWO USAGE MODES:

   1. BACKGROUND IMAGE
      Add class `bd-stage` to an Elementor section/container
      that has a background image set via the panel.
      Optional: `bd-stage--radial` for cursor-zone mode.

   2. IMG ELEMENT
      Add class `bd-img` to an Elementor Image widget (or any
      parent element containing an <img>). JS generates a
      .bd-img-wrap div around the <img> at runtime.

   ----------------------------------------------------------------
   OPTIONAL — BRANDED RGB (on .bd-stage or .bd-img element):

     --bd-rgb-mode: branded;
     --bd-rgb-color-a: #00ffff;
     --bd-rgb-color-b: #ff00ff;
     --bd-rgb-mix: 0.6;
   ============================================================ */


/* ---- Stage mode ---- */

.bd-stage {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.bd-stage canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
  pointer-events: none;
}

.bd-stage > *:not(canvas) {
  position: relative;
  z-index: 1;
}

/* Strip bg-image once canvas is mounted to prevent double-render */
.bd-stage.bd-stage--canvas-active {
  background-image: none !important;
}


/* ---- Img mode ---- */

/* Generated at runtime by JS around the target <img> */
.bd-img-wrap {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  /* display and dimensions are inherited from the <img> context —
     JS sets display to match the img's computed value at wrap time */
}

.bd-img-wrap canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 1;
  pointer-events: none;
}

/* img hidden once canvas is mounted — visibility:hidden preserves layout */
.bd-img-wrap img {
  display: block;
  width: 100%;
}


/* ---- Shared guards ---- */

@media (prefers-reduced-motion: reduce) {
  .bd-stage canvas,
  .bd-img-wrap canvas { display: none; }
}

@media not all and (hover: hover) and (pointer: fine) {
  .bd-stage canvas,
  .bd-img-wrap canvas { display: none; }
}