/* ========================================================================= Custom cursor -- desktop, pointer-fine devices only. Disabled entirely on touch via JS (adds .syka-no-cursor to ). ========================================================================= */ .syka-cursor { position: fixed; top: 0; left: 0; z-index: 10001; pointer-events: none; transform: translate(-50%, -50%); opacity: 0; transition: opacity 0.3s ease; } body:not(.syka-no-cursor) .syka-cursor { opacity: 1; } .syka-cursor__dot { position: absolute; top: 0; left: 0; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: var(--syka-text); transition: background 0.25s ease, transform 0.15s ease; } .syka-cursor__ring { position: absolute; top: 0; left: 0; width: 36px; height: 36px; margin: -18px 0 0 -18px; border-radius: 50%; border: 1px solid var(--syka-border-strong); transition: width 0.3s cubic-bezier(0.16, 1, 0.3, 1), height 0.3s cubic-bezier(0.16, 1, 0.3, 1), margin 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease, background 0.3s ease; } .syka-cursor__label { position: absolute; top: 0; left: 0; transform: translate(-50%, -50%); font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; letter-spacing: 0.08em; color: var(--syka-bg); opacity: 0; transition: opacity 0.25s ease; } .syka-cursor.is-hover .syka-cursor__ring { width: 60px; height: 60px; margin: -30px 0 0 -30px; border-color: var(--syka-accent); background: var(--syka-accent-soft); } .syka-cursor.is-hover .syka-cursor__dot { transform: scale(0); } .syka-cursor.is-view .syka-cursor__ring { width: 84px; height: 84px; margin: -42px 0 0 -42px; background: var(--syka-accent); border-color: var(--syka-accent); } .syka-cursor.is-view .syka-cursor__label { opacity: 1; } .syka-cursor.is-view .syka-cursor__dot { transform: scale(0); } .syka-no-cursor .syka-cursor { display: none; } .syka-no-cursor, .syka-no-cursor * { cursor: auto !important; } @media (prefers-reduced-motion: reduce) { .syka-cursor { display: none; } }