:root {
    --cursor-size: 48px;
    /* Increased size */
    --cursor-hover-size: 75px;
    /* Larger on hover */
    --cursor-theme: #0d9721;
    --cursor-color: rgba(13, 151, 33, 0.15);
    /* Slightly lighter for better glass effect */
    --cursor-border: rgba(13, 151, 33, 0.5);
    --cursor-hover-color: #ffffff;
    /* White to enable pure inversion */
    --cursor-glow: rgba(13, 151, 33, 0.2);
    --cursor-hover-glow: rgba(255, 255, 255, 0);
    --cursor-transition-duration: 250ms;
    --cursor-transition-easing: cubic-bezier(0.25, 1, 0.5, 1);
}

@media (pointer: fine) and (hover: hover) {
    /* We are NO LONGER hiding the default cursor per user request! */

    .custom-cursor {
        position: fixed;
        top: 0;
        left: 0;
        width: var(--cursor-size);
        height: var(--cursor-size);
        border-radius: 50%;
        background-color: var(--cursor-color);
        border: 1px solid var(--cursor-border);
        pointer-events: none;
        z-index: 9999999;
        /* Start with translate3d and center adjustment */
        transform: translate3d(0, 0, 0) translate(-50%, -50%);

        /* Stronger glassmorphism effect */
        backdrop-filter: blur(1px);
        -webkit-backdrop-filter: blur(1px);
        box-shadow: 0 4px 15px var(--cursor-glow), inset 0 0 10px rgba(255, 255, 255, 0.2);

        transition: width var(--cursor-transition-duration) var(--cursor-transition-easing),
            height var(--cursor-transition-duration) var(--cursor-transition-easing),
            background-color var(--cursor-transition-duration) var(--cursor-transition-easing),
            border-color var(--cursor-transition-duration) var(--cursor-transition-easing),
            box-shadow var(--cursor-transition-duration) var(--cursor-transition-easing),
            opacity var(--cursor-transition-duration) var(--cursor-transition-easing);
        will-change: transform, width, height, opacity;
        opacity: 0;
        /* Hidden initially, shown on mouse move */
    }

    .custom-cursor.is-active {
        opacity: 1;
    }

    .custom-cursor.is-hovering {
        width: var(--cursor-hover-size);
        height: var(--cursor-hover-size);
        background-color: var(--cursor-hover-color);
        border-color: transparent;
        /* mix-blend-mode difference with white background perfectly inverts whatever is behind it */
        mix-blend-mode: difference;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        box-shadow: none;
    }
}

/* Respect user preferences for reduced motion or non-hover devices */
@media (prefers-reduced-motion: reduce),
(pointer: coarse) {
    .custom-cursor {
        display: none !important;
    }
}