/* =========================
   PAW CLICK EFFECT — EXPLOSION
========================= */

.paw-particle {
  position: fixed;
  pointer-events: none;
  z-index: 9999;
  will-change: transform, opacity;
  animation: paw-explode 1.6s cubic-bezier(0.15, 0.6, 0.3, 1) forwards;

  /* VERY BIG */
  font-size: 120px;
}

/* Tablet */
@media (max-width: 1024px) {
  .paw-particle {
    font-size: 140px;
  }
}

/* Mobile */
@media (max-width: 768px) {
  .paw-particle {
    font-size: 160px;
  }
}

@keyframes paw-explode {
  0% {
    opacity: 1;
    transform: translate(0, 0) scale(0.9) rotate(0deg);
  }

  100% {
    opacity: 0;
    transform: translate(var(--x), var(--y)) scale(1.1) rotate(var(--r));
  }
}