Пошаговое движение Custom Cursor и другая проблема

Question

У меня реализован пользовательский курсор для моего сайта, но я хочу добавить задержку для большего курсора. Поэтому я добавил к нему свойство transition, но оно кажется очень сложным.

Кроме того, у меня есть анимация при наведении, которая, кажется, не работает должным образом. Когда я обновляю sh мою страницу и наводим курсор на ссылку, в первый раз она ничего не делает, но во второй раз при наведении на нее анимации работает.

Это код CSS:

.cursor{
  width: 1rem;
  height: 1rem;
  border-radius: 100%;
  background: rgba(255, 255, 255, 0.5);
  position: absolute;
  transform: translate(-50%, -50%);
  z-index: 1000;
  pointer-events: none;
  transition: all 0.5s ease; 
  transition-property: width, height;
  transform-origin: 100% 100%;
}

.cursor2{
  width: 4rem;
  height: 4rem;
  border-radius: 100%;
  border: 2px solid rgba(255, 255, 255, 0.7);
  position: absolute;
  transform: translate(-50%, -50%);
  z-index: 1000;
  pointer-events: none;
  transition: all 1ms linear; 
  transition-property: width, height;
  transform-origin: 100% 100%;
}

Это JS:

let hover = document.querySelectorAll(".project-link");
let mouseCursor = document.querySelector(".cursor");
let mouseCursor2 = document.querySelector(".cursor2");

hover.forEach(el => {
    $(el).hover(function() {
            el.addEventListener("mouseover", function(){
                mouseCursor.classList.add("hover"),
                mouseCursor2.classList.add("hide");
            });
            el.addEventListener("mouseleave", function(){
                mouseCursor.classList.remove("hover"),
                mouseCursor2.classList.remove("hide");
            });
        });
    })

window.addEventListener("mousemove", cursor);

function cursor(e){
   mouseCursor.style.top = e.pageY + "px",
   mouseCursor.style.left = e.pageX + "px";
   mouseCursor2.style.top = e.pageY  + "px",
   mouseCursor2.style.left = e.pageX  + "px";
}

Это код CSS и JS, которые я получил, чтобы создать свой пользовательский курсор. Это все, что у меня есть, но похоже, что переполнение стека заставляет меня писать больше, поэтому позвольте мне объяснить это подробнее.

Поэтому, когда я нахожу ссылку после обновления страницы, курсор не анимируется. По сути, он не добавляет требуемый класс, но если я наведу курсор на него во второй раз, не обновляя в тот же момент времени, анимация сработает, и он добавит требуемый класс в курсор div.