/* halftone.css : styles + configurable CSS custom properties */

.halftone-stage {
  /* ---- knobs, also settable via JS options ---- */
  --ht-floor: 0.06;        /* resting opacity, 0..1 */
  --ht-speed: 2.4;         /* seconds: cycle length (pulse/wave) or ripple lifetime */
  --ht-wave-width: 0.30;   /* ring/band spacing, ripple front width */
  --ht-zone-size: 3.5;     /* zoneblink: patch size */
  --ht-drift: 0.45;        /* zoneblink: wander speed */
  --ht-bg: #0e0e12;        /* element background (the canvas itself is transparent) */

  /* ---- layout ---- */
  position: relative;
  width: 100%;
  height: 360px;            /* override per instance; rows track the aspect ratio */
  overflow: hidden;
  border-radius: 12px;
  background: var(--ht-bg);
  cursor: crosshair;        /* hidden when click:false (see .halftone-no-click) */
}

.halftone-stage.halftone-no-click {
  cursor: default;
}

/* injected by the engine, fills the stage */
.halftone-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}