/* Custom Inverted Cursor */
@media (pointer: fine) {
    body {
        cursor: none;
    }

    a,
    button,
    input,
    textarea,
    select,
    label,
    [role="button"] {
        cursor: none;
    }

    .custom-cursor {
        position: fixed;
        top: 0;
        left: 0;
        width: 20px;
        height: 20px;
        background-color: white;
        border-radius: 50%;
        pointer-events: none;
        mix-blend-mode: difference;
        z-index: 10000;
        transform: translate(-50%, -50%);
        transition: width 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275),
            height 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275),
            background-color 0.3s;
        will-change: transform, width, height;
    }

    .custom-cursor.hovered {
        width: 60px;
        height: 60px;
        background-color: white;
    }

    /* Optional: Add a text label inside the cursor for certain elements if needed */
    .custom-cursor::after {
        content: attr(data-label);
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 10px;
        color: black;
        /* Inverted against white cursor is black */
        opacity: 0;
        transition: opacity 0.3s;
        white-space: nowrap;
    }

    .custom-cursor.hovered::after {
        opacity: 1;
    }
}