/* Custom Cursor with "Click Here" Pill */

/* Keep default hand cursor on clickable elements - make it bigger */
a,
button,
.project-card,
.experience-box,
[role="button"],
input[type="submit"],
input[type="button"] {
  cursor: pointer;
}

/* Make cursor bigger on hover */
a:hover,
button:hover,
.project-card:hover,
.experience-box:hover,
[role="button"]:hover,
input[type="submit"]:hover,
input[type="button"]:hover {
  cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 20 20"><path fill="black" d="M10 0C4.477 0 0 4.477 0 10s4.477 10 10 10 10-4.477 10-10S15.523 0 10 0z"/></svg>'), pointer;
}

/* Custom cursor container */
.custom-cursor {
  position: fixed;
  pointer-events: none;
  z-index: 9999;
  display: none;
}

.custom-cursor.active {
  display: block;
}

/* Click here pill - positioned to the right and slightly below cursor */
.cursor-pill {
  position: fixed;
  background-color: var(--color-black);
  color: var(--color-white);
  padding: var(--spacing-xs) var(--spacing-md);
  border-radius: 3.125rem; /* 50px - pill shape */
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-regular);
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.2s ease, background-color 0.15s ease, color 0.15s ease;
}

.custom-cursor.hovering .cursor-pill {
  opacity: 1;
}

/* Click state - inverted colors */
.custom-cursor.clicking .cursor-pill {
  background-color: var(--color-white);
  color: var(--color-black);
}

/* Show default cursor on body */
body {
  cursor: default;
}