@media (hover: hover) and (pointer: fine) {
  html, body {cursor: none !important;}


  .cursor-ring, .cursor-dot {
    position: fixed;
    top: 0;
    left: 0;
    pointer-events: none;
    transform: translate(-50%, -50%);
    z-index: 99999;
  }

  .cursor-ring {
    width: 38px;
    height: 38px;
    border: 2px solid #ffffff;     /* white ring */
    border-radius: 50%;
    mix-blend-mode: difference;
    opacity: 0;                    /* hidden until first move */
    transition: width .25s ease, height .25s ease;
  }

  .cursor-dot {
    width: 14px;
    height: 14px;
    background: #000000;           /* black center */
    border-radius: 50%;
    opacity: 0;
  }

  .cursor-hover .cursor-ring {
    width: 50px;
    height: 50px;
  }
}