/* CUSTOM ARROW CURSOR A flowing arrow that trails the mouse and rotates toward its direction of travel. Position + rotation are applied as ONE transform on a single GPU-promoted layer (no per-frame repaint), so it stays smooth even over the blurred background. Mouse / trackpad only — cursor.js adds .rkx-cursor-active to . */ html.rkx-cursor-active, html.rkx-cursor-active * { cursor: none !important; } #rkx-cursor { position: fixed; top: 0; left: 0; width: 0; height: 0; pointer-events: none; z-index: 2147483647; opacity: 0; transition: opacity 260ms ease; transform-origin: 0 0; /* rotate around the arrow tip (the anchor point) */ will-change: transform; /* transform (translate3d + rotate) is set by cursor.js every frame */ } #rkx-cursor.is-active { opacity: 1; } #rkx-cursor svg { position: absolute; left: -15px; /* puts the arrow tip exactly on the anchor (0,0) */ top: -1px; width: 30px; height: 30px; max-width: none; /* page reset sets svg{max-width:100%} — parent is 0-wide by design */ display: block; } /* Touch / coarse-pointer devices: never show the custom cursor */ @media ( hover: none ), ( pointer: coarse ) { #rkx-cursor { display: none !important; } }