/* Stili per il cursore personalizzato */
body {
  cursor: none; /* Nasconde il cursore di default */
}

#custom-cursor {
  position: fixed;
  width: 25px;
  height: 25px;
  border: 1px solid #fff; /* Il colore viene invertito dal mix-blend-mode */
  border-radius: 50%;
  left: 0;
  top: 0;
  pointer-events: none; /* Permette di cliccare attraverso il cursore */
  transform: translate(-50%, -50%);
  z-index: 9999;
  mix-blend-mode: difference; /* Magia: inverte il colore dello sfondo */
  transition: transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

#custom-cursor.hover {
  transform: translate(-50%, -50%) scale(2.5);
  background-color: #fff; /* Riempie il cerchio durante l'hover */
}