/* Voce "Playground" del menu: in hover spuntano stelline viola intorno alla parola.
   Usato dal menu del sito (Navbar) e dai menu delle pagine a sé (Chill Zone, Gesture Synth). */
.sparkle { position: relative; display: inline-block; }
.sparkle-stars { position: absolute; inset: -18% -8%; pointer-events: none; }
.sparkle-stars i {
  position: absolute;
  width: 0.28em; height: 0.28em;
  background: #7c3aed;
  clip-path: polygon(50% 0%, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0% 50%, 39% 39%);
  opacity: 0;
  transform: scale(0) rotate(0deg);
}
.sparkle-stars i:nth-child(1) { top: 0;   left: 4%;  --s: 1;    animation-delay: 0s; }
.sparkle-stars i:nth-child(2) { top: 8%;  left: 46%; --s: 0.6;  animation-delay: .35s; }
.sparkle-stars i:nth-child(3) { top: 2%;  left: 92%; --s: 0.85; animation-delay: .7s; }
.sparkle-stars i:nth-child(4) { top: 78%; left: 98%; --s: 0.55; animation-delay: .2s; }
.sparkle-stars i:nth-child(5) { top: 84%; left: 30%; --s: 0.75; animation-delay: .55s; }
.sparkle-stars i:nth-child(6) { top: 70%; left: -3%; --s: 0.5;  animation-delay: .9s; }
.sparkle:hover .sparkle-stars i,
.sparkle:focus-visible .sparkle-stars i { animation: sparkle-pop 1.1s ease-in-out infinite; }
@keyframes sparkle-pop {
  0%   { opacity: 0; transform: scale(0) rotate(0deg); }
  45%  { opacity: 1; transform: scale(var(--s)) rotate(90deg); }
  100% { opacity: 0; transform: scale(0) rotate(180deg); }
}
@media (prefers-reduced-motion: reduce) {
  .sparkle:hover .sparkle-stars i,
  .sparkle:focus-visible .sparkle-stars i { animation: none; opacity: 1; transform: scale(var(--s)); }
}