I'm new to stack overflow and very novice to all scripting so please forgive any errors in syntax or etiquette, I'm here to learn.

So I'm currently building a squarespace site and attempting to add some custom code. I am using some found jquery code to use a custom dot cursor that resizes when you hover over a link. It's working as intended, with the js injected into the site footer and custom css driving the style. See my site example here and here

Currently the cursor scales up to a specified size on hover (defined in the css), however I'm trying to figure out a way to change the scale/behavior of the cursor depending on the size/style/type of link. So for example, on a smaller link the dot scales less and on a larger button it scales more etc.

I have found a few things online that pretty much do what I want, but being new to all this I'm not sure how to apply the code given to make it work. This is close to what I'm after - https://github.com/gaoryrt/cursor-dot but I haven't been able to get that to work.

Any help or guidance would be hugely appreciated.

Here is my current JS -

 $( ( ) => {


$( 'body' ).prepend ( '<div class="cursor cursor-dot" style="left: 0px; top: 0px;">' );

$( window ).mousemove ( function ( e ) {

  $( '.cursor' ).css ( {
  
    left: e.pageX,
    top: e.pageY
    
    } );
    
  } );
  
$( window ).mousemove ( function ( e ) {

  $( 'a' ).on ( 'mouseenter', function ( ) {
    
    $( '.cursor' ).addClass ( 'active' );
    
    } );
    
  } );
  
$( window ).mousemove ( function ( e ) {

  $( 'a' ).on ( 'mouseleave', function ( ) {
  
    $( '.cursor' ).removeClass ( 'active' );
    
    } );
    
  } );
  
} );

And this is the CSS -

@media ( hover: none ){
  .cursor {


display: none !important;

} }
{
 cursor: none ;
}
.cursor {
  --size: 80px;
  height: var( --size );
  width: var( --size );
  border-radius: 50%;
  pointer-events: none;  
position: absolute;
 transform: translate( -50%, -50% );
  z-index: 99999999999;
  }
.cursor.cursor-dot { 
 background: #ffffff; 
mix-blend-mode: difference; 
transition: width 0.5s, height 0.5s, background-color 0.3s; 
transition-timing-function: ease-out; 
}
.cursor-dot.active {
  --size: 300px;
  background-color: #ffffff;
  }

I also have this in the page header injection to call in the JS -

<script src="//ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>