/* Hide the default system cursor only when the ghost cursor is active */
.ghost-cursor-active,
.ghost-cursor-active body,
.ghost-cursor-active a,
.ghost-cursor-active button {
    cursor: none;
}

#ghost-cursor {
    position: fixed;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 9999;
    transition: transform 0.1s ease-out, opacity 0.2s ease;
}

.ghost-svg {
    width: 32px;
    height: 32px;
    transform-origin: center;
    transition: transform 0.2s ease;
    animation: idle-float 2s ease-in-out infinite;
}

#ghost-cursor.pointer .ghost-svg {
    transform: scale(1.2);
}

#ghost-cursor.clicking .ghost-svg {
    transform: scale(0.8) translateY(2px);
    animation-play-state: paused;
}

#ghost-cursor.idle .ghost-svg {
    animation: idle-wander 8s ease-in-out infinite, idle-float 2s ease-in-out infinite;
}

.ghost-body {
    fill: var(--text-color);
    transition: fill 0.3s ease;
}

.ghost-eyes-open {
    fill: var(--bg-color);
    transition: fill 0.3s ease;
}

.ghost-eyes-blinking {
    fill: var(--bg-color);
    animation: blink 2.5s infinite;
    transform-origin: center;
    transition: fill 0.3s ease;
}

@keyframes idle-float {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-3px);
    }
}

@keyframes idle-wander {
    0% { transform: translate(0, 0) rotate(0deg) scale(1); }
    15% { transform: translate(15px, -10px) rotate(5deg) scale(1.1); }
    30% { transform: translate(-20px, 15px) rotate(-8deg) scale(0.95); }
    45% { transform: translate(25px, 20px) rotate(10deg) scale(1); }
    60% { transform: translate(-10px, -15px) rotate(-5deg) scale(1.05); }
    75% { transform: translate(10px, 10px) rotate(3deg) scale(0.9); }
    100% { transform: translate(0, 0) rotate(0deg) scale(1); }
}

@keyframes blink {
    0%, 95%, 100% {
        transform: scaleY(1);
    }
    97.5% {
        transform: scaleY(0.1);
    }
}