/* cursor.css — the site cursor (js/cursor.js). Only active under html.has-cursor, which cursor.js sets
   for (hover:hover) and (pointer:fine) without reduced motion. Layers are pointer-events:none, so text
   selection and clicks are untouched. Colours ride the tokens (--ink / --red / --ground) so night mode
   re-inks the crosshair for free. */

html.has-cursor, html.has-cursor * { cursor: none !important; }

/* layers */
.cur, .cur-trail { position: fixed; inset: 0; pointer-events: none; overflow: hidden; }
.cur { z-index: var(--z-cursor, 120); opacity: 0; transition: opacity 320ms var(--ease-out-soft, ease); contain: strict; }
.cur-trail { z-index: calc(var(--z-cursor, 120) - 1); width: 100%; height: 100%; display: block; }
.cur.is-on { opacity: 1; }
.cur.is-on.is-idle { opacity: .4; }
.cur.is-on.is-out, .cur.is-off, .cur-trail.is-off { opacity: 0; }

/* every part is transform-positioned from (0,0) */
.cur > * { position: absolute; left: 0; top: 0; will-change: transform; }

/* centre dot: stays with the pointer in both modes */
.cur-dot { width: 3px; height: 3px; margin: -1px 0 0 -1px; background: var(--red); }

/* the four arms; each is a corner-bracket (two 1px legs from a shared origin) that reads as a plain
   hairline arm when only one leg is scaled up. The .hd handle is the 4px selection square. */
.cur-b .lh, .cur-b .lv, .cur-b .hd { position: absolute; left: 0; top: 0; background: var(--ink); transform-origin: 0 0; }
.cur-b .lh { width: 10px; height: 1px; }
.cur-b .lv { width: 1px; height: 10px; }
.cur-b .hd { width: 4px; height: 4px; margin: -2px 0 0 -2px; opacity: 0; }

/* the marquee rectangle between the corners */
.cur-rect { box-sizing: border-box; border: 1px dashed var(--ink); opacity: 0; }

/* optional data-cursor-label: sans caps, sits just above the box's top-left. Off by default
   (Folio.cursor.TUNE.showLabel = false — tiles carry their own caption); opt in via setParams({showLabel:true}). */
.cur-lab {
  font-family: var(--font-sans, 'Helvetica Neue', Arial, sans-serif); font-weight: 500; font-size: 10px; line-height: 1;
  text-transform: uppercase; letter-spacing: var(--track-caps, .08em);
  color: var(--ink); background: var(--ground); padding: 2px; white-space: nowrap; opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  .cur, .cur-trail { display: none; }
  html.has-cursor, html.has-cursor * { cursor: auto !important; }
}