/* ========================================================================== CUSTOM CURSOR Two-part registration-mark cursor: a small solid dot (the "plate") and a hollow ring that trails behind it (the "impression"), echoing the way a printed color separation sits a hair off true until it's registered. Desktop / fine-pointer only — touch devices keep their native cursor. ========================================================================== */ /* Only hidden once js/core/cursor.js confirms the replacement is actually running (data-cursor-ready) — if GSAP fails to load, the native cursor stays put instead of leaving the visitor with no cursor at all. */ html[data-cursor-ready="true"] body, html[data-cursor-ready="true"] a, html[data-cursor-ready="true"] button, html[data-cursor-ready="true"] [role="button"] { cursor: none; } .cursor-dot, .cursor-ring { position: fixed; top: 0; left: 0; pointer-events: none; z-index: var(--z-cursor); border-radius: 50%; transform: translate(-50%, -50%); will-change: transform; } .cursor-dot { width: 8px; height: 8px; background: var(--cp-orange); } .cursor-ring { width: 40px; height: 40px; border: 1.5px solid var(--cp-ink); opacity: 0.35; display: flex; align-items: center; justify-content: center; transition: width var(--dur-fast) var(--ease-out-expo), height var(--dur-fast) var(--ease-out-expo), opacity var(--dur-fast) var(--ease-out-expo), background-color var(--dur-fast) var(--ease-out-expo), border-color var(--dur-fast) var(--ease-out-expo); } .cursor-ring__label { font-family: var(--font-body); font-size: 0.6rem; font-weight: 700; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--cp-ink); opacity: 0; transition: opacity var(--dur-fast) ease; } /* States toggled by js/core/cursor.js via data-cursor-state on */ html[data-cursor-state="link"] .cursor-ring { width: 64px; height: 64px; opacity: 0.5; } html[data-cursor-state="view"] .cursor-ring, html[data-cursor-state="play"] .cursor-ring { width: 88px; height: 88px; background: var(--cream-100); opacity: 1; border-color: transparent; box-shadow: var(--shadow-md); } html[data-cursor-state="view"] .cursor-ring__label, html[data-cursor-state="play"] .cursor-ring__label { opacity: 1; } @media (hover: none), (pointer: coarse) { .cursor-dot, .cursor-ring { display: none; } } @media (prefers-reduced-motion: reduce) { .cursor-dot, .cursor-ring { display: none; } body, a, button { cursor: auto !important; } }