*, *::before, *::after, html, body, a, button, input, select, textarea {
    cursor: none !important;
}

*:active, *:focus, *:hover {
    cursor: none !important;
}

.cursor-dot {
    width: 22px;
    height: 22px;
    position: fixed;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 10000;
    border-radius: 50%;
    background: rgba(60, 60, 60, 0.08); 
    backdrop-filter: blur(8px) saturate(150%);
    -webkit-backdrop-filter: blur(8px) saturate(150%);
    border: 0.5px solid rgba(255, 255, 255, 0.15); 
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), inset 0 0 8px rgba(255, 255, 255, 0.2);
    transform: translate(-50%, -50%);
    will-change: transform;
    opacity: 0;
    transition:
        opacity 0.3s ease, 
        width 0.25s cubic-bezier(0.16, 1, 0.3, 1), 
        height 0.25s cubic-bezier(0.16, 1, 0.3, 1), 
        background-color 0.3s ease,
        backdrop-filter 0.3s ease;
    display: none;
}

@media (pointer: fine) {
    .cursor-dot { display: block; }
}

@media (pointer: coarse) {
    *, html, body { cursor: auto !important; }
}