@media (pointer: fine) {
    *, *::before, *::after {
        cursor: none !important;
    }

    #customCursor {
        opacity: 0;

        width: 28px;
        height: 28px;
        
        border: 2px solid #00ffcc;
        border-radius: 50%;
        position: fixed;
        top: 0;
        left: 0;
        pointer-events: none;
        z-index: 9999;
        box-shadow: 0 0 10px rgba(0, 255, 204, 0.4);
        transform-origin: center center;
        will-change: transform, width, height, background-color, opacity;
        
        transition: 
            background-color 0.25s ease, 
            opacity 0.3s ease; 
        
        display: block;
    }

    #customCursor.is-hover {
        background-color: rgba(0, 255, 204, 0.15); /* 泛光維持 */
        
        animation: pulsePop 0.45s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
    }
}

@keyframes pulsePop {
    0% {
        width: 28px;
        height: 28px;
    }
    15% {
        width: 20px;
        height: 20px;
    }
    60% {
        width: 40px;
        height: 40px;
    }
    100% {
        width: 35px;
        height: 35px;
    }
}

@media (pointer: coarse) {
    *, *::before, *::after {
        cursor: auto !important;
    }
    #customCursor {
        display: none !important;
    }
}