/* ============================================================================ CUSTOM CURSOR A white arrow drawn in place of the native pointer, easing toward the true position instead of snapping to it. Nothing here applies until cursor.js has confirmed a fine pointer and put .cursor-on on . Touch devices and no-JS visitors keep the native cursor, which is the whole point of gating it in script rather than CSS. ========================================================================= */ /* Beats the `cursor: pointer` declarations in home.css / styles.css. */ .cursor-on, .cursor-on * { cursor: none !important; } /* Outer layer: position only. JS writes --cx/--cy every frame, so this element must never carry a transition — one would fight the rAF loop and stack a second, uncontrolled lag on top of the easing. */ .cursor { position: fixed; left: 0; top: 0; width: 19px; height: 21px; z-index: 2147483647; pointer-events: none; transform: translate3d(var(--cx, -60px), var(--cy, -60px), 0); will-change: transform; } /* Inner layer: scale + opacity, and the only thing that transitions. The tip of the arrow sits at (3px, 3px) in this box, so scaling about that point keeps the tip pinned to the pointer at any size. */ .cursor svg { display: block; width: 100%; height: 100%; transform-origin: 3px 3px; /* Drawn ~17x19px — deliberately under native pointer size. Larger and the white arrow reads as an object sitting on the page rather than a cursor. */ transform: scale(1); opacity: 0; /* Keeps the white arrow legible where it crosses a light photo. */ filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45)); transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.2s ease-out; will-change: transform, opacity; } /* Hidden until the pointer first moves, so the arrow never parks at 0,0 on load — and hidden again whenever the pointer leaves the window. */ .cursor.is-live svg { opacity: 1; } /* Over anything clickable: grow and soften. */ .cursor.is-live.is-over svg { transform: scale(1.15); opacity: 0.75; } /* The arrow still appears and still reacts to links; it just stops gliding (cursor.js drops the easing to zero) and stops springing. */ @media (prefers-reduced-motion: reduce) { .cursor svg { transition: opacity 0.2s ease-out; } }