/* ============================================================================
   500x — the cursor
   ----------------------------------------------------------------------------
   Built on Cuberto's Mouse Follower (MIT) over GSAP. The library owns the hard
   parts: the eased follow, skew-on-velocity, the state machine, the sticky
   magnet. Everything in this file is the other half -- what it looks like, and
   what it says.

   Two things move. A small dot carrying the brand gradient tracks the pointer
   closely; a thin ring lags behind it. The dot is where you are, the ring is
   how fast you got there. On anything clickable the ring opens and brightens.
   On anything worth naming, the dot swells into a labelled disc and the ring
   stands down -- the gradient only becomes legible at that size, which is the
   point: it is a warm speck most of the time and the brand when it matters.

   The native cursor is surrendered ONLY under html.has-cursor, which the script
   adds after the library is confirmed constructed. An invisible pointer is not
   a degraded experience, it is a broken page -- and it is precisely what this
   site shipped before, when an unrelated exception killed the cursor script
   while `body{cursor:none}` stayed behind.
   ========================================================================== */

:root {
  --cur-ink: #f4f4f0;
  --cur-ring: rgba(244, 244, 240, 0.28);
  --cur-ring-hot: rgba(244, 244, 240, 0.9);
  --cur-accent: #d94a5e;
  /* Stops pushed off centre so the red reads on a disc this small; an even
     split left it almost entirely purple-to-blue. */
  --cur-grad: linear-gradient(140deg, #7a3fa8 0%, #2a5cdb 42%, #d94a5e 100%);
  --cur-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* Hidden until proven working. Both halves of this are load-bearing. */
html.has-cursor body { cursor: none; }

/* Text entry keeps its I-beam. You cannot see a caret position without one,
   and a styled disc is not worth the loss -- the library hides its own cursor
   over these via stateDetection, so the two never both show. */
html.has-cursor input,
html.has-cursor textarea,
html.has-cursor select,
html.has-cursor [contenteditable="true"] { cursor: auto; }

/* ------------------------------------------------------------------- the dot */
.mf-cursor { z-index: 9999; }

/* Solid accent at rest, gradient only once it is big enough to show one. An
   8px circle filled with a 135deg gradient samples nothing but the midpoint --
   it came out flat blue, which reads as a system default rather than as ours.
   Each size gets the treatment that survives at that size. */
.mf-cursor::before {
  background: var(--cur-accent);
  transform: scale(0.17);                       /* 48px * 0.17 -> ~8px */
  transition: transform 0.32s var(--cur-ease), opacity 0.18s ease, background 0.3s ease;
}
.mf-cursor.-pointer::before { transform: scale(0.13); }
.mf-cursor.-text::before    { transform: scale(1.72); opacity: 1; background: var(--cur-grad); }
.mf-cursor.-text.-active::before { transform: scale(1.58); }
.mf-cursor.-hidden::before  { transform: scale(0); }

/* ------------------------------------------------------------------ the ring */
/* The library does not ship a ring -- ::before is its only shape -- so this is
   ours. ::after is untouched by the library's own stylesheet. */
.mf-cursor::after {
  content: "";
  position: absolute;
  top: -19px; left: -19px;
  width: 38px; height: 38px;
  border: 1px solid var(--cur-ring);
  border-radius: 50%;
  transform: scale(1);
  transition: transform 0.4s var(--cur-ease), border-color 0.3s ease, opacity 0.3s ease;
}
.mf-cursor.-pointer::after { transform: scale(1.5); border-color: var(--cur-ring-hot); }

/* When the dot becomes a label the ring would only fence it in. */
.mf-cursor.-text::after,
.mf-cursor.-icon::after,
.mf-cursor.-media::after { opacity: 0; transform: scale(0.4); }
.mf-cursor.-hidden::after { opacity: 0; transform: scale(0); }

/* ----------------------------------------------------------------- the label */
/* Widened from the library's 36px square, which was sized for a single glyph
   and clips a word. Centred by matching left to half the width. */
.mf-cursor-text {
  top: -18px; left: -56px;
  width: 112px; height: 36px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--cur-ink);
}

/* ------------------------------------------------------------------- opt-out */
/* Anything that needs the real pointer back can say so. */
html.has-cursor [data-cursor-native],
html.has-cursor [data-cursor-native] * { cursor: auto; }

@media (hover: none), (prefers-reduced-motion: reduce) {
  html.has-cursor body { cursor: auto; }
  .mf-cursor { display: none; }
}