@media (pointer: fine) {
    body.custom-cursor-active,
    body.custom-cursor-active * {
        cursor: none;
    }

    .custom-cursor {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        pointer-events: none;
        z-index: 99999;
    }

    .custom-cursor-dot {
        position: fixed;
        top: 0;
        left: 0;
        width: 6px;
        height: 6px;
        background-color: var(--accent-cyan);
        border-radius: 50%;
        pointer-events: none;
        z-index: 100000;
        transform: translate3d(var(--x, 0px), var(--y, 0px), 0) translate(-50%, -50%);
        opacity: 0;
        box-shadow: 0 0 8px var(--accent-cyan);
        transition: opacity 0.3s ease, width 0.25s ease, height 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease;
    }

    .custom-cursor-ring {
        position: fixed;
        top: 0;
        left: 0;
        width: 44px;
        height: 44px;
        clip-path: polygon(50% 15.7%, 90% 85%, 10% 85%);
        backdrop-filter: blur(3.5px);
        -webkit-backdrop-filter: blur(3.5px);
        pointer-events: none;
        z-index: 99999;
        transform: translate3d(var(--x, 0px), var(--y, 0px), 0) translate(-50%, -62%) scale(calc(1 + var(--bass-val, 0) * 0.3)) rotate(var(--rotation, 0deg));
        transform-origin: 50% 62%;
        opacity: 0;
        transition: 
            opacity 0.3s ease, 
            width 0.35s cubic-bezier(0.25, 1, 0.5, 1), 
            height 0.35s cubic-bezier(0.25, 1, 0.5, 1);
    }

    .cursor-triangle-svg {
        width: 100%;
        height: 100%;
        display: block;
    }

    .cursor-triangle-svg polygon {
        fill: rgba(10, 12, 28, 0.22);
        stroke: rgba(0, 242, 254, 0.45);
        stroke-width: 3.5;
        stroke-linejoin: round;
        filter: drop-shadow(0 0 5px rgba(0, 242, 254, 0.25));
        transition: 
            fill 0.35s ease, 
            stroke 0.35s ease, 
            filter 0.35s ease;
    }

    .custom-cursor.visible .custom-cursor-dot,
    .custom-cursor.visible .custom-cursor-ring {
        opacity: 1;
    }

    .custom-cursor.hovered .custom-cursor-dot {
        width: 4px;
        height: 4px;
        background-color: var(--accent-pink);
        box-shadow: 0 0 8px var(--accent-pink);
    }

    .custom-cursor.hovered .custom-cursor-ring {
        width: 60px;
        height: 60px;
    }

    .custom-cursor.hovered .cursor-triangle-svg polygon {
        fill: rgba(219, 0, 255, 0.08);
        stroke: rgba(219, 0, 255, 0.65);
        filter: drop-shadow(0 0 10px rgba(219, 0, 255, 0.4));
    }

    .custom-cursor.clicking .custom-cursor-dot {
        transform: translate3d(var(--x, 0px), var(--y, 0px), 0) translate(-50%, -50%) scale(0.6);
        background-color: #fff;
        box-shadow: 0 0 10px #fff;
    }

    .custom-cursor.clicking .custom-cursor-ring {
        width: 30px;
        height: 30px;
        transform: translate3d(var(--x, 0px), var(--y, 0px), 0) translate(-50%, -62%) scale(calc(0.72 + var(--bass-val, 0) * 0.18)) rotate(var(--rotation, 0deg));
    }

    .custom-cursor.clicking .cursor-triangle-svg polygon {
        fill: rgba(0, 242, 254, 0.25);
        stroke: rgba(0, 242, 254, 0.85);
        filter: drop-shadow(0 0 12px rgba(0, 242, 254, 0.55));
    }
}