/* ============================================================ TerminalCursor — the site cursor. Static rules only; every per-frame value is written inline by TerminalCursor.tsx or cursor.js. Keyframes live here because inline styles cannot declare them. ============================================================ */ /* Native cursor suppression. Applied to only while the custom cursor is actually mounted and active, and removed on unmount — a coarse pointer or an unmounted component must never leave the user without a pointer. `*` + !important is deliberate: anchors, buttons and inputs all set their own `cursor`, and a root-level rule alone loses to every one of them. The (pointer: fine) guard is a fail-safe: the JS already only adds cl-cursor- active when pointer: fine, but if JS fails the native cursor is restored. */ @media (pointer: fine) { html.cl-cursor-active, html.cl-cursor-active * { cursor: none !important; } } .cl-cursor-root { position: fixed; inset: 0; z-index: 2147483000; pointer-events: none; } /* The node that tracks the pointer. Position is written as a transform so it stays on the compositor. */ .cl-cursor { position: absolute; top: 0; left: 0; opacity: 0; will-change: transform; } .cl-cursor[data-visible='true'] { opacity: 1; } /* The island curve — the same easing NavIsland docks on, so the pointer feels like it belongs to the same system. Short enough to read as weight, not lag. */ .cl-cursor--eased { transition: transform 0.18s cubic-bezier(0.25, 1, 0.5, 1); } /* --- The mark itself --------------------------------------------------- */ .cl-cursor__mark { position: absolute; transform: translate(-50%, -50%); transition: width 0.18s cubic-bezier(0.25, 1, 0.5, 1), height 0.18s cubic-bezier(0.25, 1, 0.5, 1), background 0.18s ease, border-color 0.18s ease; } /* Rest: hairline square, hollow, with a center dot. */ .cl-cursor__mark[data-mode='idle'] { width: 20px; height: 20px; border: 1px solid var(--accent-orange, #ff6600); background: transparent; } .cl-cursor__dot { position: absolute; top: 50%; left: 50%; width: 3px; height: 3px; transform: translate(-50%, -50%); background: var(--accent-orange, #ff6600); opacity: 1; transition: opacity 0.18s ease; } /* Interactive: the square collapses onto its own dot. */ .cl-cursor__mark[data-mode='interactive'] { width: 8px; height: 8px; border: 1px solid transparent; background: var(--accent-orange, #ff6600); } .cl-cursor__mark[data-mode='interactive'] .cl-cursor__dot { opacity: 0; } /* Text: the VT323 block caret. Proportioned to the body scale's cap height rather than a fixed square, so it reads as a caret sitting in the line. */ .cl-cursor__mark[data-mode='text'] { width: 9px; height: 20px; border: 1px solid transparent; background: var(--accent-orange, #ff6600); animation: cl-cursor-blink 1s steps(1) infinite; } .cl-cursor__mark[data-mode='text'] .cl-cursor__dot { opacity: 0; } @keyframes cl-cursor-blink { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } } /* --- Coordinate readout ------------------------------------------------ */ .cl-cursor__readout { position: absolute; left: 16px; top: 12px; white-space: nowrap; font-family: var(--font-body, 'Space Mono', 'Courier New', monospace); font-size: var(--text-2xs, 10px); letter-spacing: 0.5px; color: var(--accent-orange, #ff6600); } /* --- Lock-on brackets --------------------------------------------------- */ /* No transition anywhere on the frame: the snap has to be instant so it reads as lock-on. Easing this is what makes it feel like drift. */ .cl-cursor-frame { position: absolute; top: 0; left: 0; display: none; will-change: transform; } .cl-cursor-frame[data-visible='true'] { display: block; } .cl-cursor-frame span { position: absolute; width: 8px; height: 8px; border: 1px solid var(--accent-orange, #ff6600); } .cl-cursor-frame span:nth-child(1) { top: -1px; left: -1px; border-right: 0; border-bottom: 0; } .cl-cursor-frame span:nth-child(2) { top: -1px; right: -1px; border-left: 0; border-bottom: 0; } .cl-cursor-frame span:nth-child(3) { bottom: -1px; left: -1px; border-right: 0; border-top: 0; } .cl-cursor-frame span:nth-child(4) { bottom: -1px; right: -1px; border-left: 0; border-top: 0; } /* The blink is decoration on a decoration; reduced motion drops it. Easing is removed in JS (the class is never applied) rather than here, because the transition also carries the mark's size change. */ @media (prefers-reduced-motion: reduce) { .cl-cursor__mark[data-mode='text'] { animation: none; opacity: 1; } .cl-cursor__mark, .cl-cursor__dot { transition: none; } }