@media (pointer: fine) {
  body, body * {
    cursor: none !important;
  }
}

.custom-cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 10px;
  height: 10px;
  background-color: #ffffff;
  border-radius: 50%;
  pointer-events: none;
  z-index: 10000;
  mix-blend-mode: difference;
  transform: translate(calc(var(--x) - 50%), calc(var(--y) - 50%));
  transition: width 0.25s ease-out, height 0.25s ease-out, opacity 0.2s;
  will-change: width, height, transform;
}

/* Classe che il JS aggiunge quando andiamo sopra un link/bottone */

.custom-cursor.hovered {
  width: 60px;
  height: 60px;
}

/* Disabilitiamo il cursore personalizzato sui dispositivi touch */

@media (pointer: coarse) {
  .custom-cursor {
    display: none !important;
  }
}