/* cursor-de-superficie — a plain dot that always reads on its surface.
   Hidden by default (styles.css: .cursor{display:none}); it appears only under
   html.has-cursor, which the script adds after the first real mouse move on a
   fine pointer. No JS, coarse pointers, forced colours and print keep the
   native cursor. Colour comes from [data-over], never from blending. */

@media (pointer: fine) {
  html.has-cursor,
  html.has-cursor * { cursor: none !important; }

  html.has-cursor .cursor {
    display: block;
    position: fixed;
    left: 0;
    top: 0;
    width: 0;
    height: 0;
    z-index: var(--z-cursor);
    pointer-events: none;
    color: var(--ink);
    opacity: 0;
    contain: layout style size;
    will-change: transform;
    transition: opacity var(--t-micro, .3s) var(--ease-leave);
  }

  html.has-cursor .cursor.is-on {
    opacity: 1;
    transition: opacity var(--t-micro, .3s) var(--ease-react);
  }

  /* Fill: blue surface → ink, ink surface → white, white surface → ink. */
  html.has-cursor .cursor[data-over="blue"],
  html.has-cursor .cursor[data-over="white"] { color: var(--ink); }
  html.has-cursor .cursor[data-over="ink"] { color: var(--white); }

  /* The dot: 8px, the surface's opposite. */
  .cursor .cur-dot {
    position: absolute;
    left: -4px;
    top: -4px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--ink);
    transform: scale(1);
    transition: transform var(--t-micro, .3s) var(--ease-react), opacity var(--t-micro, .3s) var(--ease-react), background-color .15s var(--ease-react);
  }
  .cursor[data-over="blue"] .cur-dot,
  .cursor[data-over="white"] .cur-dot { background-color: var(--ink); }
  .cursor[data-over="ink"] .cur-dot { background-color: var(--white); }

  /* The ring: a zero-size anchor with two transform-only strokes, so no state
     ever changes a box size (no layout from a state change).
     ::before is the 36px link ring, ::after the 280px reaction radius. */
  .cursor .cur-ring {
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 0;
  }

  .cursor .cur-ring::before,
  .cursor .cur-ring::after {
    content: "";
    position: absolute;
    box-sizing: border-box;
    border-radius: 50%;
    transform: scale(0);
    opacity: 1;
    transition: transform var(--t-micro, .3s) var(--ease-react), opacity var(--t-micro, .3s) var(--ease-react), border-color .15s var(--ease-react);
  }

  .cursor .cur-ring::before {
    left: -18px;
    top: -18px;
    width: 36px;
    height: 36px;
    border: 1.5px solid currentColor;   /* at scale(0) until .is-link: only transform changes */
  }

  .cursor .cur-ring::after {
    left: -140px;
    top: -140px;
    width: 280px;
    height: 280px;
    border: 1px solid rgba(255, 255, 255, .24);
  }

  /* ---------- States ---------- */

  /* Over the silent section: the dot quiets to half. */
  .cursor.is-quiet .cur-dot { transform: scale(.5); }

  /* Over a link: the dot gives way to a 1.5px ring in the surface colour. */
  .cursor.is-link .cur-dot { transform: scale(0); }
  .cursor.is-link .cur-ring::before { transform: scale(1); }

  /* While the reaction pin is active: the 140px pointer-gather radius. The dot stays. */
  .cursor.is-reaction .cur-ring::after { transform: scale(1); }

  /* Inside the pill's zone the magnet takes over: everything goes. */
  .cursor.is-magnet .cur-dot,
  .cursor.is-magnet .cur-ring::before,
  .cursor.is-magnet .cur-ring::after { transform: scale(0); }
}

/* ---------- Releases ---------- */

/* Reduced motion: the dot follows instantly and states cut; colours still apply. */
@media (prefers-reduced-motion: reduce) {
  html.has-cursor .cursor,
  html.has-cursor .cursor.is-on,
  .cursor .cur-dot,
  .cursor .cur-ring::before,
  .cursor .cur-ring::after { transition-duration: 0s; }
}

/* Forced colours: keep the system cursor, which the user's theme controls. */
@media (forced-colors: active) {
  html.has-cursor,
  html.has-cursor * { cursor: auto !important; }
  html.has-cursor a[href],
  html.has-cursor button { cursor: pointer !important; }
  html.has-cursor .cursor { display: none; }
}

@media print {
  html.has-cursor .cursor { display: none; }
}