/* ══════════════════════════════════════════════════════════════ Keln — custom cursor (cursor.css) Activated only when cursor.js mounts the custom cursor (adds .keln-cursor to ). Touch/coarse-pointer/reduced-motion devices are never activated — native cursors stay untouched. Z-index: 9998 — below toasts (9999) per the established ladder in shortcuts.css / ascend.css. Above everything else. Elements that need native cursors can add class .keln-cursor-native. ══════════════════════════════════════════════════════════════ */ /* Hide native cursor globally when ours is active */ html.keln-cursor, html.keln-cursor * { cursor: none !important; } /* Opt-out escape hatch — any element can restore native cursor */ html.keln-cursor .keln-cursor-native, html.keln-cursor .keln-cursor-native * { cursor: auto !important; } /* ── Cursor layers ──────────────────────────────────────────── */ .kc-core, .kc-ring { position: fixed; top: 0; left: 0; pointer-events: none; /* never intercept hit-testing */ border-radius: 50%; transform: translate(-50%, -50%); will-change: transform; z-index: 9998; transition: opacity .18s ease; } /* Core — small luminous dot */ .kc-core { width: 6px; height: 6px; background: #ffffff; box-shadow: 0 0 6px 1px rgba(91, 140, 255, .7); transition: opacity .18s ease, transform .06s ease, background .18s ease; } /* Ring — trailing eased follower */ .kc-ring { width: 32px; height: 32px; border: 1.5px solid rgba(91, 140, 255, .55); background: rgba(91, 140, 255, .04); transition: opacity .18s ease, width .22s cubic-bezier(.4,0,.2,1), height .22s cubic-bezier(.4,0,.2,1), border-color .22s ease, background .22s ease; } /* ── States ─────────────────────────────────────────────────── */ /* Hover over interactive elements */ html.keln-cursor.kc--hover .kc-ring { width: 46px; height: 46px; border-color: rgba(34, 211, 166, .72); background: rgba(34, 211, 166, .06); } html.keln-cursor.kc--hover .kc-core { background: rgba(34, 211, 166, .9); box-shadow: 0 0 8px 2px rgba(34, 211, 166, .55); } /* Active / pressed */ html.keln-cursor.kc--active .kc-ring { width: 20px; height: 20px; border-color: rgba(34, 211, 166, .9); transition: width .08s cubic-bezier(.4,0,.2,1), height .08s cubic-bezier(.4,0,.2,1), border-color .08s ease; } html.keln-cursor.kc--active .kc-core { transform: translate(-50%, -50%) scale(0.6); } /* Text input — thin caret look */ html.keln-cursor.kc--text .kc-ring { width: 2px; height: 22px; border-radius: 1px; border-color: rgba(91, 140, 255, .8); background: rgba(91, 140, 255, .2); transition: width .12s ease, height .12s ease, border-radius .12s ease; } html.keln-cursor.kc--text .kc-core { opacity: 0; } /* Window-leave fade */ html.keln-cursor.kc--hidden .kc-core, html.keln-cursor.kc--hidden .kc-ring { opacity: 0; }