/* Hide default cursor for the entire document */
body, a, button {
  cursor: none;
}

/* Custom Cursor Styling */
#custom-cursor {
  width: 20px;
  height: 20px;
  position: fixed;
  pointer-events: none; /* Ensures it doesn't block interactions */
  background: url('../cursor.svg') no-repeat center center;
  background-size: contain;
  transform: translate(-50%, -50%);
  transition: transform 0.2s ease, opacity 0.025s ease;
  z-index: 9999;
  opacity: 0; /* Initially hidden */
}

/* Active state when the page is loaded and mouse is inside */
#custom-cursor.active {
  opacity: 1;
}

/* Transform the cursor when hovering interactive elements */
#custom-cursor.hover {
  transform: translate(-50%, -50%) scale(0.65);
}