<div class="cursor">
    <div class="ball ball--small">
        <svg height="10" width="10">
            <circle cx="5" cy="5" r="4" stroke-width="0"></circle>
        </svg>
    </div>
    <div class="ball ball--big">
        <svg height="30" width="30">
            <circle cx="15" cy="15" r="12" stroke-width="0"></circle>
        </svg>
    </div>
</div>

<script>
    import { gsap } from "gsap";

    const smallBall = document.querySelector(".cursor > .ball--small");
    const bigBall = document.querySelector(".cursor >.ball--big");
    const hoverables = document.querySelectorAll(".hoverable");

    // Listeners
    document.body.addEventListener("mousemove", onMouseMove);
    for (let i = 0; i < hoverables.length; i++) {
        hoverables[i].addEventListener("mouseenter", onMouseHover);
        hoverables[i].addEventListener("mouseleave", onMouseHoverOut);
    }

    // Move the cursor
    function onMouseMove(event: MouseEvent) {
        gsap.to(bigBall, {
            duration: 0.4,
            y: event.clientY - 15,
            x: event.clientX - 15,
        });
        gsap.to(smallBall, {
            duration: 0.1,
            x: event.clientX - 5,
            y: event.clientY - 7,
        });
    }

    // Hover an element
    function onMouseHover() {
        gsap.to(bigBall, {
            duration: 0.3,
            scale: 5,
        });
    }
    function onMouseHoverOut() {
        gsap.to(bigBall, {
            duration: 0.3,
            scale: 1,
        });
    }
</script>

<style>
    .cursor {
        pointer-events: none;
    }

    .ball {
        position: fixed;
        top: 0;
        left: 0;
        mix-blend-mode: difference;
        /* z-index: -1; */

        & circle {
            fill: var(--clr-ts-warm-red);
        }
    }
</style>
