/* ─── cursor.css ──────────────────────────────────────────────────────────── Custom cursor (dot + trailing ring) and micro-interaction styles. Activated only on fine-pointer, non-reduced-motion devices by js/cursor.js, which adds .has-custom-cursor to . Touch devices keep the native cursor. ───────────────────────────────────────────────────────────────────────── */ .has-custom-cursor, .has-custom-cursor * { cursor: none !important; } .cursor-dot, .cursor-ring { position: fixed; top: 0; left: 0; z-index: 10000; pointer-events: none; border-radius: 50%; will-change: transform; } .cursor-dot { width: 6px; height: 6px; margin: -3px 0 0 -3px; background: #ff9d41; } .cursor-ring { width: 34px; height: 34px; margin: -17px 0 0 -17px; border: 1.5px solid rgba(255, 157, 65, 0.55); transition: width 0.28s cubic-bezier(0.19, 1, 0.22, 1), height 0.28s cubic-bezier(0.19, 1, 0.22, 1), margin 0.28s cubic-bezier(0.19, 1, 0.22, 1), background-color 0.28s ease, border-color 0.28s ease; } /* Hovering an interactive element → ring grows and fills faintly */ .cursor-hover .cursor-ring { width: 56px; height: 56px; margin: -28px 0 0 -28px; background: rgba(255, 157, 65, 0.08); border-color: #ff9d41; } /* Pressing → ring contracts */ .cursor-down .cursor-ring { width: 24px; height: 24px; margin: -12px 0 0 -12px; } @media (hover: none), (pointer: coarse) { .cursor-dot, .cursor-ring { display: none; } } @media (prefers-reduced-motion: reduce) { .cursor-ring { transition: none; } }