Fix globe drag selection and add minimal orbit, zoom, pan, and spatial ambience

[kvnloo]

User problem

The homepage globe currently has two related interaction and presentation limitations.

1. Drag can select the pilot username chip

While dragging the Earth, the floating @username · CITY indicator can occasionally become text-selected. Once selection starts, the browser owns the gesture and globe rotation becomes unreliable or stops.

Current source at b57a99a5d569336a32422c5cb4490995adc3ac3c uses a dedicated circular drag hit surface and window-level pointer movement, but the username chip does not explicitly disable selection. The drag path also does not hold pointer capture or suppress selectstart for an active globe gesture.

2. The globe needs a minimal map-like control vocabulary and a more immersive spatial scene

Rotation is currently longitude-only. I want to inspect the world with a deliberately small interaction set:

• orbit in two axes;
• bounded zoom;
• bounded pan;
• reset/home;
• nothing resembling a full map toolbar.

The surrounding scene should feel deeper and more alive without competing with the homepage copy. Add restrained spatial ambience:

• a small distant Sun;
• a few stars;
• sparse asteroids/debris;
• a small number of “starcloud” data-center objects or orbital infrastructure;
• selected ambience may bleed outside the existing Earth canvas and sit behind hero text, but must preserve reading contrast and pointer behavior.

Product principle

Earth remains the hero; space is negative space with a few meaningful objects.

This should not become a particle field, game HUD, generic sci-fi wallpaper, or full GIS interface. It should retain Cribble's minimal, editorial hierarchy.

Proposed staged delivery

This issue is intentionally staged. Each phase should be independently reviewable and must not be collapsed into one large visual rewrite.

Phase A — Fix drag ownership and text selection

• Apply user-select: none to the globe interaction region and pilot chip while preserving normal selection in the hero copy.
• Prevent selectstart only during an active globe gesture.
• Use pointer capture on pointer-down and release it on pointer-up/cancel where supported.
• Preserve an active drag when the pointer crosses the pilot chip or leaves the circular hit area.
• Restore cursor and interaction state on pointerup, pointercancel, blur, unmount, and lost capture.
• Do not block links, text selection outside the globe, page scrolling, or assistive technology.

Acceptance:

• Repeated dragging through the pilot username never highlights text.
• Horizontal, vertical, and diagonal drag paths remain owned until release/cancel.
• Releasing outside the globe cannot leave a stuck grabbing cursor.
• Touch page scrolling remains available outside an intentional globe gesture.
• Regression tests cover selection, pointer capture/loss, chip crossing, cancellation, and cleanup.

Phase B — Minimal map-like controls

Pointer and touch grammar

• Primary drag: orbit longitude and latitude.
• Wheel / trackpad pinch: zoom.
• Two-finger drag on touch: pan.
• Desktop pan: modifier + drag (for example Shift+drag) or secondary drag; choose one after browser/input testing.
• Double click/tap or one minimal home button: reset to the authored hero framing.
• No visible +/-/compass toolbar unless accessibility testing demonstrates it is necessary. A small reset affordance is acceptable.

Bounds and feel

• Clamp latitude before the poles so the camera cannot flip.
• Use bounded zoom with an authored home value; prevent clipping through atmosphere, satellites, and geometry.
• Bound pan so Earth cannot be lost or parked over the primary copy/CTA.
• Direct manipulation should be 1:1 while held, with short restrained inertia only for orbit.
• Auto-spin pauses during interaction and resumes smoothly after a quiet delay.
• Preserve the current scroll choreography, feature-aware framing work, theme transition, offscreen parking, and reduced-motion behavior.
• Esc and reset/home restore the canonical composition.

Accessibility:

• Provide keyboard-accessible reset and compact instructions such as “drag to orbit · wheel/pinch to zoom · two fingers/Shift+drag to pan.”
• Do not trap wheel or touch scrolling when the gesture is not clearly operating the globe.
• Reduced motion disables autonomous motion and inertia, but keeps direct manipulation.

Acceptance:

• Orbit, zoom, pan, and reset work on mouse, trackpad, and touch without accidental page-scroll capture.
• Camera state stays finite and within declared bounds under adversarial wheel/pointer input.
• No pole flip, camera clipping, lost Earth, or stuck gesture state.
• Back/Forward and homepage scroll behavior remain unchanged.
• Controls remain minimal and do not add a persistent map toolbar.

Phase C — Minimal spatial ambience

Build ambience as a separate background layer or bounded extension seam rather than inflating the Earth renderer by default.

Distant Sun

• Small, off-axis, and visibly distant.
• Position should agree with the Earth's existing key-light/terminator direction.
• One restrained halo; no lens-flare stack or large blur shell.
• May sit outside the globe footprint and behind hero copy, but never reduce text/CTA contrast below WCAG AA.

Stars

• Sparse, deterministic, and depth-separated.
• Prefer one static texture, one CSS layer, or one instanced draw—not hundreds of DOM nodes.
• Parallax must be subtle and disabled by reduced motion.

Starcloud data centers / orbital infrastructure

• Add only a few recognizable silhouettes or nodes.
• They should communicate distributed AI infrastructure rather than decoration alone.
• Use bounded activity pulses; no private usage data or misleading real-time claims.
• Avoid visual similarity to the existing satellites unless hierarchy is clear.

Asteroids and debris

• Very sparse foreground/background objects with deterministic trajectories.
• Keep them away from copy, CTA, and globe controls.
• No collision gameplay, particle spray, or high-frequency motion.
• Objects bleeding behind text must be low-contrast and non-interactive.

Acceptance:

• Earth remains the strongest object in every sampled frame.
• Hero heading, body copy, and CTA remain readable across dark/light themes, desktop/mobile, and a full ambience cycle.
• Ambient layers use pointer-events: none and never interrupt globe gestures or links.
• Reduced motion yields a composed static scene, not an empty or broken one.
• Mobile may omit/degrade ambience according to an explicit quality budget.

Performance contract

Use the revision-bound Earth audit from task t_5545a9dc as reconnaissance, not a certifying baseline. The current implementation already caps Earth DPR at 1.5, uses resting scissor, merged/instanced geometry, and parks WebGL/CSS animation offscreen. Preserve those strengths.

Before/after gate on a quiet physical display:

• hardware renderer and exact Earth/backdrop drawing buffers proven;
• 100,000 presented frames for certifying desktop and target-mobile rows, or shorter rows explicitly labeled smoke;
• report average FPS, 0.001% low, median/p95/p99/p99.9/worst and >25/>50/>100 ms counts;
• no regression beyond 0.10 ms median, 0.25 ms p95, or 0.50 ms p99 for Phase A/B;
• no new attributable >50 ms frames;
• ambient Phase C gets a separately approved GPU/fill budget;
• no uncapped DPR3, additional full-screen blur shells, dense particles, per-frame React state, hundreds of DOM stars, or unbounded transparent overdraw;
• all WebGL and CSS loops park when offscreen/hidden;
• reduced-motion row has no autonomous ambient animation.

Visual evidence contract

For each phase, capture:

• desktop dark and light;
• mobile portrait;
• reduced motion;
• full Earth rotation;
• orbit/zoom/pan/reset interaction video;
• Sun/ambience positions at their brightest/closest text overlap;
• labels-hidden before/after visual comparison.

Reject any version where spectacle overtakes the Earth or copy.

Non-goals

• Full GIS/map navigation
• Search, geocoding, place labels, compass, or map layers
• Unbounded free camera
• Collision/gameplay systems
• Dense star/particle fields
• Live private token/activity visualization
• Replacing the current Earth renderer or scroll story
• Adding every requested visual object in the first PR