/* Custom Cursor Styles *//* Theme variables for easy color changes */:root
{
    /* Base cursor color */
    --cursor-color: #314F2B;
    --cursor-color-hover: #3F6A36;
    --cursor-color-click: #4B7C40;

    /* RGBA helpers */
    --cursor-rgba-30: rgba(49, 79, 43, 0.30);
    --cursor-rgba-50: rgba(49, 79, 43, 0.50);
    --cursor-rgba-60: rgba(49, 79, 43, 0.60);
    --cursor-rgba-70: rgba(49, 79, 43, 0.70);
    --cursor-rgba-80: rgba(49, 79, 43, 0.80);
}

/* Hide default cursor */
body,
body * {
    cursor: none !important;
}

/* Main cursor dot */
.custom-cursor {
    position: fixed;
    width: 12px;
    height: 12px;
    background: var(--cursor-color);
    border-radius: 50%;
    pointer-events: none;
    z-index: 2147483647; /* Maximum z-index value */
    top: 0;
    left: 0;
    transform: translate(-50%, -50%);
    transition: transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94), background 0.2s ease, opacity 0.2s ease;
    box-shadow: 0 0 10px var(--cursor-rgba-30);
    will-change: transform, left, top; /* Optimize rendering */
    display: block;
}

/* Outer cursor ring */
.custom-cursor-ring {
    position: fixed;
    width: 40px;
    height: 40px;
    border: 2px solid var(--cursor-rgba-50);
    border-radius: 50%;
    pointer-events: none;
    z-index: 2147483646; /* Just below cursor dot */
    top: 0;
    left: 0;
    transform: translate(-50%, -50%);
    transition: width 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), height 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), border-color 0.3s ease, opacity 0.2s ease;
    will-change: transform, left, top; /* Optimize rendering */
    display: block;
}

/* Hover state - expand ring */
.custom-cursor-ring.hover {
    width: 70px;
    height: 70px;
    border-color: var(--cursor-rgba-70);
    border-width: 2.5px;
}

.custom-cursor.hover {
    background: var(--cursor-color-hover);
    transform: translate(-50%, -50%) scale(1.8);
    box-shadow: 0 0 20px var(--cursor-rgba-50);
}

/* Click state - shrink and pulse */
.custom-cursor.click {
    transform: translate(-50%, -50%) scale(0.6);
    background: var(--cursor-color-click);
}

.custom-cursor-ring.click {
    transform: translate(-50%, -50%) scale(0.9);
    border-color: var(--cursor-rgba-80);
}

/* Text selection state */
.custom-cursor.text {
    transform: translate(-50%, -50%) scale(0.8);
    background: var(--cursor-rgba-60);
}

/* Hidden state */
.custom-cursor.hidden,
.custom-cursor-ring.hidden {
    opacity: 0;
}

/* Click ripple effect */
.cursor-ripple {
    position: fixed;
    width: 20px;
    height: 20px;
    border: 2px solid var(--cursor-rgba-60);
    border-radius: 50%;
    pointer-events: none;
    z-index: 2147483645; /* Below ring */
    transform: translate(-50%, -50%);
    animation: rippleEffect 0.6s ease-out forwards;
    will-change: transform, width, height, opacity;
}

@keyframes rippleEffect {
    0% {
        width: 20px;
        height: 20px;
        opacity: 1;
        border-width: 2px;
    }

    100% {
        width: 80px;
        height: 80px;
        opacity: 0;
        border-width: 1px;
    }
}

/* Smooth glow pulse on hover */
@keyframes glowPulse {

    0,
    100% {
        box-shadow: 0 0 10px var(--cursor-rgba-30);
    }

    50% {
        box-shadow: 0 0 20px var(--cursor-rgba-60);
    }
}

.custom-cursor.hover {
    animation: glowPulse 2s ease-in-out infinite;
}

/* Magnetic effect hint */
.custom-cursor-ring.hover {
    animation: ringPulse 1.5s ease-in-out infinite;
}

@keyframes ringPulse {

    0,
    100% {
        transform: translate(-50%, -50%) scale(1);
    }

    50% {
        transform: translate(-50%, -50%) scale(1.05);
    }
}

/* Disable ONLY on actual touch devices (not small laptops) */
@media(hover: none) and(pointer: coarse) {

    body,
    body * {
        cursor: auto !important;
    }

    .custom-cursor,
    .custom-cursor-ring,
    .cursor-ripple {
        display: none !important;
    }
}

/* Ensure cursor is visible on all screen sizes for mouse devices */
@media(hover: hover) and(pointer: fine) {
    .custom-cursor,
    .custom-cursor-ring {
        display: block !important;
    }
}