/* ========================================================================== Cursor portrait A real photograph of the designer, trailing the pointer. Rules it obeys: - never intercepts a click (pointer-events: none, always) - only on devices with a precise pointer - never animates under prefers-reduced-motion; it becomes a static badge - it *reacts* to interactive targets, so it doubles as a hit indicator ========================================================================== */ /* Prominent where the portrait is the subject — home and the worlds — and restrained everywhere else, where it should read as a recurring motif rather than compete with the content. Set by the router on . */ :root { --cursor-size: 52px; } body[data-cursor-scope="feature"] { --cursor-size: 96px; } .cursor { position: fixed; left: 0; top: 0; z-index: var(--z-cursor); width: var(--size, var(--cursor-size)); height: var(--size, var(--cursor-size)); margin: calc(var(--size, var(--cursor-size)) / -2); transition: width var(--dur-m) var(--ease-out), height var(--dur-m) var(--ease-out), margin var(--dur-m) var(--ease-out), opacity var(--dur-m) var(--ease-out); pointer-events: none; opacity: 0; transform: translate3d(var(--x, 50vw), var(--y, 50vh), 0) rotate(var(--rot, 0deg)) scale(var(--scale, 1)); will-change: transform; } .cursor[data-visible="true"] { opacity: 1; } .cursor__img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; box-shadow: 0 10px 34px -12px rgba(12, 16, 22, .5); } /* The caption only exists when the pointer is over something that acts. */ @font-face { font-family: "OrticaLinear-Light"; src: url("/assets/fonts/OrticaLinear-Light.otf") format("opentype"); font-weight: 300; } .cursor__caption { position: absolute; left: 50%; top: calc(100% + .55rem); transform: translateX(-50%) translateY(.35rem); white-space: nowrap; color: #ffffff; opacity: 0; transition: opacity var(--dur-s) var(--ease-out), transform var(--dur-s) var(--ease-out); font-family: OrticaLinear-Light; font-weight: 300; font-size: .8125rem; letter-spacing: -.01em; } .cursor[data-caption="true"] .cursor__caption { opacity: 1; transform: translateX(-50%); } /* Static fallback: reduced motion, or coarse pointers. Same asset, no chase. */ .portrait-badge { position: fixed; right: var(--gutter); bottom: 1.5rem; z-index: var(--z-chrome); width: 52px; height: 52px; border-radius: 50%; overflow: hidden; box-shadow: 0 8px 26px -12px rgba(12, 16, 22, .5); } .portrait-badge img { width: 100%; height: 100%; object-fit: cover; } body[data-pointer="fine"] .portrait-badge { display: none; } body[data-pointer="coarse"] .cursor { display: none; } body[data-reduced-motion="true"] .cursor { display: none; } body[data-reduced-motion="true"] .portrait-badge { display: block; }