/* Focus Ball cursor
   A stretchy ball that morphs into a highlight around anything marked with data-cursor.
   data-cursor="link"  → soft grey highlight shaped like the element, crimson pointer dot
   data-cursor="play"  → thin outline around the element + label (data-label) at the pointer
   data-cursor="drag"  → same as play, for draggable strips
   Add data-magnet to make an element lean toward the pointer.
   Add data-cursor-float to show only the label (for big canvases), and data-dark on dark sections. */

:root {
  --cursor-ink: #0b0b0b;
  --cursor-accent: #b3122e;
  --cursor-tint: rgba(11, 11, 11, .08);
}

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

#cur { position: fixed; inset: 0; pointer-events: none; z-index: 9999; transition: opacity .25s; }
#cur.hidden { opacity: 0; }

#cur .hl {
  position: fixed; left: 0; top: 0;
  width: 16px; height: 16px; border-radius: 8px;
  background: var(--cursor-ink);
  box-shadow: inset 0 0 0 1.5px transparent;
  transform-origin: 50% 50%;
  will-change: transform, width, height;
  transition: background .35s, box-shadow .35s;
}
#cur.locked.s-link .hl { background: var(--cursor-tint); }
#cur.locked.s-play .hl, #cur.locked.s-drag .hl { background: transparent; box-shadow: inset 0 0 0 1.5px var(--cursor-ink); }

#cur .pt {
  position: fixed; left: 0; top: 0; width: 6px; height: 6px; margin: -3px 0 0 -3px;
  border-radius: 50%; background: var(--cursor-ink); opacity: 0;
  transition: opacity .25s, background .3s;
}
#cur.locked.s-link .pt { opacity: 1; background: var(--cursor-accent); }

/* Label pill: size, position, blur and opacity are all driven by springs in cursor.js. */
#cur .tag {
  position: fixed; left: 0; top: 0; width: 16px; height: 16px;
  display: grid; place-items: center; overflow: hidden;
  border-radius: 999px; background: #fff; color: var(--cursor-ink);
  font: 500 12.5px/1 "Poppins", "Helvetica Neue", Arial, sans-serif; letter-spacing: -.01em;
  white-space: nowrap; opacity: 0;
  will-change: translate, transform, width, height, opacity, filter;
  transition: background-color .35s, color .35s;
}
#cur .tag-measure {
  position: fixed; left: -9999px; top: 0; visibility: hidden; white-space: nowrap;
  font: 500 12.5px/1 "Poppins", "Helvetica Neue", Arial, sans-serif; letter-spacing: -.01em;
}

/* On dark sections (mark the section with data-dark) the cursor flips to white. */
#cur.on-dark .hl { background: #fff; }
#cur.on-dark.locked.s-link .hl { background: rgba(255, 255, 255, .14); }
#cur.on-dark.locked.s-play .hl, #cur.on-dark.locked.s-drag .hl { background: transparent; box-shadow: inset 0 0 0 1.5px #fff; }

[data-magnet] { transition: transform .5s cubic-bezier(.2, .8, .2, 1); }

/* Label-only cursor over big light canvases (the 3D gear viewer): dark pill so it reads on white. */
#cur.float:not(.on-dark) .tag { background: var(--cursor-ink); color: #fff; }