/* dot-wave — canvas dot-field background effect
   Positioning is pure CSS (attribute-selector driven): the JS reads
   data-dot-wave-position too (it needs to know the crop direction for the
   no-shrink field), but never computes layout — it only bridges
   `data-dot-wave-size` into `--dot-wave-size`. The canvas's own resize logic
   reads getBoundingClientRect(), so it adapts to whatever box these rules
   produce.

   `data-dot-wave-inset` (native CSS `inset` shorthand — 1/2/4 values, e.g.
   "20%" or "20% 0 -20% 0" for a shifted/overflowing box) is applied as an
   inline style by the JS and always overrides the position/-size rules
   below, since inline style beats any selector here. See dot-wave.md.

   Follows this project's data-effect convention (docs/EFFECTS.md):
   root `data-effect` token list + per-effect `data-dot-wave-*` options.

   Requires: the parent element must have `position: relative` (or absolute/
   fixed/sticky) for the absolute positioning below to resolve against it,
   and should have `isolation: isolate` so the canvas's `z-index: -1` (it
   paints behind sibling content by default) stays scoped to that parent
   instead of the page's global stacking order. Not set automatically, see
   dot-wave.md. */

[data-component]:has([data-effect~="dot-wave"]){
  isolation: isolate;
  position: relative;
}

canvas[data-effect~="dot-wave"] {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
}

canvas[data-effect~="dot-wave"][data-dot-wave-position="full"] {
  inset: 0;
  width: 100%;
  height: 100%;
}

canvas[data-effect~="dot-wave"][data-dot-wave-position="top"] {
  inset: auto;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: var(--dot-wave-size, 30%);
}

canvas[data-effect~="dot-wave"][data-dot-wave-position="bottom"] {
  inset: auto;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: var(--dot-wave-size, 30%);
}

canvas[data-effect~="dot-wave"][data-dot-wave-position="left"] {
  inset: auto;
  top: 0;
  bottom: 0;
  left: 0;
  height: 100%;
  width: var(--dot-wave-size, 30%);
}

canvas[data-effect~="dot-wave"][data-dot-wave-position="right"] {
  inset: auto;
  top: 0;
  bottom: 0;
  right: 0;
  height: 100%;
  width: var(--dot-wave-size, 30%);
}