/* Decorative desktop cursor trail. It never captures clicks and is disabled on touch devices. */
.cursor-ring,
.cursor-dot {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 2147483646;
  opacity: 0;
  will-change: transform, opacity;
}

.cursor-ring {
  width: 38px;
  height: 38px;
  margin: -19px 0 0 -19px;
  border: 1px solid rgba(255, 255, 255, .78);
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .12), 0 8px 24px rgba(0, 0, 0, .18);
  mix-blend-mode: difference;
  transition: width .2s ease, height .2s ease, margin .2s ease, border-color .2s ease, opacity .18s ease;
}

.cursor-dot {
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -3px;
  border-radius: 50%;
  background: #ffb11b;
  box-shadow: 0 0 14px rgba(255, 177, 27, .58);
  transition: width .16s ease, height .16s ease, margin .16s ease, opacity .18s ease, background .16s ease;
}

.cursor-ring.is-visible,
.cursor-dot.is-visible { opacity: 1; }

.cursor-ring.is-hovering {
  width: 58px;
  height: 58px;
  margin: -29px 0 0 -29px;
  border-color: rgba(255, 177, 27, .95);
}

.cursor-dot.is-hovering {
  width: 8px;
  height: 8px;
  margin: -4px 0 0 -4px;
  background: #fff;
}

.cursor-ring.is-clicking {
  width: 28px;
  height: 28px;
  margin: -14px 0 0 -14px;
}

@media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) {
  .cursor-ring,
  .cursor-dot { display: none !important; }
}