/* White-only Spider Web Click Effect */

/* Stays above content, never blocks clicks */
#spiderweb-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 2147483647;
  color: #fff; /* force pure white */
}

/* Strokes are white via currentColor */
.spiderweb-burst circle,
.spiderweb-burst line,
.spiderweb-burst path {
  stroke: currentColor;
  stroke-width: 1.25;
  fill: none;
  vector-effect: non-scaling-stroke;
}

/* subtle white glow so it reads on mid/dark UIs */
.spiderweb-burst {
  filter: drop-shadow(0 0 2px rgba(255,255,255,0.9));
}

/* draw & fade animations */
@keyframes web-draw { from { stroke-dashoffset: var(--dash, 60); } to { stroke-dashoffset: 0; } }
@keyframes web-fade {
  0% { opacity: 0; transform: scale(0.9); }
  10%,80% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.06); }
}

.spiderweb-burst { animation: web-fade 1200ms ease-out forwards; transform-origin: center; }
.spiderweb-burst circle,
.spiderweb-burst line,
.spiderweb-burst path {
  stroke-dasharray: var(--dash, 60);
  stroke-dashoffset: var(--dash, 60);
  animation: web-draw 600ms ease-out forwards;
}

/* quick inner ring tweaks */
.spiderweb-burst circle[data-ring="1"] { stroke-width: 1; animation-duration: 520ms; }
.spiderweb-burst circle[data-ring="2"] { stroke-width: 1; animation-duration: 480ms; }
.spiderweb-burst circle[data-ring="3"] { stroke-width: .9; animation-duration: 440ms; }

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
  .spiderweb-burst { animation: web-fade 500ms linear forwards; }
  .spiderweb-burst circle, .spiderweb-burst line, .spiderweb-burst path {
    animation: none; stroke-dasharray: none; stroke-dashoffset: 0;
  }
}