If I move the mouse outside the web the custom cursor stays fixed on top

Site URL: https://www.loisartz.com/

I want to make that when I take the cursor out of my website, the normal cursor is put on, not my custom one. And that the transition between custom mouse and normal mouse is fluid, that it does not remain fixed at the top

This is the code:

CSS

// CUSTOM CURSOR // 
* {
  cursor: none;
  }

.cursor {
  --size: 20px;
  height: var( --size );
  width: var( --size );
  border-radius: 50%;
  pointer-events: none;
  position: fixed;
  transform: translate( -50%, -50% );
  z-index: 99999999999;
  
  }

.cursor.cursor-dot {
  background: #016cff; /* This defines the color of the cursor */
  transition: width 0.2s, height 0.2s, background-color 0.2s;
  transition-timing-function: ease-out;
  }

.cursor-dot.active {
  --size: 48px; 
  background-color: #aaaaaa;
  opacity: 0.5;
  }

CODE INJECTION:

<script>
  $( ( ) => {
    
   $( 'body' ).prepend ( '<div class="cursor cursor-dot" style="left: 0px; top: 0px;">' );
    
    var cursor = $(".cursor");
    
    $( window ).mousemove ( function ( e ) {
      cursor.css ( {  
               top: e.clientY,
            left: e.clientX 
        } );   
      } );
    

    $( window ).mousemove ( function ( e ) {
      $( 'a' ).on ( 'mouseenter', function ( ) { 
        cursor.addClass ( 'active' );
        } );
      } ); 
    
    $( window ).mousemove ( function ( e ) {
      $( 'a' ).on ( 'mouseleave', function ( ) {
        cursor.removeClass ( 'active' );
        } );
      } );
    } );
    
  </script>

Like this website: https://www.estevedurba.com/

Pls help me.

Thanks! ❤️

plss help me