/* Desktop only, and only where a real pointer exists. A dot, and a word when
   the dot is over something that does anything. */
.cursor { display: none; }
@media (hover: hover) and (pointer: fine) {
  .cursor {
    display: grid; place-items: center;
    position: fixed; top: 0; left: 0; z-index: 300;
    width: 7rem; height: 7rem; margin: -3.5rem 0 0 -3.5rem;
    pointer-events: none;
    mix-blend-mode: difference;
    will-change: transform;
  }
  .cursor__dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: #fff;
    transition: transform .45s var(--slow), opacity .3s linear;
  }
  .cursor__ring {
    position: absolute; inset: 50%; width: 3.4rem; height: 3.4rem; margin: -1.7rem;
    border: 1px solid rgba(255,255,255,.9); border-radius: 50%;
    transform: scale(.2); opacity: 0;
    transition: transform .6s var(--slow), opacity .4s var(--ease);
  }
  .cursor__word {
    position: absolute;
    font-size: .58rem; font-weight: 500; letter-spacing: .24em; text-transform: uppercase;
    color: #fff; opacity: 0; transform: translateY(.35rem);
    transition: opacity .35s var(--ease), transform .45s var(--slow);
  }
  .cursor.is-active .cursor__ring { transform: scale(1); opacity: 1; }
  .cursor.is-active .cursor__dot { transform: scale(0); opacity: 0; }
  .cursor.is-active .cursor__word { opacity: 1; transform: translateY(0); }
  .cursor.is-down .cursor__ring { transform: scale(.82); }
  html.has-cursor, html.has-cursor * { cursor: none !important; }
}