/* ==========================================================================
   THE CURSOR - the home page's, made shareable

   A gold dot that IS the pointer, and a gold ring that eases after it. Over
   anything clickable the ring opens and fills faintly and the dot gets out
   of the way; on press the ring tightens.

   Lifted off index.html so about and career show the same hand. Its tokens
   are declared here rather than read from the page, because the three pages
   do not agree on token names and a var() that resolves to nothing takes
   the whole declaration with it - silently.

   `cursor:none` hangs off .has-cur, which the script adds only after it has
   decided this is a machine with a real pointer. If the script never runs,
   the ordinary arrow is still there.
   ========================================================================== */
.cur-dot,.cur-ring{
  --cur:#c9a227;
  --cur-line:rgba(255,196,0,.55);
  --cur-line-on:rgba(255,196,0,.85);
  --cur-fill:rgba(255,196,0,.10);
  --cur-ease:cubic-bezier(.16,1,.3,1);
  position:fixed;top:0;left:0;z-index:9999;
  pointer-events:none;border-radius:50%;
  transform:translate3d(-100px,-100px,0);
}
.cur-dot{width:7px;height:7px;margin:-3.5px 0 0 -3.5px;background:var(--cur)}
.cur-ring{width:34px;height:34px;margin:-17px 0 0 -17px;
  border:1px solid var(--cur-line);
  transition:width .28s var(--cur-ease),height .28s var(--cur-ease),
             margin .28s var(--cur-ease),background-color .28s var(--cur-ease),
             border-color .28s var(--cur-ease),opacity .28s var(--cur-ease)}

.cur-over .cur-ring{width:64px;height:64px;margin:-32px 0 0 -32px;
  background:var(--cur-fill);border-color:var(--cur-line-on)}
.cur-over .cur-dot{opacity:0}
.cur-down .cur-ring{width:26px;height:26px;margin:-13px 0 0 -13px}

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

/* A pointer that cannot be moved by hand has no use for either of these,
   and must never lose its own arrow to them. */
@media (hover:none),(pointer:coarse){
  .cur-dot,.cur-ring{display:none}
  html.has-cur,html.has-cur *{cursor:auto!important}
}
/* The ring chasing the hand is the reader's own motion, but it keeps moving
   after the hand has stopped - which is the part this setting is about. */
@media (prefers-reduced-motion: reduce){
  .cur-ring{transition-duration:.01ms}
}