/*
 * React Bits Adapted — Stage 2: lightweight click spark.
 * Fixed overlay only; existing CTA styles and layout remain untouched.
 */
.rb-click-spark-layer {
  position: fixed;
  z-index: 140;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  contain: strict;
}

.rb-click-spark-burst {
  position: absolute;
  left: var(--rb-spark-x);
  top: var(--rb-spark-y);
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.rb-click-spark-particle {
  position: absolute;
  left: 0;
  top: 0;
  width: 3px;
  height: 8px;
  border-radius: 999px;
  background: #f97316;
  box-shadow: 0 0 0 1px rgba(255,255,255,.28);
  transform-origin: 50% 50%;
  will-change: transform, opacity;
  animation: rb-click-spark 420ms cubic-bezier(.2,.8,.2,1) both;
}

.rb-click-spark-particle:nth-child(even) {
  width: 2px;
  height: 6px;
  background: #fb923c;
}

@keyframes rb-click-spark {
  0% {
    opacity: 0;
    transform:
      translate(-50%,-50%)
      rotate(var(--rb-spark-angle))
      translateY(-4px)
      scaleY(.55);
  }
  16% { opacity: .92; }
  100% {
    opacity: 0;
    transform:
      translate(-50%,-50%)
      rotate(var(--rb-spark-angle))
      translateY(calc(var(--rb-spark-distance) * -1))
      scaleY(.18);
  }
}

@media (prefers-reduced-motion: reduce) {
  .rb-click-spark-layer { display: none; }
}

html[data-motion-mode="reduced"] .rb-click-spark-layer,
html[data-motion-tier="lite"] .rb-click-spark-layer,
html.motion-page-hidden .rb-click-spark-layer {
  display: none;
}