/* Hide default cursor */
body {
  cursor: none;
}

/* Custom cursor */
#custom-cursor {
  position: fixed;
  width: 20px;
  height: 20px;
  border: 2px solid #ff00ff;
  border-radius: 50%;
  pointer-events: none;
  z-index: 10000;
  transform: translate(-50%, -50%) scale(1);
  transition: transform 0.15s ease, background-color 0.3s;
  background-color: rgba(255, 0, 255, 0.1);
}

/* Click animation */
#custom-cursor.click {
  transform: translate(-50%, -50%) scale(0.7);
  background-color: rgba(255, 0, 255, 0.4);
}

/* Hoverable targets effect */
.hover-target:hover ~ #custom-cursor {
  transform: translate(-50%, -50%) scale(1.5);
}