/* XD_CLICK_RIPPLE_V1 — دائرة بيضاء ناعمة مكان الضغطة.
   كل الحركة على transform/opacity، والعنصر لا يستقبل أي ضغطة. */
.xd-ripple{
 position:fixed;
 left:0;top:0;
 width:110px;height:110px;
 margin:-55px 0 0 -55px;
 border-radius:50%;
 pointer-events:none;
 z-index:2147483600;
 opacity:0;
 /* حافة متلاشية بدل دائرة صلبة — أريح للعين */
 background:radial-gradient(circle closest-side,
   rgba(255,255,255,.34),
   rgba(255,255,255,.16) 46%,
   rgba(255,255,255,.05) 70%,
   rgba(255,255,255,0) 100%);
 animation:xdRipple .58s cubic-bezier(.22,.68,.32,1) forwards;
}
@keyframes xdRipple{
 0%  {opacity:0;   transform:translate3d(0,0,0) scale(.22)}
 18% {opacity:1}
 100%{opacity:0;   transform:translate3d(0,0,0) scale(1)}
}

/* على الخلفيات الفاتحة الأبيض يضيع — نعكسها لرمادي هادئ بنفس النعومة */
.xd-ripple.on-light{
 background:radial-gradient(circle closest-side,
   rgba(20,20,20,.16),
   rgba(20,20,20,.08) 46%,
   rgba(20,20,20,.03) 70%,
   rgba(20,20,20,0) 100%);
}

@media(prefers-reduced-motion:reduce){.xd-ripple{display:none}}
/* /XD_CLICK_RIPPLE_V1 */