/* Button ripple + accessibility-safe defaults */
.sbe-has-ripple {
  position: relative;
  overflow: hidden;
  --sbe-ripple-color: rgba(255,255,255,0.35);
  --sbe-ripple-size: 240px;
  --sbe-ripple-duration: 450ms;
}

.sbe-has-ripple .sbe-ripple {
  position: absolute;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  width: var(--sbe-ripple-size);
  height: var(--sbe-ripple-size);
  background: var(--sbe-ripple-color);
  opacity: 0;
  animation: sbe-ripple-in var(--sbe-ripple-duration) ease-out forwards;
}

@keyframes sbe-ripple-in {
  0%   { opacity: 0.35; transform: translate(-50%, -50%) scale(0.25); }
  100% { opacity: 0;    transform: translate(-50%, -50%) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .sbe-has-ripple .sbe-ripple {
    animation: sbe-ripple-fade 200ms linear forwards;
  }
  @keyframes sbe-ripple-fade {
    from { opacity: 0.25; }
    to   { opacity: 0; }
  }
}