.cursor-trail,
.custom-cursor {
  display: none;
  position: fixed;
  left: 0;
  top: 0;
  pointer-events: none;
  visibility: hidden;
}

@media (hover: hover) and (pointer: fine) {
  html.cursor-fx-active,
  html.cursor-fx-active * {
    cursor: none !important;
  }

  html.cursor-fx-active .cursor-trail,
  html.cursor-fx-active .custom-cursor {
    display: block;
  }

  .cursor-trail {
    z-index: 2147483645;
    width: 100vw;
    height: 100vh;
  }

  .custom-cursor {
    z-index: 2147483646;
    width: 30px;
    height: 30px;
    margin: -15px 0 0 -15px;
    border: 1px solid var(--cursor-color, #ff671c);
    border-radius: 50%;
    color: var(--cursor-color, #ff671c);
    background: color-mix(in srgb, var(--cursor-color, #ff671c) 9%, transparent);
    box-shadow: 0 0 18px color-mix(in srgb, var(--cursor-color, #ff671c) 24%, transparent);
    display: grid;
    place-items: center;
    font: 700 12px/1 Georgia, serif;
    transform: translate3d(-50px, -50px, 0);
    transition: width .16s, height .16s, margin .16s, color .16s, background-color .16s, transform .08s;
    will-change: transform;
  }

  .custom-cursor.is-visible { visibility: visible; }
  .cursor-trail.is-visible { visibility: visible; }

  .custom-cursor.is-interactive {
    width: 42px;
    height: 42px;
    margin: -21px 0 0 -21px;
    color: #090b0b;
    background: var(--cursor-color, #ff671c);
  }

  .custom-cursor.is-down { scale: .82; }
}

@media (prefers-reduced-motion: reduce) {
  html.cursor-fx-active,
  html.cursor-fx-active * { cursor: auto !important; }
  .cursor-trail,
  .custom-cursor { display: none !important; }
}