/* ============================================================
   gradient-warp.css
   Animated voronoi-warped multi-color gradient background.

   Usage:
     <div class="gradient-warp"></div>                          -> shared instance
     <div class="gradient-warp" data-gw-mode="independent"></div> -> own WebGL context

   Tunables (override at :root for shared, or inline on element
   for independent):
     --gw-color-1..5   : 5 control colors (any CSS color)
     --gw-speed        : motion multiplier (0 = freeze)
     --gw-warp         : 0..1 displacement amplitude
     --gw-warp-size    : >0 voronoi cell frequency (smaller = bigger blobs)
     --gw-noise        : 0..1 noise overlay opacity (uses ../../assets/patterns/pattern-noise.webp
                         tiled at native 200×200, blended with mix-blend-mode: overlay)
     --gw-blend        : 0 = sharp bezier, 1 = soft bezier (continuous)
     --gw-resolution   : 0.1..2 internal render scale (default 0.5 for perf)
     --gw-fps          : render fps cap (default 30)
   ============================================================ */
@import "../../index.css";

:root {
  --gw-color-1: var(--color-primary-500);
  --gw-color-2: var(--color-primary-100);
  --gw-color-3: var(--color-neutral-100);
  --gw-color-4: var(--color-neutral-600);
  --gw-color-5: var(--color-primary-500);

  --gw-speed: 10;
  --gw-warp: 0.5;
  --gw-warp-size: 1;
  --gw-noise: 0.1;
  --gw-blend: 0.85;

  --gw-resolution: 0.5;
  --gw-fps: 30;
}

.gradient-warp {
  position: relative;
  isolation: isolate;
  /* CSS gradient fallback for environments without WebGL — the canvas
     paints over this when WebGL succeeds. */
  background-image: linear-gradient(135deg,
      var(--gw-color-1),
      var(--gw-color-2),
      var(--gw-color-3),
      var(--gw-color-4),
      var(--gw-color-5));
}

.gradient-warp>canvas[data-gw-canvas] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
  display: block;
  border-radius: inherit;
}

/* Noise overlay — tiled PNG at native 200×200, blended over the gradient.
   Sits at z-index: -1 alongside the canvas; document order puts ::after
   AFTER the canvas, so the noise paints on top of the WebGL render but
   below the user's content (which paints at the default stacking step). */
.gradient-warp::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: url("../../../assets/patterns/pattern-noise.webp");
  background-repeat: repeat;
  background-size: 200px 200px;
  background-position: 0 0;
  opacity: var(--gw-noise);
  mix-blend-mode: overlay;
  border-radius: inherit;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --gw-speed: 0;
  }
}