/* ============================================================
   Warped Dots – Final CSS (Salient Child Theme)
   Stack order (top → bottom):
     Content (z:3)
     → .wdbg-layer  (z:2)
     → .row-bg-overlay (z:1)
     → .row-bg (z:0)
   Apply class: wdbg-target
   ============================================================ */

/* === Base layer positioning === */
.wdbg-target {
  position: relative;
  isolation: isolate; /* confine blend modes */
  overflow: hidden;
}

/* Salient background pieces at base */
.wdbg-target .row-bg-wrap { position: absolute; inset: 0; z-index: 0; }
.wdbg-target .row-bg        { z-index: 0; }  /* background image */
.wdbg-target .row-bg-overlay{ z-index: 1; }  /* gradient/blue overlay */

/* Our interactive dots layer (canvas) */
.wdbg-target > .wdbg-layer {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}
.wdbg-target > .wdbg-layer > canvas {
  position: absolute;
  inset: 0;
  display: block;
}

/* Content sits above everything */
.wdbg-target > .wpb_column,
.wdbg-target > .vc_column_container,
.wdbg-target .vc_row_inner,
.wdbg-target .wpb_wrapper {
  position: relative;
  z-index: 3;
}

/* ============================================================
   Default visual + motion variables
   You can override these per-row using inline styles or classes
   ============================================================ */
.wdbg-target {
  /* Visual */
  --wdbg-dot-color: rgba(255, 255, 255, 0.05);  /* dot fill color */
  --wdbg-radius: 2.2;       /* dot radius (px) */
  --wdbg-spacing: 20;       /* grid spacing (px) - smaller = denser */
  
  /* Interaction / motion */
  --wdbg-mouse-strength: 150; /* px radius reacting to cursor */
  --wdbg-spring-k: 0.035;     /* spring stiffness */
  --wdbg-damping: 0.86;       /* 0.75–0.99 (higher = smoother) */
  --wdbg-speed: 1.0;          /* overall speed multiplier */
  --wdbg-irregularity: 0;  /* randomness (0–1) */
}

/* ============================================================
   Optional utility classes – stackable with .wdbg-target
   ============================================================ */

/* Dot spacing */
.wdbg-dots-tight  { --wdbg-spacing: 20; } /* even tighter grid */
.wdbg-dots-normal { --wdbg-spacing: 32; } /* default */
.wdbg-dots-loose  { --wdbg-spacing: 52; } /* wider grid */

/* Dot strength / opacity */
.wdbg-dots-soft   { --wdbg-dot-color: rgba(255, 255, 255, 0.20); }
.wdbg-dots-strong { --wdbg-dot-color: rgba(255, 255, 255, 0.32); }

/* Dot size */
.wdbg-dots-small  { --wdbg-radius: 1.6; }
.wdbg-dots-large  { --wdbg-radius: 2.6; }

/* ============================================================
   Quality-of-life tweaks
   ============================================================ */

/* Kill margin collapse in hero rows */
.wdbg-target .vc_column_container > .vc_column-inner { padding-top: 0 !important; }
.wdbg-target .wpb_wrapper > *:first-child { margin-top: 0 !important; }

/* Remove tiny hairline gap to next row (Salient quirk) */
.wdbg-target + .vc_row { margin-top: 0 !important; position: relative; top: -1px; }

/* Respect “reduced motion” accessibility setting */
@media (prefers-reduced-motion: reduce) {
  .wdbg-target {
    --wdbg-spring-k: 0.02;
    --wdbg-damping: 0.92;
    --wdbg-speed: 0.7;
  }
}