:root{
   --tap-ripple-color: rgba(255,255,255,0.45);
   --tap-ripple-size: 42px;
 }

 .tap-ripple {
   position: fixed;
   width: var(--tap-ripple-size);
   height: var(--tap-ripple-size);
   margin-left: calc(var(--tap-ripple-size) / -2);
   margin-top:  calc(var(--tap-ripple-size) / -2);
   border-radius: 999px;
   background: radial-gradient(
     circle,
     rgba(255,255,255,0.85) 0%,
     rgba(255,255,255,0.55) 40%,
     rgba(255,255,255,0.25) 65%,
     rgba(255,255,255,0.0) 72%
   );
   pointer-events: none;
   z-index: 2147483647;
   transform: scale(0.4);
   opacity: 1;
   filter: drop-shadow(0 0 6px rgba(255,255,255,0.35));
   will-change: transform, opacity;
   animation: tap-ripple-pop 320ms cubic-bezier(.2,.8,.2,1) forwards;
 }

 @keyframes tap-ripple-pop {
   0%   { transform: scale(0.4); opacity: 1; }
   60%  { transform: scale(1.6); opacity: 0.65; }
   100% { transform: scale(2.4); opacity: 0; }
 }