docs: record Night Shift redesign direction

docs/redesign/direction.md

@@ -0,0 +1,35 @@
+# Redesign direction: "Night Shift"
+
+## Intent (from Xeno)
+Take the already strong portfolio and make it award-worthy (Awwwards / FWA / CSSDA). No constraints on style or motion. Haiku discovery first, then brainstorming. Preserve all real content and links. Never merge or push.
+
+Assumptions: evolve rather than replace the identity. Xeno called the current site "very nice" and asked to "transform" it, so the night-drive world and the content stay. Fundamentals stay: speed, mobile, a11y, reduced motion, existing budgets and tests.
+
+## Alternatives considered
+1. **Editorial brutalism.** Giant type, no 3D, raw grid. Distinctive, but throws away the working scene engine, soundtrack and the identity Xeno likes. Rejected.
+2. **Control room / NOC.** Dashboard UI with live panels. Strong fit for a sysadmin but reads as a template (every dev "terminal" portfolio) and fights the cinematic road.
+3. **Night Shift (chosen).** Keep the drive; make the *person* legible inside it. Luca is the sysadmin running the infrastructure behind the screen, on the night shift. The road is the uptime line. The site gains a cinematic title sequence, a real-time operations layer (Bucharest clock, uptime counter, route telemetry), and kinetic editorial typography, so it reads as one authored film rather than a scene plus panels.
+
+## Concept
+"Night Shift": it is 3 a.m. in Bucharest, the systems are quiet because someone is watching them. The visitor rides along. Every chapter is a checkpoint with a status line.
+
+## Signature moments
+1. **Boot-to-drive intro.** A short, skippable boot log (kernel-style lines using real facts: hosts, services, "nextcloud: migrated, rollback ready") resolves into the hero. SSR content is already in the DOM, so it never blocks content, LCP or no-JS. Skipped for reduced motion and repeat visits.
+2. **Kinetic variable type.** Geist variable weight and tracking respond to pointer and scroll on the hero name and chapter titles. Zero extra font bytes.
+3. **Headlight cursor.** On fine pointers, a soft beam follows the cursor and brightens panel borders and text under it. Hidden for touch, reduced motion and forced colors.
+4. **Chapter numerals.** Oversized outlined section numbers (01 to 08) that drift via CSS scroll-driven animation. Progressive enhancement: static where `animation-timeline` is unsupported.
+5. **Operations strip.** A live Bucharest clock and uptime-since-career-start counter plus route position. Honest data only; no fake metrics.
+6. **Crafted project cards.** Pointer-tracked spotlight, depth tilt, magnetic CTA, staggered reveal on entry.
+7. **Grain + vignette.** A single cheap fixed overlay unifies scene and UI like film stock.
+
+## Engineering approach
+Additive layer, not a rewrite: `src/styles/nightshift.css` imported last, plus three small units (`useHeadlight`, `BootSequence.vue`, `OperationsStrip.vue`) wired in `AppShell.vue`. No new runtime dependencies. All motion gated through the existing `useMotionPreferences` policy. Existing tests keep passing; new unit tests cover the pure helpers.
+
+## Success criteria
+- Existing unit tests, typecheck and `build:preview` budgets still pass.
+- Desktop (1440) and mobile (390) look right in a real browser; no horizontal scroll.
+- Reduced motion shows the final state with no animation; keyboard focus stays visible.
+- Contrast of new text >= 4.5:1.
+
+## Pushed further later
+WebGL title-card shader, per-project cinematic case-study pages, rain-on-windshield transition between chapters, audio-reactive HUD, light "daybreak" theme at the end of the route.