/* Ripple effect styles - injected globally */
:root {
  --ripple-color: rgba(0, 0, 0, 0.12);
  --ripple-duration: 700ms;
}

/* The ripple container is positioned at the document root so ripples can appear anywhere */
.ripple-effect {
  pointer-events: none; /* Allow clicks to pass through */
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  overflow: visible;
  z-index: 2147483646; /* high but below browser UI */
}

.ripple {
  position: absolute;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
  border: 10px solid black;
  background: var(--ripple-color);
  animation: ripple-grow var(--ripple-duration) cubic-bezier(.4,0,.2,1) forwards;
  will-change: transform, opacity;
}

@keyframes ripple-grow {
  to {
    transform: translate(-50%, -50%) scale(0.3);
    opacity: 0;
  }
}

/* Smaller ripple for fine pointers */
.ripple.small {
  animation-duration: 500ms;
}

/* Light ripple for white backgrounds */
.ripple.light {
  background: rgba(255,255,255,0.18);
}

/* helper: hide on print */
@media print {
  .ripple-effect { display: none !important; }
}