/* ======================== */
/* TOUCH EFFECTS            */
/* ======================== */

/* — Ripple — */
/* Cerchio piccolo che parte dal punto di tocco e si espande. */
.touch-ripple-el {
  position: fixed;
  border-radius: 50%;
  pointer-events: none;
  z-index: 99990; /* sotto il cursore (99999), sopra tutto il resto */

  width: 10px;
  height: 10px;
  margin-left: -5px;  /* centra rispetto alle coordinate del tocco */
  margin-top: -5px;

  background: var(--accent);
  opacity: 0.4;

  animation: touch-ripple 600ms ease-out forwards;
}

@keyframes touch-ripple {
  from {
    transform: scale(1);
    opacity: 0.4;
  }
  to {
    transform: scale(18);
    opacity: 0;
  }
}

/* — Glow — */
/* Flash circolare più grande, sfocato, con blur forte. */
.touch-glow-el {
  position: fixed;
  border-radius: 50%;
  pointer-events: none;
  z-index: 99989;

  width: 60px;
  height: 60px;
  margin-left: -30px;
  margin-top: -30px;

  background: var(--primary);
  opacity: 0.3;
  filter: blur(20px);

  animation: touch-glow 400ms ease-out forwards;
}

@keyframes touch-glow {
  from {
    transform: scale(1);
    opacity: 0.3;
  }
  to {
    transform: scale(4);
    opacity: 0;
  }
}