/* ==========================================================================
   LAYERS — Custom Cursor
   Premium minimalist cursor with mix-blend-mode difference
   ========================================================================== */

/* Hide default cursor globally (only on devices with precise pointer) */
@media (pointer: fine) {

    *,
    *::before,
    *::after {
        cursor: none !important;
    }
}

#cursor-dot,
#cursor-ring {
    position: fixed;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 99999;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    will-change: transform;
}

/* The sharp center dot */
#cursor-dot {
    width: 6px;
    height: 6px;
    background-color: #ffffff;
    mix-blend-mode: difference;
    transition: width 0.2s ease, height 0.2s ease, opacity 0.2s ease;
}

/* The lagging outer ring */
#cursor-ring {
    width: 32px;
    height: 32px;
    border: 1px solid rgba(255, 255, 255, 0.7);
    mix-blend-mode: difference;
    transition: width 0.35s cubic-bezier(0.16, 1, 0.3, 1),
        height 0.35s cubic-bezier(0.16, 1, 0.3, 1),
        border-color 0.35s ease,
        opacity 0.2s ease;
}

/* Hover state — ring expands, dot vanishes into it */
body.cursor-hover #cursor-ring {
    width: 56px;
    height: 56px;
    border-color: rgba(255, 255, 255, 0.9);
}

body.cursor-hover #cursor-dot {
    width: 4px;
    height: 4px;
    opacity: 0.5;
}

/* Text input state — hide custom, show native */
body.cursor-text #cursor-dot,
body.cursor-text #cursor-ring {
    opacity: 0;
}

/* Clicked state — brief pulse */
body.cursor-click #cursor-ring {
    width: 24px;
    height: 24px;
    transition: width 0.1s ease, height 0.1s ease;
}

/* Hide entirely when mouse leaves window */
body.cursor-out #cursor-dot,
body.cursor-out #cursor-ring {
    opacity: 0;
}