/* The pointer — ZenMode OS
   The cursor is the mark: a ring with a dot inside it while your hand keeps
   moving, and an opened ring with the dot out in the gap once you stop.

   One stylesheet for every page, because the three page stylesheets disagree
   about their ground and the cursor has to read on all of them. The colours
   are set from js/cursor.js, which knows what it is currently over; what is
   below is structure and the value to draw before the first frame.

   The overlay is the whole viewport with overflow clipped, so the ring can
   never add a horizontal scrollbar by reaching the right edge.

   Colours and curves are tokens (--text, --bg, --t-*, --ease-*), so the pointer
   follows the theme: ink on paper, paper on ink, in both light and dark. */

@media (hover:hover) and (pointer:fine){
  html.zm-pointer,
  html.zm-pointer body,
  html.zm-pointer a,
  html.zm-pointer button,
  html.zm-pointer .btn,
  html.zm-pointer .btn-primary,
  html.zm-pointer .btn-outline,
  html.zm-pointer [role="group"]{cursor:none}
  html.zm-pointer input,
  html.zm-pointer textarea,
  html.zm-pointer select{cursor:auto}
}

.zm-cur{
  position:fixed;inset:0;z-index:95;
  pointer-events:none;overflow:hidden;
  opacity:0;transition:opacity var(--t-2) var(--ease-calm);
}
.zm-cur.on{opacity:1}
.zm-cur.off{display:none}

.zm-cur-in{position:absolute;left:0;top:0;will-change:transform}
.zm-cur svg{position:absolute;left:-24px;top:-24px;display:block;overflow:visible;
  transition:opacity var(--t-1) var(--ease-calm)}
.zm-cur-ring{fill:none;stroke:var(--text);stroke-width:1.25;stroke-linecap:round}
.zm-cur-dot{fill:var(--text)}
.zm-cur.down svg{opacity:.55}

.zm-cur-lab{
  position:absolute;left:28px;top:-7px;
  font-family:"Departure Mono",ui-monospace,monospace;
  font-size:10px;letter-spacing:0.14em;white-space:nowrap;
  opacity:0;transition:opacity var(--t-2) var(--ease-calm);
}
.zm-cur.say .zm-cur-lab{opacity:.72}
/* near the right edge the label reads back toward the page, not off it */
.zm-cur.flip .zm-cur-lab{left:auto;right:28px}

/* things that lean toward the pointer */
[data-magnet]{transition:transform var(--t-2) var(--ease-settle)}
[data-magnet]:active{transition:transform var(--t-1) var(--ease-calm)}

@media (prefers-reduced-motion: reduce){
  .zm-cur{display:none}
  [data-magnet]{transition:none;transform:none !important}
}