/* ============ SITE CURSOR — one shared tier (cursor.css + cursor.js) ============ EXACTLY three cursors site-wide, as tokens on :root: --cursor-default the custom default: native cursor hidden (cursor:none) + the JS ring/dot ornament (extracted verbatim from the Intro/Work scenes, now global; transform-only, one rAF, touch devices run nothing) --cursor-pointer the custom hand (cursor-hand.png, 32px export of uploads/Pointer.svg, hotspot 12 5 = the measured index fingertip; @2x asset exported as cursor-hand@2x.png; keyword `pointer` fallback so a failed load never leaves users cursorless) on every interactive element --cursor-text the standard I-beam on text inputs / editable fields cursor.js sets .curfine on for any fine-pointer device (hand + I-beam rules apply, reduced-motion included) and .curon additionally when the ring/dot ornament runs (non-RM only, matching the original Intro/Work behavior — RM keeps native default). While the hand or I-beam shows, the ornament fades out (the "swap"). All rules are !important so this tier owns cursor truth over any page rule; page-level cursor declarations remain only as no-JS/asset-failure fallbacks. Loaded from Nav's helmet, so every page carries it. Keep hotspot + selectors in sync with cursor.js. The default cursor is the FRIENDLY FACE: the ring is a #FF6666-filled circle (token --color-cursor-fill, decoration only, never a text colour) with the site-black 1.5px outline, same 44px size; the old inner dot is a minimal face group (two dot eyes, a small nose, an upward smile curve, all #242424) that inherits the dot's exact motion architecture — it shifts subtly with cursor velocity so the face "looks" where the user is going, settling softly back to center at rest. Transform-only, one rAF, touch devices run nothing. */ :root{--cursor-default:none;--cursor-pointer:url("cursor-hand.png") 12 5,pointer;--cursor-text:text;--color-cursor-fill:#FF6666} @media (hover:hover) and (pointer:fine){ /* 1 — custom default everywhere (ornament pages only) */ :root.curon,:root.curon *{cursor:var(--cursor-default,none)!important} /* 2 — custom hand on interactive elements (and their children; the blanket rule above would otherwise out-cascade inheritance). One page-structure exception rides along: About's clickable open book (.dv.on .dvbk), a div-level click target. */ :root.curfine :is(a,button,select,summary,label,[role="button"],[role="link"],[role="tab"],[role="menuitem"],[tabindex]:not([tabindex="-1"]),.hot,.tcard:not(.foc),[data-cursor="pointer"]), :root.curfine :is(a,button,select,summary,label,[role="button"],[role="link"],[role="tab"],[role="menuitem"],[tabindex]:not([tabindex="-1"]),.hot,.tcard:not(.foc),[data-cursor="pointer"]) *, :root.curfine .dv.on .dvbk,:root.curfine .dv.on .dvbk *{cursor:var(--cursor-pointer)!important} /* 3 — I-beam on text-editing surfaces (after the hand rule: a field inside a label wins) */ :root.curfine :is(input:not([type]),input[type="text"],input[type="email"],input[type="search"],input[type="tel"],input[type="url"],input[type="number"],input[type="password"],textarea,[contenteditable="true"],[contenteditable=""]), :root.curfine :is(textarea,[contenteditable="true"],[contenteditable=""]) *{cursor:var(--cursor-text,text)!important} /* About reading mode: the book is no longer a click target — back to the custom default. */ :root.curfine .rdon .dv.on .dvbk,:root.curfine .rdon .dv.on .dvbk *{cursor:var(--cursor-default,none)!important} } /* ---- The ring/face ornament (geometry/timing from the Intro/Work build; the ring gained the --color-cursor-fill fill and the dot became the face group — same sizes, same motion channels: ring lerps at .12, the face leads by clamped velocity) ---- */ .sc-cring{position:fixed;top:0;left:0;width:44px;height:44px;margin:-22px 0 0 -22px;background:var(--color-cursor-fill,#FF6666);border:1.5px solid #242424;border-radius:50%;pointer-events:none;z-index:2147482700;opacity:0;transition:width .6s var(--ease,cubic-bezier(.45,.05,.55,.95)),height .6s var(--ease,cubic-bezier(.45,.05,.55,.95)),margin .6s var(--ease,cubic-bezier(.45,.05,.55,.95)),border-width .6s var(--ease,cubic-bezier(.45,.05,.55,.95)),opacity .5s var(--ease,cubic-bezier(.45,.05,.55,.95))} .sc-cdot{position:fixed;top:0;left:0;width:24px;height:24px;margin:-12px 0 0 -12px;pointer-events:none;z-index:2147482700;opacity:0;transition:opacity .5s var(--ease,cubic-bezier(.45,.05,.55,.95))} .sc-cdot svg{display:block;width:100%;height:100%} .sc-cring.live,.sc-cdot.live{opacity:1} /* Page transitions run on SNAPSHOTS: the ornament is a live-view accessory, never part of the landscape, so it stands down whenever any transition attribute is up (same rule the Intro/Work scenes used via .gliding, now generic across registers). */ :root[data-vtmode] .sc-cring,:root[data-vtmode] .sc-cdot,:root[data-pgvt] .sc-cring,:root[data-pgvt] .sc-cdot,:root[data-pgleave] .sc-cring,:root[data-pgleave] .sc-cdot,:root[data-pgsweep] .sc-cring,:root[data-pgsweep] .sc-cdot{opacity:0}