/* ─────────── CUSTOM CURSOR ─────────── *
   Cartographic crosshair, oxblood accent.
   Active only on hover-capable devices (desktop with pointer).
   ────────────────────────────────────────────────────── */

@media (hover: hover) and (pointer: fine) {
    /* Hide system cursor on body and interactive children;
       use the custom cursor instead. */
    html, body { cursor: none; }
    a, button, input, textarea, select, [role="button"] { cursor: none; }

    /* Inner dot — tracks exactly */
    .mm-cursor-dot {
        position: fixed;
        top: 0; left: 0;
        width: 6px; height: 6px;
        background: var(--accent);
        border-radius: 50%;
        pointer-events: none;
        z-index: 99999;
        transform: translate3d(-50%, -50%, 0);
        transition: opacity 0.2s, transform 0.15s ease-out, background 0.2s;
        will-change: transform, opacity;
        mix-blend-mode: normal;
    }

    /* Outer ring — lerps with lag */
    .mm-cursor-ring {
        position: fixed;
        top: 0; left: 0;
        width: 32px; height: 32px;
        border: 1px solid var(--ink);
        border-radius: 50%;
        pointer-events: none;
        z-index: 99998;
        transform: translate3d(-50%, -50%, 0);
        transition: width 0.25s cubic-bezier(0.2, 1, 0.3, 1),
                    height 0.25s cubic-bezier(0.2, 1, 0.3, 1),
                    border-color 0.25s,
                    border-width 0.25s,
                    background 0.25s,
                    color 0.25s,
                    opacity 0.2s,
                    border-radius 0.25s;
        will-change: transform;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: var(--font-mono);
        font-size: 9px;
        letter-spacing: 0.16em;
        text-transform: uppercase;
        color: transparent;
        font-weight: 500;
    }

    /* Crosshair tick marks on the ring */
    .mm-cursor-ring::before,
    .mm-cursor-ring::after {
        content: "";
        position: absolute;
        background: var(--ink);
        opacity: 0.55;
        transition: background 0.25s, opacity 0.25s;
    }
    .mm-cursor-ring::before {
        width: 1px; height: 5px;
        top: -6px; left: 50%; transform: translateX(-50%);
    }
    .mm-cursor-ring::after {
        width: 5px; height: 1px;
        top: 50%; right: -6px; transform: translateY(-50%);
    }

    /* Hidden state (mouse left the window) */
    .mm-cursor-dot.hidden,
    .mm-cursor-ring.hidden {
        opacity: 0;
    }

    /* ── State: link / button — small translucent ring, text stays readable ── */
    .mm-cursor-ring.is-link {
        background: rgba(127, 29, 29, 0.18); /* oxblood @ low alpha */
        border-color: var(--accent);
        border-width: 1px;
        width: 22px; height: 22px;
        mix-blend-mode: multiply;
    }
    .mm-cursor-ring.is-link::before,
    .mm-cursor-ring.is-link::after {
        background: var(--accent);
        opacity: 0.85;
    }
    .mm-cursor-dot.is-link {
        opacity: 0.7;
    }

    /* Dark mode tweak — multiply doesn't work on dark, use screen */
    html[data-theme="dark"] .mm-cursor-ring.is-link {
        background: rgba(127, 29, 29, 0.32);
        mix-blend-mode: screen;
    }

    /* ── State: hovering an image / figure / map — expands w/ ZOOM ── */
    .mm-cursor-ring.is-zoom {
        width: 72px; height: 72px;
        background: rgba(20, 19, 26, 0.78);
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
        border-color: transparent;
        color: var(--paper);
    }
    .mm-cursor-ring.is-zoom::before,
    .mm-cursor-ring.is-zoom::after { opacity: 0; }
    .mm-cursor-dot.is-zoom { opacity: 0; }

    /* ── State: hovering a heading — ring becomes a tiny editorial caret ── */
    .mm-cursor-ring.is-text {
        width: 4px; height: 24px;
        border-radius: 0;
        border-width: 0;
        background: var(--accent);
    }
    .mm-cursor-ring.is-text::before,
    .mm-cursor-ring.is-text::after { opacity: 0; }
    .mm-cursor-dot.is-text { opacity: 0; }

    /* ── State: clicking — quick pinch ── */
    .mm-cursor-ring.is-down {
        transform: translate3d(-50%, -50%, 0) scale(0.78);
    }

    /* Dark mode: keep visible against dark paper */
    html[data-theme="dark"] .mm-cursor-ring {
        border-color: var(--ink);
    }
    html[data-theme="dark"] .mm-cursor-ring::before,
    html[data-theme="dark"] .mm-cursor-ring::after {
        background: var(--ink);
    }
}

/* On coarse-pointer / no-hover devices: do nothing. Native cursor stays. */
@media (hover: none), (pointer: coarse) {
    .mm-cursor-dot, .mm-cursor-ring { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
    .mm-cursor-ring { transition: opacity 0.2s, background 0.2s, border-color 0.2s; }
}