.cursor {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: var(--width);
    height: var(--height);
    transform: translate(calc(var(--x) - var(--width) / 2), calc(var(--y) - var(--height) / 2));
    /* transition-duration: 125ms;
    transition-timing-function: cubic-bezier(0.39, 0.575, 0.565, 1);
    transition-property: width, height, transform; */
    transition: 150ms width cubic-bezier(0.39, 0.575, 0.565, 1),
    150ms height cubic-bezier(0.39, 0.575, 0.565, 1);
    pointer-events: none;
    will-change: transform;
    justify-content: center;
    align-items: center;
    mix-blend-mode: var(--mode);
    z-index: 9999999;
    --text: none;
}

.cursor.hide {
    opacity: 0;
}

.cursor .open {
    display: var(--text);
    color: var(--white);
    font-size: 14px;
    font-family: 'Inter';
    font-weight: 500;
    position: relative;
    z-index: 99;
}

@media (pointer: fine) {
    .cursor {
        display: flex;
    }
    * {
        cursor: none;
    }
}
.cursor::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: var(--radius);
    background: var(--color);
    /* opacity: var(--scale); */
    -webkit-transform: scale(var(--scale));
    transform: scale(var(--scale));
    transition: 300ms opacity cubic-bezier(0.39, 0.575, 0.565, 1),
                300ms transform cubic-bezier(0.39, 0.575, 0.565, 1),
                300ms background-color cubic-bezier(0.39, 0.575, 0.565, 1),
                150ms border-radius cubic-bezier(0.39, 0.575, 0.565, 1);
}

html:not(html:hover) .cursor::after {
    opacity: 0;
    /* transform: scale(1); */
}