/* Workhorse Cuberto-style Cursor - Clean and Performant */

/* Main cursor container - fixed positioning */
.mf-cursor {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 250;
    direction: ltr;
    contain: layout style size;
    pointer-events: none;
    transition: opacity 0.3s;
    color: rgba(255, 255, 255, 0.9); /* Default white for glassmorphic */
}

/* Cursor dot - larger glassmorphic default */
.mf-cursor:before {
    content: "";
    position: absolute;
    top: -24px;
    left: -24px;
    display: block;
    width: 48px;
    height: 48px;
    transform: scale(0.8); /* Larger default size */
    background: rgba(255, 255, 255, 0.15); /* Glassmorphic background */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.3);
    transition: transform 0.25s ease-in-out, opacity 0.1s, background 0.3s ease, backdrop-filter 0.3s ease;
}

/* Cursor States - Workhorse Yellow Theme */

/* Inverse color for dark backgrounds */
.mf-cursor.-inverse {
    color: #fff;
}

/* Exclusion blend mode for creative effects */
.mf-cursor.-exclusion {
    mix-blend-mode: exclusion;
}

.mf-cursor.-exclusion:before {
    background: #fff;
}

/* Pointer state - yellow with no glassmorphic effect */
.mf-cursor.-pointer:before {
    transform: scale(0.7);
    background: var(--color-workhorse-yellow);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 1px solid rgba(var(--color-workhorse-yellow-rgb), 0.8);
    box-shadow: 0 0 12px rgba(var(--color-workhorse-yellow-rgb), 0.3);
}

/* Text selection state - larger yellow */
.mf-cursor.-text:before {
    opacity: 0.9;
    transform: scale(1.7);
    background: var(--color-workhorse-yellow);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 1px solid rgba(var(--color-workhorse-yellow-rgb), 0.9);
    box-shadow: 0 0 20px rgba(var(--color-workhorse-yellow-rgb), 0.4);
}

.mf-cursor.-text.-active:before {
    transform: scale(1.6);
    transition-duration: 0.2s;
}

/* Icon hover state - yellow background */
.mf-cursor.-icon:before {
    transform: scale(1.5);
    background: var(--color-workhorse-yellow);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 1px solid rgba(var(--color-workhorse-yellow-rgb), 0.9);
    box-shadow: 0 0 16px rgba(var(--color-workhorse-yellow-rgb), 0.4);
}

.mf-cursor.-icon.-active:before {
    transform: scale(1.4);
}

/* Hidden state */
.mf-cursor.-hidden:before {
    transform: scale(0);
}

/* Cursor Text Element - WHITE text on glassmorphic default, BLACK on yellow hover */
.mf-cursor-text {
    position: absolute;
    top: -18px;
    left: -18px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: scale(0) rotate(10deg);
    opacity: 0;
    color: rgba(255, 255, 255, 0.9); /* White for default glassmorphic */
    font-size: 16px;
    font-weight: var(--weight-semibold);
    line-height: 20px;
    text-align: center;
    transition: opacity 0.4s, transform 0.3s, color 0.3s;
}

.mf-cursor.-text .mf-cursor-text,
.mf-cursor.-icon .mf-cursor-text {
    opacity: 1;
    transform: scale(1);
}

/* BLACK text/icons only on yellow hover states */
.mf-cursor.-pointer .mf-cursor-text,
.mf-cursor.-link .mf-cursor-text,
.mf-cursor.-button .mf-cursor-text,
.mf-cursor.-icon .mf-cursor-text {
    color: #000 !important; /* Black text on yellow background */
}

/* Default WHITE icons on glassmorphic */
.mf-cursor svg {
    stroke: rgba(255, 255, 255, 0.9) !important;
    fill: none !important;
    stroke-width: 2px !important;
    width: 16px !important;
    height: 16px !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
    transition: stroke 0.3s ease;
}

/* BLACK icons only on yellow hover states */
.mf-cursor.-pointer svg,
.mf-cursor.-link svg,
.mf-cursor.-button svg,
.mf-cursor.-icon svg {
    stroke: #000 !important;
}

/* Link hover with yellow background */
.mf-cursor.-link:before {
    background: var(--color-workhorse-yellow);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 1px solid rgba(var(--color-workhorse-yellow-rgb), 0.9);
    box-shadow: 0 0 16px rgba(var(--color-workhorse-yellow-rgb), 0.3);
    transform: scale(1.2);
}

/* Button hover state - enhanced yellow */
.mf-cursor.-button:before {
    transform: scale(1.3);
    background: var(--color-workhorse-yellow);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 1px solid rgba(var(--color-workhorse-yellow-rgb), 0.9);
    box-shadow: 0 0 24px rgba(var(--color-workhorse-yellow-rgb), 0.5);
}

/* Gallery image hover - subtle yellow */
.mf-cursor.-gallery:before {
    transform: scale(1.0);
    background: rgba(var(--color-workhorse-yellow-rgb), 0.9);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border: 1px solid var(--color-workhorse-yellow);
    box-shadow: 0 0 20px rgba(var(--color-workhorse-yellow-rgb), 0.4);
}

/* Performance optimizations */
.mf-cursor,
.mf-cursor:before,
.mf-cursor-text {
    will-change: transform, opacity;
    backface-visibility: hidden;
    transform-style: preserve-3d;
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .mf-cursor,
    .mf-cursor:before,
    .mf-cursor-text {
        transition: none !important;
    }
    
    .mf-cursor:before {
        transform: scale(0.3) !important;
    }
}

/* Hide on touch devices */
@media (hover: none), (pointer: coarse) {
    .mf-cursor {
        display: none !important;
    }
}