.anim-cursor {
    --cur-ty: -50%;
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--anim-cursor-size, 1.4rem);
    height: var(--anim-cursor-size, 1.4rem);
    z-index: var(--anim-cursor-z, 50);
    opacity: 0;
    pointer-events: none;
    filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.35));
    transform: translate(-50%, var(--cur-ty)) scale(0.9);
    transition: opacity 0.3s ease,
                top 1.1s cubic-bezier(0.4, 0, 0.2, 1),
                left 1.1s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.15s ease;
}

.anim-cursor svg {
    width: 100%;
    height: 100%;
}

/* default (pointer) shows the arrow; touch mode shows the hand. Display lives
   on the specific classes (not `.anim-cursor svg`) so specificity is correct. */
.anim-cursor-arrow {
    display: block;
}

.anim-cursor-hand {
    display: none;
}

/* touch (finger/hand) mode: used for taps on phone UIs */
.anim-cursor.is-touch {
    --cur-ty: -8%; /* fingertip (near the SVG top) sits at the target point */
    --anim-cursor-size: 1.9rem;
}

.anim-cursor.is-touch .anim-cursor-arrow {
    display: none;
}

.anim-cursor.is-touch .anim-cursor-hand {
    display: block;
}

.anim-cursor.visible {
    opacity: 1;
    transform: translate(-50%, var(--cur-ty)) scale(1);
}

.anim-cursor.pressed {
    transform: translate(-50%, var(--cur-ty)) scale(0.78);
}

@media (prefers-reduced-motion: reduce) {
    .anim-cursor {
        display: none;
        transition: none;
    }
}