/* Custom Cursor Styles with fixed positioning */
body {
    cursor: none !important; /* Hide the default cursor */
}

/* Base cursor elements with proper positioning */
.cursor-dot, .cursor-ring, .cursor-ripple {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    pointer-events: none;
    will-change: transform;
    transform-origin: center center;
}

/* Main cursor dot */
.cursor-dot {
    width: 8px;
    height: 8px;
    margin-left: -4px;   /* Half of width */
    margin-top: -4px;    /* Half of height */
    background: linear-gradient(135deg, #5840BA, #4535a5);
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(88, 64, 186, 0.5);
    z-index: 10003;
    transition: width 0.15s ease, height 0.15s ease, background 0.2s ease, box-shadow 0.2s ease;
}

/* Outer ring of the cursor */
.cursor-ring {
    width: 40px;
    height: 40px;
    margin-left: -20px;  /* Half of width */
    margin-top: -20px;   /* Half of width */
    border: 2px solid rgba(88, 64, 186, 0.5);
    border-radius: 50%;
    z-index: 10002;
    transition: border 0.3s ease;
    /* Use custom properties for translation and scale */
    transform: translate(var(--ring-x, 0), var(--ring-y, 0)) scale(var(--ring-scale, 1));
}

/* Ripple effect for clicks */
.cursor-ripple {
    width: 40px;
    height: 40px;
    margin-left: -20px;
    margin-top: -20px;
    border-radius: 50%;
    border: 1px solid rgba(186, 255, 227, 0.8);
    transform: scale(0);
    opacity: 1;
    pointer-events: none;
    z-index: 9998;
    animation: ripple-effect 1s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

/* Interactive states with enhanced effects */
.cursor-hover.cursor-dot {
    width: 10px;
    height: 10px;
    margin-left: -5px;
    margin-top: -5px;
    background: linear-gradient(135deg, #BAFFE3, #85ffd0);
    box-shadow: 0 0 15px rgba(186, 255, 227, 0.7);
}

.cursor-hover.cursor-ring {
    width: 50px;
    height: 50px;
    margin-left: -25px;
    margin-top: -25px;
    border: 1px solid rgba(0, 255, 221, 0.5);
}

/* Active state (clicking) */
.cursor-active.cursor-dot {
    width: 6px;
    height: 6px;
    margin-left: -3px;
    margin-top: -3px;
    background: linear-gradient(135deg, #BAFFE3, #5840BA);
    box-shadow: 0 0 10px rgba(186, 255, 227, 0.9);
}

.cursor-active.cursor-ring {
    width: 30px;
    height: 30px;
    margin-left: -15px;
    margin-top: -15px;
    border-color: rgba(186, 255, 227, 0.7);
}

/* Idle breathing effect on the cursor ring; always active by default */
.cursor-idle {
    animation: ring-breathing 2s ease infinite;
}

@keyframes ring-breathing {
    0% {
        --ring-scale: 1;
        opacity: 1;
    }
    50% {
        --ring-scale: 1.05;
        opacity: 0.5;
    }
    100% {
        --ring-scale: 1;
        opacity: 1;
    }
}

/* Ripple animation */
@keyframes ripple-effect {
    0% {
        transform: scale(0);
        opacity: 1;
    }
    100% {
        transform: scale(4);
        opacity: 0;
    }
}

/* New styles to change color when inside dark backgrounds */
.cursor-cyan.cursor-dot {
    background: cyan;
    box-shadow: 0 0 10px cyan;
}

.cursor-cyan.cursor-ring {
    border-color: cyan;
}

/* Media Query to disable custom cursor on mobile devices */
@media (max-width: 1024px) {
    .cursor-dot, .cursor-ring, .cursor-ripple {
        display: none;
    }
    
    body {
        cursor: auto !important;
    }
}