*,
body,
a,
button,
[role='button'] {
  cursor: none !important;
}

#cursor-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 9999;
  will-change: transform;
}

#cursor {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 16px;
  height: 16px;
  padding: 0;
  border-radius: 9999px;
  background-color: var(--color-secondary-1);
  opacity: 1;
  overflow: hidden;
  pointer-events: none;
  transform: translate(-50%, -50%);
  transition: width 250ms cubic-bezier(0.22, 1, 0.36, 1),
              height 250ms cubic-bezier(0.22, 1, 0.36, 1),
              opacity 250ms cubic-bezier(0.22, 1, 0.36, 1),
              padding 250ms cubic-bezier(0.22, 1, 0.36, 1);
}

.cursor__dot {
  display: none;
}

.cursor__label {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: var(--font-light);
  line-height: var(--leading-default);
  letter-spacing: var(--tracking-default);
  color: var(--color-card);
}

#cursor .cursor__label {
  white-space: nowrap;
  opacity: 0;
  transition: opacity 150ms ease 80ms;
}

#cursor.cursor--hover {
  width: 20px;
  height: 20px;
  opacity: 0.3;
}

/* Left-anchored: expand right / collapse from the right edge (pointer lines up with circle’s left inset) */
#cursor.cursor--labeled,
#cursor.cursor--labeled.cursor--closing {
  transform: translate(0, -50%);
  justify-content: flex-start;
}

#cursor.cursor--labeled {
  height: 28px;
  width: 100px;
  padding: 0;
  opacity: 1;
}

#cursor.cursor--view-case-study { width: 150px; }
#cursor.cursor--click-me { width: 92px; }
#cursor.cursor--copy-email { width: 108px; }
#cursor.cursor--copied { width: 83px; }
#cursor.cursor--lets-connect { width: 134px; }
#cursor.cursor--view-website { width: 125px; }
#cursor.cursor--coming-soon { width: 117px; }
#cursor.cursor--view-notion { width: 117px; }

#cursor.cursor--labeled .cursor__label {
  opacity: 1;
  flex-shrink: 0;
  padding: 0 12px;
  text-align: left;
}

#cursor.cursor--closing .cursor__label {
  opacity: 0;
  transition: opacity 80ms ease;
}

/* Still hold labeled + state widths until collapsed; overrides shrink to circle */
#cursor.cursor--labeled.cursor--closing.cursor--collapse-default {
  width: 16px !important;
  height: 16px !important;
  padding: 0 !important;
  opacity: 1 !important;
}

#cursor.cursor--labeled.cursor--closing.cursor--collapse-hover {
  width: 20px !important;
  height: 20px !important;
  padding: 0 !important;
  opacity: 0.3 !important;
}

@media (hover: none) {
  #cursor-wrapper {
    display: none !important;
  }
}