/* ==========================================================================
   CUSTOM CURSOR
   A small solid dot with a thin, light-gray ring around it — fixed
   neutral colors reused from the existing token set (--ink-900 for the
   dot, --ink-400 for the ring stroke), not a new color. Position and
   scale are handled by separate elements (a positioning "wrap" driven
   every frame by JS, and an inner dot/ring that only ever animates
   scale/size) so the continuous 60fps position updates never fight
   with the CSS transition used for the hover/click scale changes.
   Only enabled for fine-pointer, hover-capable devices with no reduced-
   motion preference — the system cursor is left completely alone
   everywhere else.
   ========================================================================== */

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  body.has-custom-cursor,
  body.has-custom-cursor a,
  body.has-custom-cursor button,
  body.has-custom-cursor [role="button"] {
    cursor: none;
  }
  /* Text inputs keep the native caret cursor — hiding it there would cost
     real usability for no visual gain. */
  body.has-custom-cursor input,
  body.has-custom-cursor textarea {
    cursor: text;
  }

  .cursor-dot-wrap,
  .cursor-ring-wrap {
    position: fixed;
    top: 0;
    left: 0;
    --cx: 50vw;
    --cy: 50vh;
    transform: translate3d(var(--cx), var(--cy), 0);
    pointer-events: none;
    z-index: 9999;
    will-change: transform;
    transition: opacity 200ms ease-out;
  }

  .cursor-dot,
  .cursor-ring {
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(var(--s, 1));
  }

  .cursor-dot {
    width: 6px;
    height: 6px;
    background: var(--ink-900);
    transition: transform 400ms cubic-bezier(0.34, 1.56, 0.64, 1);
  }

  .cursor-ring {
    width: 28px;
    height: 28px;
    background: transparent;
    border: 1px solid var(--ink-400);
    transition: width 250ms ease-out, height 250ms ease-out, transform 400ms cubic-bezier(0.34, 1.56, 0.64, 1);
  }

  /* Slight enlarge on hover — modest, not exaggerated */
  .cursor-ring.is-hovering { width: 40px; height: 40px; }

  /* Quick shrink on press (fast, linear-ish), then the base rule's
     400ms overshoot easing above takes over on release for the bounce. */
  .cursor-dot.is-clicking,
  .cursor-ring.is-clicking {
    --s: 0.7;
    transition: transform 120ms ease-out;
  }

  body.cursor-hidden .cursor-dot-wrap,
  body.cursor-hidden .cursor-ring-wrap {
    opacity: 0;
  }
}

/* Anywhere the conditions above aren't met, the custom cursor never even
   renders — belt-and-suspenders alongside the JS environment check. */
@media not all and (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .cursor-dot-wrap, .cursor-ring-wrap { display: none !important; }
}