/* ========================================================= Custom cursor Requires base.css cursor.js adds .has-custom-cursor to only on devices with a real pointing device. Touch, coarse pointers and reduced-motion keep the system cursor untouched. ========================================================= */ .cursor-dot, .cursor-ring { display: none; } .has-custom-cursor, .has-custom-cursor a, .has-custom-cursor button, .has-custom-cursor [role="button"] { cursor: none; } /* The gate sits above everything; its own cursor rules still apply. */ .has-custom-cursor .cursor-dot, .has-custom-cursor .cursor-ring { display: block; position: fixed; top: 0; left: 0; z-index: 90; pointer-events: none; border-radius: 50%; will-change: transform; } /* Exact pointer position — never lags, so clicks always feel accurate. */ .cursor-dot { width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; background: var(--grad-mark); box-shadow: 0 2px 8px rgba(29, 78, 216, 0.45); transition: opacity 200ms var(--ease), transform 200ms var(--ease); } /* Trails slightly behind, which is what gives the glass feel. */ .cursor-ring { width: 34px; height: 34px; margin: -17px 0 0 -17px; border: 1px solid rgba(37, 99, 235, 0.34); background: rgba(239, 246, 255, 0.24); backdrop-filter: blur(1.5px); -webkit-backdrop-filter: blur(1.5px); transition: width 220ms var(--ease), height 220ms var(--ease), margin 220ms var(--ease), opacity 220ms var(--ease), background 220ms var(--ease), border-color 220ms var(--ease); } /* Over something clickable the ring opens up and the dot tucks away. */ .has-custom-cursor.cursor-active .cursor-ring { width: 56px; height: 56px; margin: -28px 0 0 -28px; border-color: rgba(37, 99, 235, 0.5); background: rgba(219, 235, 255, 0.32); } .has-custom-cursor.cursor-active .cursor-dot { opacity: 0; transform: scale(0.4); } .has-custom-cursor.cursor-down .cursor-ring { width: 26px; height: 26px; margin: -13px 0 0 -13px; background: rgba(37, 99, 235, 0.2); } /* Off-window, or over text the visitor may want to select. */ .has-custom-cursor.cursor-hidden .cursor-dot, .has-custom-cursor.cursor-hidden .cursor-ring { opacity: 0; } @media (prefers-reduced-motion: reduce) { .cursor-ring { transition: none; } }