/* ═══════════════════════════════════════════════════════
   CUSTOM CURSOR — Shared Component (Landing + Dashboard)
   ═══════════════════════════════════════════════════════ */

/* Custom Cursor Ring */
.custom-cursor {
    width: 22px;
    height: 22px;
    border: 2.5px solid var(--primary-color, #6366f1);
    border-radius: 50%;
    position: fixed;
    pointer-events: none;
    z-index: 10001;
    transition: transform 0.15s ease, border-width 0.2s ease, background 0.2s ease;
    transform: translate(-50%, -50%);
    mix-blend-mode: normal;
    will-change: left, top;
}

/* Custom Cursor Dot */
.custom-cursor-dot {
    width: 5px;
    height: 5px;
    background: var(--primary-color, #6366f1);
    border-radius: 50%;
    position: fixed;
    pointer-events: none;
    z-index: 10002;
    transform: translate(-50%, -50%);
    will-change: left, top;
}

/* Hide custom cursor on touch/mobile */
@media (hover: none) {
    .custom-cursor, .custom-cursor-dot { display: none !important; }
}

/* Click expansion */
body:active .custom-cursor {
    transform: translate(-50%, -50%) scale(1.5);
    background: rgba(99, 102, 241, 0.1);
}

/* Hide original cursor — ONLY on pages with the custom cursor elements.
   body.has-custom-cursor is set by script.js when #customCursor exists */
@media (pointer: fine) {
    body.has-custom-cursor,
    body.has-custom-cursor a,
    body.has-custom-cursor button,
    body.has-custom-cursor [role="button"] {
        cursor: auto;
    }
}

/* Dynamic Cursor Theme Sync */
body.dark-mode .custom-cursor { border-color: #a78bfa; }
body.light-mode .custom-cursor { border-color: #4f46e5; }

body.dark-mode .custom-cursor-dot { background: #ffffff; }
body.light-mode .custom-cursor-dot { background: #4f46e5; }