/* ============================================================ Arun.Design custom cursor ============================================================ Single-element right-pointing triangle. Spring-lag follow with distance-based elastic stretch that re-aligns to the direction of movement every frame (js/custom-cursor.js). Hovering any clickable element grows the triangle. Reference feel: basement.studio's cursor. One
rendered via clip-path; the RAF loop applies rotate + non-uniform scale to it. mix-blend-mode: difference makes the white triangle read on both the day and night hero videos and on light / dark card surfaces without any per-page colour wiring. ============================================================ */ .custom-cursor__ring-wrap { position: fixed; top: 0; left: 0; pointer-events: none; z-index: 13000; mix-blend-mode: difference; will-change: transform; width: 0; height: 0; transform: translate3d(-100px, -100px, 0); /* parked off-screen until first pointermove */ } .custom-cursor__ring { position: absolute; top: 0; left: 0; width: 20px; height: 20px; margin: -10px 0 0 -10px; /* centre on the wrapper's translated point */ background: #fff; clip-path: polygon(0% 0%, 100% 50%, 0% 100%); /* ► right-pointing triangle */ box-sizing: border-box; transition: width 320ms cubic-bezier(0.34, 1.56, 0.64, 1), height 320ms cubic-bezier(0.34, 1.56, 0.64, 1), margin 320ms cubic-bezier(0.34, 1.56, 0.64, 1); will-change: transform; } .custom-cursor__ring.is-hovering { width: 46px; height: 46px; margin: -23px 0 0 -23px; } .custom-cursor__arrow { display: none; } /* Hidden state — toggled by JS when the game modal is open, the tab is hidden, the pointer is over an iframe, or has left the window. */ body.cursor-hidden .custom-cursor__ring-wrap { opacity: 0; transition: opacity 180ms ease; } /* Hide the native cursor everywhere once the custom one has mounted (JS adds `has-custom-cursor` to ). Keep the text I-beam over editable fields so typing targets stay obvious. */ html.has-custom-cursor, html.has-custom-cursor * { cursor: none !important; } html.has-custom-cursor input:not([type=button]):not([type=submit]):not([type=checkbox]):not([type=radio]), html.has-custom-cursor textarea, html.has-custom-cursor [contenteditable=true] { cursor: text !important; } /* Reduced motion — no hover-grow transition. JS also skips the elastic rotate/scale in the RAF loop. */ @media (prefers-reduced-motion: reduce) { .custom-cursor__ring { transition: none; } } /* Touch / coarse pointer — never render. JS self-bails too; this is the belt to that pair of braces. */ @media (hover: none), (pointer: coarse) { .custom-cursor__ring-wrap { display: none !important; } }