/* 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. */

@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 260ms ease;
}
.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 200ms ease}
.zm-cur-ring{fill:none;stroke:#12160F;stroke-width:1.25;stroke-linecap:round}
.zm-cur-dot{fill:#12160F}
.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 240ms ease;
}
.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 320ms cubic-bezier(0.22,1,0.36,1)}
[data-magnet]:active{transition:transform 90ms ease}

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