/* Only hide the default cursor on devices that support hover (desktop mice) */
@media (hover: hover) and (pointer: fine) {
    /* Hide default cursor only after our custom cursor is confirmed loaded via JS */
    body.custom-cursor-active-5c171110, 
    body.custom-cursor-active-5c171110 a, 
    body.custom-cursor-active-5c171110 button, 
    body.custom-cursor-active-5c171110 input, 
    body.custom-cursor-active-5c171110 select, 
    body.custom-cursor-active-5c171110 textarea {
        cursor: none !important;
    }

    .custom-cursor-wrapper-5c171110 {
        position: fixed;
        top: 0;
        left: 0;
        pointer-events: none; /* Let clicks pass through */
        z-index: 999999;
        /* Mix blend mode for the negative effect */
        mix-blend-mode: difference;
        opacity: 0; /* Hidden by default until JS confirms mouse movement */
        transition: opacity 0.3s ease;
    }

    /* Show cursor once JS is active and mouse moves */
    body.custom-cursor-active-5c171110 .custom-cursor-wrapper-5c171110.has-moved {
        opacity: 1;
    }

    .custom-cursor-dot-5c171110,
    .custom-cursor-ring-5c171110 {
        position: absolute;
        top: 0;
        left: 0;
        border-radius: 50%;
        will-change: transform;
    }

    .custom-cursor-dot-5c171110 {
        width: 8px;
        height: 8px;
        /* Using a bright orange that stands out but works with difference blending */
        background-color: #ff6600; 
        /* When difference blending is active, orange (#ff6600) over white becomes a bright blue.
           Over black it stays orange. This creates the sophisticated negative effect without 
           disappearing. */
        transition: width 0.3s ease, height 0.3s ease, background-color 0.3s ease;
    }

    .custom-cursor-ring-5c171110 {
        width: 32px;
        height: 32px;
        border: 1px solid rgba(255, 102, 0, 0.6);
        transition: width 0.3s ease, height 0.3s ease, border-color 0.3s ease;
    }

    /* Hover effect classes applied via JS */
    .custom-cursor-wrapper-5c171110.is-hovering .custom-cursor-dot-5c171110 {
        width: 24px; /* Doubled size for stronger effect */
        height: 24px;
        background-color: #ffffff; /* White creates a true negative with mix-blend-mode: difference */
    }

    .custom-cursor-wrapper-5c171110.is-hovering .custom-cursor-ring-5c171110 {
        width: 48px;
        height: 48px;
        border-color: rgba(255, 255, 255, 0.8); /* White ring for true negative */
    }

    /* Respect reduced motion preferences */
    @media (prefers-reduced-motion: reduce) {
        .custom-cursor-dot-5c171110,
        .custom-cursor-ring-5c171110 {
            transition: none !important;
        }
        /* Optionally disable the trailing ring effect entirely for reduced motion */
        .custom-cursor-ring-5c171110 {
            display: none;
        }
    }
}

/* On touch devices, ensure the custom cursor is hidden completely */
@media (hover: none) and (pointer: coarse) {
    .custom-cursor-wrapper-5c171110 {
        display: none !important;
    }
}