.click-effect {
  position: fixed;
  z-index: 80;
  width: var(--click-size, 34px);
  height: var(--click-size, 34px);
  border: 2px solid var(--click-color);
  border-radius: 50%;
  pointer-events: none;
  animation: click-ripple 350ms ease-out forwards;
}
.click-effect[data-style="dots"] {
  border-style: dotted;
  border-width: 4px;
}
@keyframes click-ripple {
  from {
    transform: translate(-50%, -50%) scale(0.3);
    opacity: 0.8;
  }
  to {
    transform: translate(-50%, -50%) scale(1.4);
    opacity: 0;
  }
}
/* Two drawn arcs expand without intercepting the underlying control. */
.click-effect[data-style="waves"] {
  width: calc(var(--click-size, 34px) + 10px);
  height: calc(var(--click-size, 34px) + 10px);
  border: 0;
  border-radius: 0;
  color: var(--click-color);
  animation: click-waves 620ms cubic-bezier(.2, .7, .2, 1) forwards;
}
.click-effect[data-style="waves"] svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.3;
  stroke-linecap: round;
  filter: drop-shadow(0 0 3px currentColor) drop-shadow(0 0 8px color-mix(in srgb, currentColor 45%, transparent));
}
@keyframes click-waves {
  0% { transform: translate(-50%, -50%) scale(.38); opacity: 0; }
  20% { opacity: .85; }
  100% { transform: translate(-50%, -50%) scale(1.12); opacity: 0; }
}
/* Outlined rays share the reference cursor's fill and originate at the actual hotspot. */
.click-effect[data-style="rays"] {
  border: 0;
  border-radius: 0;
  color: var(--cursor-color, #ff9f89);
  animation: click-rays 400ms ease-out forwards;
}
.click-effect[data-style="rays"] svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: none;
  stroke-linecap: round;
}
.click-effect .ray-outline { stroke: #171717; stroke-width: 4.5; }
.click-effect .ray-fill { stroke: currentColor; stroke-width: 2.5; }
@keyframes click-rays {
  from { transform: translate(-50%, -50%) scale(.65); opacity: 1; }
  to { transform: translate(-50%, -50%) scale(1.15); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .click-effect {
    display: none;
    animation: none;
  }
}