<style>
    #rec425376462 {position: fixed; top: 0; left: 0; right: 0; botton: 0; z-index: 100000;} #rec425361860 {height: 0;} #rec425361860 .tn-elem {position: fixed; z-index: 10!important; mix-blend-mode: difference;}
    :root{--widthCursor:22px;--heightCursor:22px;--borderCursor:transparent;--bgCursor:#FFF;--blendMode:difference;--radiusCursor:50%;--timingCursor:0.3s}.cursor{display:none;position:fixed;left:0;top:0;width:var(--widthCursor);height:var(--heightCursor);border:var(--borderCursor);background-color:var(--bgCursor);border-radius:var(--radiusCursor);pointer-events:none;will-change:contents;transform:translate(calc(-50% + 12px),calc(-50% + 12px));transition:transform 0.3s;z-index:100000;mix-blend-mode:var(--blendMode)}.cursor--hovered{transform:scale(4.5)}@media (min-width:768px){.cursor{display:block}body{cursor:none}.menu-link{cursor:none}}
</style>
<div class="cursor">
  <div class="cursor__inner">
  </div>
</div>
<script>
document.addEventListener("DOMContentLoaded",function(){
    const obj = document.querySelector(".number-counter div");
    const hoverElements = document.querySelectorAll(".menu-link");
    const cursor = document.querySelector('.cursor');
    const speed = 0.5;
    let mouse = { x: 300, y: 300 };
    let pos = { x: 0, y: 0 };
    
    function animateValue(obj, start, end, duration) {
        let startTimestamp = null;
        const step = (timestamp) => {
            if (!startTimestamp) startTimestamp = timestamp;
            const progress = Math.min(((timestamp - startTimestamp) / duration), 1);
            obj.innerHTML = `${Math.floor(progress * (end - start) + start)}%`;
            if (progress < 1) {
                window.requestAnimationFrame(step);
            }
        };
        window.requestAnimationFrame(step);
    }
    
    function closePreload (el) {
        let preload = document.querySelector(el);
        preload.style.opacity = 1;
        let preloadTime = setInterval(function(){
            preload.style.opacity = preload.style.opacity - 0.05;
            if (preload.style.opacity <= 0.05) { 
                clearInterval(preloadTime);
                preload.style.display = "none";
            }
        }, 5);
        document.body.style.overflow = "";
    }
    
    const updatePosition = () => {
        pos.x += (mouse.x - pos.x) * speed;
        pos.y += (mouse.y - pos.y) * speed;
        cursor.style.left = pos.x + 'px';
        cursor.style.top = pos.y + 'px';
    };

    const updateCoordinates = e => {
        mouse.x = e.clientX;
        mouse.y = e.clientY;
    }
    
    function loop() {
        updatePosition();
        requestAnimationFrame(loop);
    }
    
    hoverElements.forEach(e => {
        e.addEventListener("mouseover", function() {
            cursor.classList.add("cursor--hovered");
        });
        e.addEventListener("mouseleave", function() {
            cursor.classList.remove("cursor--hovered");
        });
    });
    
    if (window.matchMedia("(min-width: 768px)").matches) {
        window.addEventListener('mousemove', updateCoordinates);
    }
    
    window.addEventListener("load", function() {
        document.body.style.display = "hidden";
        animateValue(obj, 0, 100, 1500);
        setTimeout(() => {
            closePreload('#rec425376462');
        }, 1800);
    });
    
    requestAnimationFrame(loop);
});
</script>