:root {
    --cursor-size: 50px;
    --cursor-default: url("../assets/img/cursor.svg");
    --cursor-hover: url("../assets/img/cursor-hover.svg");
}

body.custom-cursor-enabled {
    cursor: none;
}

body.custom-cursor-enabled * {
    cursor: none !important;
}

.custom-cursor {
    position: fixed;
    left: 0;
    top: 0;
    width: var(--cursor-size);
    height: var(--cursor-size);

    background-image: var(--cursor-default);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;

    /* Center the cursor logic moved to JS for precision */

    pointer-events: none;
    z-index: 9999;
    opacity: 0;

    /* Performance optimizations */
    will-change: transform;
    /* Only transition opacity and background-image, NOT transform */
    transition: opacity 0.2s ease, background-image 0.15s ease;
}

.custom-cursor.is-visible {
    opacity: 1;
}

.custom-cursor.is-hover {
    background-image: var(--cursor-hover);
}

@media (prefers-reduced-motion: reduce) {
    .custom-cursor {
        transition: opacity 0.2s ease, background-image 0.15s ease;
    }
}