#fake-cursor {
    position: fixed;
    top: 0; 
    left: 0;
    pointer-events: none;
    z-index: 999999;
    /* Smooth opacity transition for the interaction pause */
    transition: opacity 0.3s ease;
    filter: drop-shadow(1px 2px 2px rgba(0,0,0,0.4));
}

/* SHAPE 1: Professional Standard Arrow (Pointer) */
/* This creates a sharp, angled mouse cursor shape */
#fake-cursor.arrow {
    width: 18px;
    height: 24px;
    background-color: var(--cursor-color, white);
    /* The clip-path draws the traditional notched arrow */
    clip-path: polygon(0% 0%, 100% 70%, 50% 70%, 65% 100%, 35% 100%, 20% 70%, 0% 85%);
    /* Adding a thin border effect using a drop shadow trick */
    filter: drop-shadow(0px 0px 1px #000);
    transform: rotate(-15deg);
}

/* SHAPE 2: Realistic Hand Pointer */
/* This mimics the hand icon seen when hovering over links */
#fake-cursor.hand {
    width: 22px;
    height: 28px;
    background-color: var(--cursor-color, white);
    /* Detailed clip-path for thumb and fingers */
    clip-path: polygon(
        32% 35%, 32% 5%, 45% 0%, 58% 5%, 58% 30%, 
        70% 30%, 82% 35%, 82% 55%, 70% 60%, 
        70% 90%, 20% 90%, 15% 55%, 0% 45%, 15% 35%
    );
    filter: drop-shadow(0px 0px 1px #000);
}

/* SHAPE 3: Professional Focus Circle */
#fake-cursor.circle {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background-color: var(--cursor-color, rgba(255, 0, 0, 0.4));
    border: 2px solid white;
    box-shadow: 0 0 10px rgba(0,0,0,0.2);
    /* Pulsing effect to make the focus dot look alive */
    animation: acrs-pulse 2s infinite;
}

@keyframes acrs-pulse {
    0% { transform: scale(1); opacity: 0.8; }
    50% { transform: scale(1.1); opacity: 0.5; }
    100% { transform: scale(1); opacity: 0.8; }
}