/* Button Ripple Effect — Material Design inspired
   Loaded globally via header.ejs
   Works on all .btn elements with event delegation */

@keyframes ripple-expand {
  to {
    transform: scale(4);
    opacity: 0;
  }
}

.ripple-effect {
  position: absolute;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.3);
  transform: scale(0);
  animation: ripple-expand 600ms ease-out forwards;
  pointer-events: none;
  transform-origin: center;
  /* Offset to center the ripple on click point */
  margin-left: -50%;
  margin-top: -50%;
}

/* Ensure buttons can contain ripple */
.btn {
  position: relative;
  overflow: hidden;
}

/* Skip ripple styling on these */
.btn-link .ripple-effect,
.no-ripple .ripple-effect {
  display: none;
}