/* ==========================================================================
   Custom cursor — desktop, fine pointer, motion allowed
   ========================================================================== */

.cursor-root {
  position: fixed;
  top: 0;
  left: 0;
  z-index: var(--z-cursor);
  pointer-events: none;
}

.cursor-dot {
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin: -20px 0 0 -20px;
  border: 2px solid var(--u-ink);
  border-radius: var(--r-pill);
  background: var(--u-primary);
  color: var(--u-white);
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.08em;
  white-space: nowrap;
  will-change: transform;
  transition:
    width var(--t-mid) var(--ease-out),
    height var(--t-mid) var(--ease-out),
    background-color var(--t-mid),
    margin var(--t-mid) var(--ease-out);
}

/* Without an explicit grid-area, two children in an unnamed grid go into
   separate auto-placed rows rather than stacking — place-items:center then
   centers each of those rows independently, which is what let the star drift
   away from the ball's true center. grid-area:1/1 forces both into the exact
   same cell. (Not position:absolute: the label needs to stay a normal grid
   item so its content still drives the pill's width:auto sizing below.) */
.cursor-dot__star,
.cursor-dot__label {
  grid-area: 1 / 1;
}

.cursor-dot__star {
  font-size: 14px;
  line-height: 1;
  color: var(--u-accent);
  transition: opacity var(--t-fast);
}

.cursor-dot__label {
  padding-inline: 0.9rem;
  opacity: 0;
  transition: opacity var(--t-fast);
}

/* Labelled pill state, driven by [data-cursor] on the hovered element. */
.cursor-root.is-labelled .cursor-dot {
  width: auto;
  height: 34px;
  margin: -17px 0 0 -20px;
  background: var(--u-secondary);
}
.cursor-root.is-labelled .cursor-dot__star  { display: none; }
.cursor-root.is-labelled .cursor-dot__label { opacity: 1; }

/* Click sparks */
.cursor-spark {
  position: absolute;
  top: 0;
  left: 0;
  font-size: 12px;
  color: var(--u-accent);
  will-change: transform, opacity;
}

/* Only hide the system cursor once ours is actually running. Text inputs keep
   a real caret — replacing it makes fields feel broken. */
html.has-cursor,
html.has-cursor body,
html.has-cursor a,
html.has-cursor button { cursor: none; }

html.has-cursor input,
html.has-cursor textarea,
html.has-cursor select { cursor: auto; }