.custom-cursor {
    width: 8px;
    height: 8px;
    background-color: #f8920b;
    border-radius: 50%;
    position: fixed;
    pointer-events: none;
    z-index: 9999;
    transform: translate(-50%, -50%);
    transition: width 0.2s, height 0.2s;
    animation: breathe 2s ease-in-out infinite;
    mix-blend-mode: difference;
}

/* Breathing animation */
@keyframes breathe {
    0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.5;
    }
    50% {
        transform: translate(-50%, -50%) scale(1.5);
        opacity: 1;
    }
    100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.5;
    }
}

/* Outer ring */
.cursor-ring {
    width: 40px;
    height: 40px;
    border: 2px solid #f8920b;  /* Increased thickness */
    border-radius: 50%;
    position: fixed;
    pointer-events: none;
    z-index: 9998;
    transform: translate(-50%, -50%);
    transition: all 0.15s ease-out;
    mix-blend-mode: difference;
}

/* Hover states */
.custom-cursor.hover {
    width: 12px;
    height: 12px;
    background-color: #fff;
}

.cursor-ring.hover {
    width: 50px;
    height: 50px;
    border-width: 3px;  /* Even thicker on hover */
}

@keyframes breatheHover {
    0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
    50% {
        transform: translate(-50%, -50%) scale(1.2);
        opacity: 0.8;
    }
    100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
}

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

/* Optional: Add subtle blur effect for more organic feel */
.custom-cursor {
    filter: blur(0.5px);
}