* {
    cursor: none !important;
    user-select: none !important;
    -webkit-user-drag: none;
}

#cursor-dot {
    position: fixed;
    pointer-events: none;
    left: 0;
    top: 0;
    width: var(--cursor-size);
    height: var(--cursor-size);
    background-color: var(--text);
    border: solid 2px var(--text);
    border-radius: 50%;
    opacity: 0;
    user-select: none;
    z-index: 999999;
    transform: translate(-50%, -50%);
    transition:
        background-color var(--cursor-transition-time) cubic-bezier(0.34, 1.56, 0.64, 1),
        width var(--cursor-transition-time) cubic-bezier(0.34, 1.56, 0.64, 1),
        height var(--cursor-transition-time) cubic-bezier(0.34, 1.56, 0.64, 1),
        opacity var(--cursor-transition-time) cubic-bezier(0.34, 1.56, 0.64, 1);
}

#cursor-dot.hover {
    width: var(--cursor-hover-size);
    height: var(--cursor-hover-size);
    background-color: color-mix(in srgb, var(--text) 20%, transparent);
    backdrop-filter: blur(1.5px);
}

#cursor-dot.hidden {
    opacity: 0;
    width: 0;
    height: 0;
}