:root {
  --circle-size: 150px;
  --circle-x: 50%;
  --circle-y: 50%;
  /* Fuzzy mode customization - can be overridden by settings */
  --fuzzy-brightness: 1.8;
  --fuzzy-size: 150px;
}

#spotlight-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  /* Nothing visible by default */
}

/* Smooth transition for circle size changes */
#spotlight-overlay::before {
  transition: clip-path 0.4s ease-in-out;
}

/* Base circle shape, used for both modes */
#spotlight-overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  clip-path: circle(var(--circle-size) at var(--circle-x) var(--circle-y));
}

/* === Spotlight mode (hard edge) === */
body.spotlight-active #spotlight-overlay::before {
  backdrop-filter: brightness(1.5); /* adjust brightness here */
}

/* === Fuzzy mode (soft edge) === */
body.fuzzy-active #spotlight-overlay::before {
  backdrop-filter: brightness(1.5); /* Same technique as hard spotlight */
  clip-path: none; /* Remove clip-path to allow mask */
  /* 90% solid (perfect quality), 10% soft fade */
  mask: radial-gradient(
    circle var(--fuzzy-size) at var(--circle-x) var(--circle-y),
    black 0%,
    black 90%,
    transparent 100%
  );
  -webkit-mask: radial-gradient(
    circle var(--fuzzy-size) at var(--circle-x) var(--circle-y),
    black 0%,
    black 90%,
    transparent 100%
  );
  /* Smooth transition for mask size changes */
  transition: mask 0.4s ease-in-out, -webkit-mask 0.4s ease-in-out;
}

/* === Invert mode === */
body.invert-active #spotlight-overlay::before {
  backdrop-filter: invert(1);
}

/* === RGB Spotlight mode === */
body.rgbspotlight-active #spotlight-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
}

body.rgbspotlight-active #spotlight-overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    /* White boost in the center */
    radial-gradient(circle calc(var(--circle-size) / 3) at var(--circle-x) var(--circle-y),
      rgba(255, 255, 255, 0.9), transparent 80%),
    /* Red spotlight */
    radial-gradient(circle var(--circle-size) at calc(var(--circle-x) - 8px) calc(var(--circle-y) - 6px),
      rgba(255, 0, 0, 0.6), transparent 80%),
    /* Green spotlight */
    radial-gradient(circle var(--circle-size) at calc(var(--circle-x) + 8px) calc(var(--circle-y) - 4px),
      rgba(0, 255, 0, 0.6), transparent 80%),
    /* Blue spotlight */
    radial-gradient(circle var(--circle-size) at calc(var(--circle-x) - 4px) calc(var(--circle-y) + 8px),
      rgba(0, 0, 255, 0.6), transparent 80%);
  mix-blend-mode: screen;
}