/* --- Custom Cursor --- */
@media (pointer: fine) {
    * {
        cursor: none !important;
    }
    #custom-cursor {
        position: fixed;
        top: 0; left: 0;
        width: 20px; height: 20px;
        background-color: #000;
        border: 1.5px solid #fff;
        border-radius: 50%;
        pointer-events: none;
        z-index: 9999;
        transform: translate(-50%, -50%);
        transition: width 0.3s cubic-bezier(0.16, 1, 0.3, 1), 
                    height 0.3s cubic-bezier(0.16, 1, 0.3, 1),
                    background-color 0.3s ease,
                    border-radius 0.3s ease;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        will-change: transform;
    }
    #custom-cursor span {
        color: #000;
        font-family: 'Figtree', sans-serif;
        font-weight: 800;
        font-size: 1.1rem;
        opacity: 0;
        transform: translateY(10px);
        transition: opacity 0.2s ease, transform 0.2s ease;
        letter-spacing: 0.5px;
    }
    
    #custom-cursor.view-mode {
        width: 110px;
        height: 48px;
        background-color: #fff;
        border: none;
        border-radius: 9999px;
        mix-blend-mode: normal; /* Solid white background as requested */
    }
    #custom-cursor.view-mode span {
        opacity: 1;
        transform: translateY(0);
        transition-delay: 0.1s;
    }
}
@media (pointer: coarse) {
    #custom-cursor {
        display: none !important;
    }
}