/* ============ CURSOR ============ */
#cursor{
  position:fixed; z-index:9999; pointer-events:none; top:0; left:0;
  mix-blend-mode:difference; color:#fff;
}
@media (pointer:coarse){ #cursor{ display:none; } }

#cursor-dot{
  position:fixed; top:0; left:0; width:6px; height:6px; border-radius:50%;
  background:#fff;
  transform:translate(-50%,-50%);
  transition:width .2s var(--e-out), height .2s var(--e-out), opacity .2s;
  will-change:transform;
}
#cursor-ring{
  position:fixed; top:0; left:0; width:36px; height:36px; border-radius:50%;
  border:1px solid rgba(255,255,255,.75);
  transform:translate(-50%,-50%);
  transition:width .3s var(--e-out), height .3s var(--e-out), border-color .3s, background .3s;
  display:flex; align-items:center; justify-content:center;
  will-change:transform;
}
#cursor-label{
  font-family:var(--f-mono); font-size:9px; letter-spacing:.24em; text-transform:uppercase;
  opacity:0; transition:opacity .2s;
  color:#fff;
}

/* States */
body.cur-hover #cursor-ring{ width:52px; height:52px; }
body.cur-drag #cursor-ring{ width:72px; height:72px; background:rgba(255,255,255,.1); }
body.cur-drag #cursor-label{ opacity:1; }
body.cur-go #cursor-ring{ width:60px; height:60px; background:rgba(255,255,255,.08); }
body.cur-go #cursor-label{ opacity:1; }
body.cur-drag #cursor-dot, body.cur-go #cursor-dot{ opacity:0; }
body.cur-input #cursor-ring{ width:4px; height:26px; border-radius:2px; }
body.cur-input #cursor-dot{ opacity:0; }