:root {
  --lhb-base-global:   #bdbdbd;
  --lhb-primary-global:#ed2224;
  --lhb-accent-global: #9168ac;
  --lhb-radius-global: 50px;
  --lhb-bg-z-global:   3;
  --lhb-speed-global:  450ms;

  --lhb-grid-thickness-global: 2px;
  --lhb-grid-step-global:      14px;
  --lhb-grid-dash-global:      6px;
  --lhb-grid-dot-global:       2px;
}

:where([id="pointerChange"]) {
  position: relative;

  --lhb-radius: var(--lhb-radius-global, 50px);
  --lhb-base:   var(--lhb-base-global, #bdbdbd);
  --lhb-primary:var(--lhb-primary-global, #ed2224);
  --lhb-accent: var(--lhb-accent-global, #9168ac);
  --lhb-bg-z:   var(--lhb-bg-z-global, 3);
  --lhb-speed:  var(--lhb-speed-global, 450ms);

  --lhb-grid-thickness: var(--lhb-grid-thickness-global, 2px);
  --lhb-grid-step:      var(--lhb-grid-step-global, 14px);
  --lhb-grid-dash:      var(--lhb-grid-dash-global, 6px);
  --lhb-grid-dot:       var(--lhb-grid-dot-global, 2px);

  /* Pointer vars (JS) */
  --x: 50%;
  --y: 50%;

  /* Magic vars (JS) */
  --mx: 50%;
  --my: 50%;
  --mx2: 50%;
  --my2: 50%;

  /* Grid trail vars (JS) */
  --g0x: 50%; --g0y: 50%;
  --g1x: 50%; --g1y: 50%;
  --g2x: 50%; --g2y: 50%;
  --g3x: 50%; --g3y: 50%;
  --g4x: 50%; --g4y: 50%;
  --g5x: 50%; --g5y: 50%;
}

/* Base grey */
:where([id="pointerChange"])::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: var(--lhb-bg-z);
  pointer-events: none;
  background: var(--lhb-base);
}

/* Default hotspot */
:where([id="pointerChange"])::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: var(--lhb-bg-z);
  pointer-events: none;

  background:
    radial-gradient(
      circle var(--lhb-radius) at var(--x) var(--y),
      var(--lhb-primary) 0%,
      rgba(0, 0, 0, 0) 70%
    );

  opacity: 0;
  transition: opacity var(--lhb-speed) ease;
}

:where([id="pointerChange"]).lhb-is-hover::after {
  opacity: 1;
}

/* Keep content above the background layers */
:where([id="pointerChange"]) > * {
  position: relative;
  z-index: calc(var(--lhb-bg-z) + 1);
}

/* -----------------------------
   MAGIC MODE
------------------------------ */

:root[data-lhb-mode="magic"] :where([id="pointerChange"])::after {
  background:
    radial-gradient(
      circle calc(var(--lhb-radius) * 0.45) at var(--mx) var(--my),
      rgba(255, 255, 255, 0.85) 0%,
      rgba(255, 255, 255, 0) 65%
    ),
    radial-gradient(
      circle var(--lhb-radius) at var(--mx) var(--my),
      color-mix(in srgb, var(--lhb-primary) 92%, transparent) 0%,
      rgba(0, 0, 0, 0) 72%
    ),
    radial-gradient(
      circle calc(var(--lhb-radius) * 1.6) at var(--mx2) var(--my2),
      color-mix(in srgb, var(--lhb-accent) 40%, transparent) 0%,
      rgba(0, 0, 0, 0) 75%
    );

  filter: blur(2px) saturate(1.4);
}

:root[data-lhb-mode="magic"] :where([id="pointerChange"]).lhb-is-hover::after {
  animation: lhb-magic-pulse 1400ms ease-in-out infinite;
}

@keyframes lhb-magic-pulse {
  0%, 100% { filter: blur(2px) saturate(1.4); }
  50%      { filter: blur(4px) saturate(1.6); }
}

/* -----------------------------
   GRID MODE (dashed crosshair + dotted trail)
------------------------------ */

:root[data-lhb-mode="grid"] :where([id="pointerChange"])::after {
  /* 1 head dot + 6 trail dots + vertical dashed line + horizontal dashed line */
  background-image:
    radial-gradient(circle var(--lhb-grid-dot) at var(--x) var(--y),
      rgba(255,255,255,0.95) 0%,
      rgba(255,255,255,0.95) 55%,
      rgba(255,255,255,0) 70%),

    radial-gradient(circle var(--lhb-grid-dot) at var(--g0x) var(--g0y),
      color-mix(in srgb, var(--lhb-primary) 90%, transparent) 0%,
      color-mix(in srgb, var(--lhb-primary) 90%, transparent) 55%,
      rgba(0,0,0,0) 72%),

    radial-gradient(circle var(--lhb-grid-dot) at var(--g1x) var(--g1y),
      color-mix(in srgb, var(--lhb-accent) 55%, transparent) 0%,
      color-mix(in srgb, var(--lhb-accent) 55%, transparent) 55%,
      rgba(0,0,0,0) 72%),

    radial-gradient(circle var(--lhb-grid-dot) at var(--g2x) var(--g2y),
      color-mix(in srgb, var(--lhb-primary) 60%, transparent) 0%,
      color-mix(in srgb, var(--lhb-primary) 60%, transparent) 55%,
      rgba(0,0,0,0) 72%),

    radial-gradient(circle var(--lhb-grid-dot) at var(--g3x) var(--g3y),
      color-mix(in srgb, var(--lhb-accent) 40%, transparent) 0%,
      color-mix(in srgb, var(--lhb-accent) 40%, transparent) 55%,
      rgba(0,0,0,0) 72%),

    radial-gradient(circle var(--lhb-grid-dot) at var(--g4x) var(--g4y),
      color-mix(in srgb, var(--lhb-primary) 35%, transparent) 0%,
      color-mix(in srgb, var(--lhb-primary) 35%, transparent) 55%,
      rgba(0,0,0,0) 72%),

    radial-gradient(circle var(--lhb-grid-dot) at var(--g5x) var(--g5y),
      color-mix(in srgb, var(--lhb-accent) 25%, transparent) 0%,
      color-mix(in srgb, var(--lhb-accent) 25%, transparent) 55%,
      rgba(0,0,0,0) 72%),

    linear-gradient(to bottom,
      color-mix(in srgb, var(--lhb-primary) 75%, transparent) 0,
      color-mix(in srgb, var(--lhb-primary) 75%, transparent) var(--lhb-grid-dash),
      rgba(0,0,0,0) var(--lhb-grid-dash),
      rgba(0,0,0,0) var(--lhb-grid-step)
    ),

    linear-gradient(to right,
      color-mix(in srgb, var(--lhb-primary) 75%, transparent) 0,
      color-mix(in srgb, var(--lhb-primary) 75%, transparent) var(--lhb-grid-dash),
      rgba(0,0,0,0) var(--lhb-grid-dash),
      rgba(0,0,0,0) var(--lhb-grid-step)
    );

  background-size:
    auto, auto, auto, auto, auto, auto, auto,
    var(--lhb-grid-thickness) var(--lhb-grid-step),
    var(--lhb-grid-step) var(--lhb-grid-thickness);

  background-position:
    0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0,
    var(--x) 0,
    0 var(--y);

  background-repeat:
    no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat,
    repeat-y,
    repeat-x;

  filter: none;
}