/* Immediate aiming dot, soft ring follow, and an arrow on actionable targets. */ .site-cursor { position: fixed; inset: 0; z-index: 100; pointer-events: none; opacity: 0; transition: opacity 120ms; } .site-cursor[data-visible="true"] { opacity: 1; } .site-cursor-ring, .site-cursor-dot { position: absolute; top: 0; left: 0; will-change: transform; } .site-cursor-orbit { width: 36px; height: 36px; margin: -18px; display: grid; place-items: center; border: 1px solid #dbead0a6; border-radius: 50%; color: #162310; transition: transform 260ms cubic-bezier(0.2, 0.8, 0.2, 1), background-color 220ms, border-color 220ms; } .site-cursor-orbit svg { opacity: 0; transform: translate(-3px, 3px) scale(0.75); transition: opacity 160ms, transform 240ms cubic-bezier(0.2, 0.8, 0.2, 1); } .site-cursor-dot span { display: block; width: 4px; height: 4px; margin: -2px; border-radius: 50%; background: #f0f6eb; box-shadow: 0 0 1px #081006; transition: opacity 140ms, transform 160ms; } .site-cursor[data-mode="link"] .site-cursor-orbit { transform: scale(1.45); border-color: #b4e78a; background: #b4e78af2; } .site-cursor[data-mode="link"] .site-cursor-orbit svg { opacity: 1; transform: translate(0, 0) scale(0.8); } .site-cursor[data-mode="link"] .site-cursor-dot span { opacity: 0; } .site-cursor[data-pressed="true"] .site-cursor-orbit { transform: scale(0.85); } .site-cursor[data-mode="link"][data-pressed="true"] .site-cursor-orbit { transform: scale(1.2); } @media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) { html.has-site-cursor, html.has-site-cursor * { cursor: none !important; } } @media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) { .site-cursor { display: none; } }