:root{
  --pc-lens-size: 88px;   /* ~finger size mobile */
  --pc-drop-size: 64px;
  --pc-drop-life: 650ms;
  --pc-blur: 6px;
}
@media (min-width: 769px){
  :root{ --pc-lens-size: 110px; --pc-drop-size: 80px; }
}

.pc-lens{
  position: fixed;
  width: var(--pc-lens-size);
  height: var(--pc-lens-size);
  left: 0; top: 0;
  transform: translate(-50%,-50%);
  border-radius: 999px;
  pointer-events: none;
  z-index: 99999;
  opacity: 0;
  transition: opacity .14s ease;
  backdrop-filter: blur(var(--pc-blur)) saturate(1.05) brightness(1.03) contrast(1.02);
  -webkit-backdrop-filter: blur(var(--pc-blur)) saturate(1.05) brightness(1.03) contrast(1.02);
  background:
    radial-gradient(120% 120% at 22% 18%, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 42%),
    radial-gradient(80% 80% at 72% 78%,  rgba(255,255,255,.18) 0%, rgba(255,255,255,0) 58%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.35),
    inset 0 -10px 30px rgba(0,0,0,.10),
    0 1px 8px rgba(0,0,0,.08);
}
.pc-lens.pc-droplet{
  width: var(--pc-drop-size);
  height: var(--pc-drop-size);
  animation: lensTrail var(--pc-drop-life) ease-out forwards;
}
@keyframes lensTrail{
  0%   { opacity:.9; transform: translate(-50%,-50%) scale(.96); }
  60%  { opacity:.35; transform: translate(-50%,-50%) scale(1.06); }
  100% { opacity:0;   transform: translate(-50%,-50%) scale(1.10); }
}
@media (prefers-reduced-motion: reduce){
  .pc-lens{ transition: none; }
  .pc-lens.pc-droplet{ animation: none; opacity:.7; }
}