/* ═══════════════════════════════════════════════════════════════ SEOKit — Custom Cursor cursor.css Applies only when .cursor-enabled is on ═══════════════════════════════════════════════════════════════ */ /* ── Hide native cursor when custom is active ───────────────── Only applied via JS when custom cursor is confirmed working */ .cursor-enabled * { cursor: none !important; } /* ── Cursor Elements ────────────────────────────────────────── */ .cursor-dot, .cursor-ring, .cursor-trail { position: fixed; top: 0; left: 0; pointer-events: none; z-index: var(--z-cursor); will-change: transform; } /* Core dot */ .cursor-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent-primary); box-shadow: 0 0 10px rgba(124, 108, 240, 0.8), 0 0 20px rgba(124, 108, 240, 0.4); transition: transform 0.08s ease, opacity 0.2s ease; transform: translate(-50%, -50%); mix-blend-mode: normal; } /* Ring around cursor */ .cursor-ring { width: 28px; height: 28px; border: 2px solid rgba(124, 108, 240, 0.5); border-radius: 50%; transition: width 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), height 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.2s ease, opacity 0.2s ease, box-shadow 0.2s ease; transform: translate(-50%, -50%); /* Slight lag behind cursor for elegant follow */ } /* Trail / glow */ .cursor-trail { width: 48px; height: 48px; border-radius: 50%; background: radial-gradient(circle, rgba(124,108,240,0.20) 0%, transparent 70%); transition: transform 0.15s ease, opacity 0.3s ease; transform: translate(-50%, -50%); } /* ── Hover state (clickable elements) ───────────────────────── */ .cursor-enabled:has(a:hover) .cursor-ring, .cursor-enabled:has(button:hover) .cursor-ring, .cursor-enabled:has([role="button"]:hover) .cursor-ring, .cursor-enabled:has(label:hover) .cursor-ring, .cursor-enabled:has(.cursor-hover:hover) .cursor-ring { width: 44px; height: 44px; border-color: var(--accent-primary); box-shadow: 0 0 16px rgba(124,108,240,0.35); } .cursor-enabled:has(a:hover) .cursor-dot, .cursor-enabled:has(button:hover) .cursor-dot, .cursor-enabled:has([role="button"]:hover) .cursor-dot, .cursor-enabled:has(label:hover) .cursor-dot { transform: translate(-50%, -50%) scale(1.5); box-shadow: 0 0 16px rgba(124,108,240,0.9), 0 0 32px rgba(124,108,240,0.5); } /* JS-driven hover class (applied in cursor.js) */ .cursor-is-hovering .cursor-ring { width: 44px; height: 44px; border-color: var(--accent-primary); box-shadow: 0 0 16px rgba(124,108,240,0.35); } .cursor-is-hovering .cursor-dot { transform: translate(-50%, -50%) scale(1.5); box-shadow: 0 0 16px rgba(124,108,240,0.9), 0 0 32px rgba(124,108,240,0.5); } /* Click state (JS-applied class) */ .cursor-clicking .cursor-dot { transform: translate(-50%, -50%) scale(0.7); box-shadow: 0 0 24px rgba(124,108,240,1.0), 0 0 48px rgba(124,108,240,0.6); } .cursor-clicking .cursor-ring { width: 52px; height: 52px; border-color: var(--accent-primary); opacity: 0.5; } /* Click pulse ring */ .cursor-click-pulse { position: fixed; width: 12px; height: 12px; border: 2px solid var(--accent-primary); border-radius: 50%; pointer-events: none; z-index: calc(var(--z-cursor) - 1); transform: translate(-50%, -50%); animation: cursorPulse 0.5s ease-out forwards; } @keyframes cursorPulse { 0% { transform: translate(-50%, -50%) scale(0.5); opacity: 0.8; } 100% { transform: translate(-50%, -50%) scale(3); opacity: 0; } } /* ── Input / text area cursor ────────────────────────────────── */ .cursor-enabled:has(input:hover) .cursor-dot, .cursor-enabled:has(textarea:hover) .cursor-dot, .cursor-enabled:has([contenteditable]:hover) .cursor-dot { width: 2px; height: 18px; border-radius: 1px; background: var(--accent-primary); transform: translate(-50%, -50%); } /* ── Dark mode cursor ────────────────────────────────────────── */ [data-theme="dark"] .cursor-dot { background: var(--accent-primary-light); box-shadow: 0 0 12px rgba(157, 146, 245, 0.9), 0 0 24px rgba(157, 146, 245, 0.5); } [data-theme="dark"] .cursor-ring { border-color: rgba(157, 146, 245, 0.5); } [data-theme="dark"] .cursor-trail { background: radial-gradient(circle, rgba(157,146,245,0.20) 0%, transparent 70%); } /* ── Cursor hidden state ─────────────────────────────────────── */ .cursor-hidden .cursor-dot, .cursor-hidden .cursor-ring, .cursor-hidden .cursor-trail { opacity: 0; }