/* ASHCROFT — the pointer.

   Loaded by every page. It used to live at the bottom of products.css, which
   meant the story — the one page that loads story.css and nothing else — got
   the rule that hides the system cursor and none of the rules that draw the
   replacement. A shared object needs a shared sheet.

   A white disc with an antique-gold glow behind it. The disc tracks the mouse
   exactly and the glow follows a frame or two behind, which is what makes it
   read as a carried light rather than a graphic stuck to the cursor.

   Only drawn where cursor.js decides it belongs — .has-cursor is the switch,
   so a touch device never loses its native behaviour.
*/

:root{
  /* the pointer needs these on every page, and story.css does not define
     --ease; a local fallback is cheaper than coupling the two sheets */
  --cur-ease: cubic-bezier(.22,.61,.36,1);
}

.has-cursor,
.has-cursor a,
.has-cursor button,
.has-cursor summary,
.has-cursor [data-open],
.has-cursor label{ cursor: none; }
/* text you can select keeps its I-beam — hiding that is hostile */
.has-cursor input, .has-cursor textarea{ cursor: text; }

.cur-dot, .cur-glow{
  position: fixed;
  top: 0; left: 0;
  z-index: 2147483647;
  pointer-events: none;
  opacity: 0;
  will-change: transform;
}
.cur-live .cur-dot, .cur-live .cur-glow{ opacity: 1; }

.cur-dot{
  width: 7px; height: 7px;
  margin: -3.5px 0 0 -3.5px;
  border-radius: 50%;
  background: #fffdf8;
  /* A white disc on #fffaf3 paper is invisible — that is what it was doing.
     The ring is what makes it an object: a solid antique-gold edge, with a
     thin dark halo under it so it separates from the paper at any size. */
  box-shadow: 0 0 0 1.7px rgba(124,95,56,1),
              0 0 0 2.9px rgba(22,18,13,.30),
              0 1px 4px rgba(22,18,13,.30);
  transition: opacity .3s var(--cur-ease), width .28s var(--cur-ease),
              height .28s var(--cur-ease), margin .28s var(--cur-ease),
              background .28s var(--cur-ease);
}

.cur-glow{
  width: 34px; height: 34px;
  margin: -17px 0 0 -17px;
  border-radius: 50%;
  /* antique gold, not yellow: the same #9a7b4f the rules and the eyebrows
     are set in, pushed warm and burned off to nothing at the edge */
  background: radial-gradient(circle,
    rgba(166,114,42,.80) 0%,
    rgba(150,102,40,.48) 34%,
    rgba(132,94,48,.20) 60%,
    rgba(140,105,58,0)   78%);
  transition: opacity .45s var(--cur-ease), width .38s var(--cur-ease),
              height .38s var(--cur-ease), margin .38s var(--cur-ease),
              filter .38s var(--cur-ease);
}

/* over something you can act on: the disc opens into a ring, the light grows */
.cur-hot .cur-dot{
  width: 17px; height: 17px;
  margin: -8.5px 0 0 -8.5px;
  background: rgba(255,253,248,.20);
  box-shadow: 0 0 0 1.6px rgba(154,123,79,.95),
              0 0 0 2.6px rgba(22,18,13,.14);
}
.cur-hot .cur-glow{
  width: 54px; height: 54px;
  margin: -27px 0 0 -27px;
  filter: brightness(1.22);
}

/* pressed: everything contracts, the way a real light source would flare down */
.cur-down .cur-dot{ width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; }
.cur-down .cur-glow{ width: 26px; height: 26px; margin: -13px 0 0 -13px; }

/* on the dark ground the gold has to lift or it disappears into the black */
.dark .cur-glow{
  background: radial-gradient(circle,
    rgba(214,171,104,.50) 0%,
    rgba(192,154,104,.28) 38%,
    rgba(192,154,104,.11) 62%,
    rgba(192,154,104,0)   78%);
}
.dark .cur-dot{ box-shadow: 0 0 0 1.4px rgba(214,171,104,.75); }
.dark .cur-hot .cur-dot{
  background: rgba(255,253,248,.16);
  box-shadow: 0 0 0 1.5px rgba(255,253,248,.9);
}