html, body, *, *::before, *::after {
    cursor: none !important;
}  

.cursor-dot, .cursor-circle {
    mix-blend-mode: difference;
    position: fixed;
    pointer-events: none;
    z-index: 999999;
}
  
.cursor-dot {
    transform-origin: left center;
    --dot-size: 7px;
    opacity: 0;
    width: var(--dot-size);
    height: var(--dot-size);
    background: white;
    border-radius: 50%;
    will-change: opacity, transform, width, height !important;
    /*transition: transform 0.05s ease-out, width 0.1s ease-out, height 0.2s ease-out, opacity 0.2s ease-out;*/
    transition: opacity .03s ease-out, width .03s ease-out, height .03s ease-out !important;
}
  
.cursor-circle {
    --circle-size: 15px;
    opacity: 0;
    width: var(--circle-size);
    height: var(--circle-size);
    border: 1px solid white;
    border-radius: 50%;
    will-change: opacity, transform, width, height, border !important;
    /*transition: transform 0.055s ease-out, width 0.2s ease-out, height 0.2s ease-out, opacity 0.2s ease-out, border 0.2s ease-out;*/
    transition: opacity .05s ease-out, border .05s ease-out, width .05s ease-out, height .05s ease-out !important;
    
}

.cursor-dot.hover
{
    width: calc(var(--dot-size) * 0);
    height: calc(var(--dot-size) * 0);
}

.cursor-circle.hover
{
    border: 2px solid white;
    width: calc(var(--circle-size) * 2);
    height: calc(var(--circle-size) * 2);
}