@media (pointer: fine) {

    html,
    body {
        cursor: none;
    }

    /* Centre cursor */
    #cur {
        position: fixed;
        width: 10px;
        height: 10px;
        border-radius: 50%;

        background: var(--brand-l);

        pointer-events: none;
        z-index: 9999;

        transform: translate(-50%, -50%);

        opacity: 0;

        transition:
            opacity 0.2s ease,
            width 0.14s ease,
            height 0.14s ease;
    }

    /* Outer cursor ring */
    #curR {
        position: fixed;
        width: 30px;
        height: 30px;
        border-radius: 50%;

        border: 1.5px solid rgba(80, 120, 255, 0.55);

        pointer-events: none;
        z-index: 9998;

        transform: translate(-50%, -50%);

        opacity: 0;

        transition:
            opacity 0.2s ease,
            width 0.2s ease,
            height 0.2s ease;
    }
}

@media (pointer: coarse) {

    html,
    body {
        cursor: auto;
    }

    #cur,
    #curR {
        display: none !important;
    }
}