:root {
  --dither-bg-color: #0b0c10;
  --dither-dot-color: #4f46e5;
  --dither-min-radius: 1.5px;
  --dither-max-radius: 7px;
  --dither-grid-spacing: 32px;
  --dither-wave-scale: 0.003;
  --dither-wave-speed: 0.002;
  --dither-wave-amplitude: 24px;
  --dither-cursor-radius: 180px;
  --dither-cursor-force: 35px;
  --dither-trail-decay: 0.94;
  --dither-max-opacity: 0.85;
  --dither-hero-height: 100%;
  --dither-fade-top: 25%;
  --dither-fade-bottom: 30%;
}

/* Absolute container covering the hero section background */
.dither-bg-container-462d48bb {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--dither-hero-height, 100%);
  background-color: var(--dither-bg-color);
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
}

/* Fill container but remain interactive for cursor movements */
.dither-canvas-462d48bb {
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: auto;
}

/* Elegant gradient masks to fade at top and bottom bounds */
.dither-bg-container-462d48bb::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    var(--dither-bg-color) 0%,
    transparent var(--dither-fade-top, 25%),
    transparent calc(100% - var(--dither-fade-bottom, 30%)),
    var(--dither-bg-color) 100%
  );
}