/*
 * KP Cursor v6 — circular custom cursor inspired by 375.studio
 * Always-on rotating "KHARY" badge (no default-vs-hover state distinction).
 * Per Khary 2026-05-03: he wants the rotating-name circle as the DEFAULT,
 * always visible, not gated to hover.
 *
 * Customize per element via data-cursor="WORD" (e.g. data-cursor="READ").
 */

.kp-cursor {
    position: fixed;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 2147483647;
    /* Always 80px circle with rotating text -- this is the only state. */
    width: 80px;
    height: 80px;
    border-radius: 50%;
    /* Brand amber + mix-blend-mode: difference. Same approach as 375.studio.
       Inverts the cursor color against the page backdrop so content stays
       readable through the cursor. */
    background-color: #D4812A;
    transform: translate3d(-50%, -50%, 0);
    transition:
        background-color 0.3s ease,
        opacity 0.3s ease;
    will-change: transform;
    mix-blend-mode: difference;
    opacity: 0;
}

/* Visible: full opacity (mix-blend-mode handles legibility). */
.kp-cursor.is-visible {
    opacity: 1;
}

/* Hide over text inputs so the native caret can be seen. */
.kp-cursor.is-text {
    opacity: 0;
}

/* Inner layout: SVG circular text. ALWAYS visible (no opacity gating). */
.kp-cursor-inner {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    opacity: 1;
}

.kp-cursor-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    animation: kp-cursor-spin 12s linear infinite;
    transform-origin: center;
}

.kp-cursor-svg text {
    /* White text -- under mix-blend-mode: difference on the parent .kp-cursor,
       white inverts to whatever is the inverse of the page bg. On dark bg
       (most of Khary's hero areas), this reads as near-white. On cream, it
       reads as near-black. Always legible. */
    fill: #FFFFFF;
    font-family: 'Source Sans 3', system-ui, sans-serif;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

@keyframes kp-cursor-spin {
    to { transform: rotate(360deg); }
}

/* Hide custom cursor on touch devices and small viewports */
@media (hover: none) and (pointer: coarse) {
    .kp-cursor { display: none; }
}

@media (max-width: 768px) {
    .kp-cursor { display: none; }
}

/* Respect reduced motion: kill rotation, soften size transition */
@media (prefers-reduced-motion: reduce) {
    .kp-cursor-svg { animation: none; }
    .kp-cursor {
        transition:
            width 0.2s linear,
            height 0.2s linear,
            background-color 0.2s linear;
    }
}

/* Hide the native OS cursor everywhere on desktop so only our custom
   inverted cursor is visible. Inputs/textareas keep the native caret so
   users can still type. Touch devices skip this whole block via @media. */
@media (hover: hover) and (pointer: fine) and (min-width: 769px) {
    html, body, a, button, * {
        cursor: none;
    }
    input,
    textarea,
    [contenteditable="true"] {
        cursor: text;
    }
}

/* Hide the legacy cursor system from kp-dark-design-system.css. Those rules
   define .cursor-ring / .cursor-dot / .cursor-ghost / .kp-cursor-preview --
   a separate older custom cursor that's still rendering DOM elements alongside
   our v6+ kp-cursor. Display:none here neutralizes the visual conflict
   without touching the design-system CSS. */
.cursor-ring,
.cursor-dot,
.cursor-ghost,
.kp-cursor-preview {
    display: none !important;
}