docs: define portfolio nightdrive redesign

2026-09-02 13:25:05 +03:00
parent 90137c388c
commit 3f0ad9a15e
1 changed files with 619 additions and 0 deletions
--- a/docs/superpowers/specs/2026-09-02-portfolio-nightdrive-redesign-design.md
+++ b/docs/superpowers/specs/2026-09-02-portfolio-nightdrive-redesign-design.md
@@ -0,0 +1,619 @@
 # Portfolio Nightdrive Redesign Specification
 **Status:** Approved visual direction, pending written specification review  
 **Date:** 2026-09-02  
 **Branch:** `codex/portfolio-nightdrive-redesign`  
 **Worktree:** `/home/luca/Documents/Portfolio/.worktrees/portfolio-nightdrive-redesign`  
 **Product:** Pre-rendered single-page portfolio with progressive Vue enhancement and an optional Three.js night-drive world
 ## 1. Purpose
 Transform the current technically functional visual alpha into a polished, memorable portfolio for hiring managers and technical interviewers. The experience remains a native-scrolling professional document, while the persistent Three.js world supplies personality through an original retro-futuristic chase drive.
 The redesign must approach the spatial richness and motion quality of The Gallery's Nightdrive Records implementation without copying its branding, writing, recording, or proprietary-looking assets. The portfolio adds systems that the reference does not provide: an original chase-view grand tourer, readable section signs, chapter progression, a professional information layer, a responsive infrastructure diagram, authentic project media, and an original procedural soundtrack.
 This specification refines the approved 2026-09-01 journey architecture. It does not reopen deployment, release signing, supply-chain, Search Console, advanced SEO, or final certification work.
 ## 2. Design read and dials
 Reading this as an overhaul of a developer and systems portfolio for hiring managers, using a cinematic retro-futuristic night-drive world with a restrained professional information layer.
 - `DESIGN_VARIANCE: 8`
 - `MOTION_INTENSITY: 8`
 - `VISUAL_DENSITY: 4`
 - Page theme: dark only, locked across the full document
 - Information accent: cyan only
 - Environmental light colors: magenta and amber, not reused as competing interface accents
 - Shape rule: 12px surfaces and popovers, 10px interactive controls, square brand marks where their official artwork requires it
 The selected layout model is the **immersive chase corridor**. The car remains a stable lower-center anchor. Road, terrain, atmosphere, signs, and chapter lighting move around it. Information occupies deliberately composed left, right, or centered corridors while preserving sightlines to the horizon and vehicle.
 ## 3. Current-state audit
 ### 3.1 Foundations to retain
 - Vue 3, Vite, TypeScript, pre-rendered semantic HTML, and progressive enhancement.
 - Canonical section IDs, native anchors, and no router.
 - Complete content without WebGL, audio, hydration, or JavaScript.
 - Keyboard navigation, visible focus, reduced-motion handling, Static mode, print view, and no-JavaScript reading path.
 - Scene lifecycle states, abort and generation guards, context-loss handling, deterministic teardown, and the `SceneResourceBag`.
 - Adaptive quality, GPU accounting, deferred Three.js loading, and existing failure-injection seams.
 - Audio lifecycle, explicit activation, interruption handling, mute, volume, and teardown.
 - Manifest-bound project media, lazy media behavior, accessible video, and the asset-sanitization pipeline.
 - Existing content schemas and privacy names unless a visual requirement needs a typed extension.
 ### 3.2 Visual systems to replace
 - Flat terrain planes with no meaningful vertex displacement.
 - A simple slab road with isolated geometry markers and weak material response.
 - A flat circle sun without controlled scan bands, halo depth, or horizon integration.
 - Sparse scene depth and a minimal vignette-only post pass.
 - A box-derived car with an unreadable silhouette.
 - Section signs mapped directly to document distance.
 - Alternating generic bordered panels that repeat one layout family throughout the page.
 - Inter and system monospace defaults, section-number labels, all-caps headings, decorative dots, and repeated technical-container styling.
 - The permanently exposed control bar and separate route HUD that compete with the car for the bottom of the viewport.
 - Four disconnected infrastructure rectangles.
 - Toolkit placeholders without official icons.
 - Equal visual priority for all projects and no authentic project media.
 - Engine and road noise presented as a soundtrack despite having no musical layer.
 ## 4. Experience principles
 1. **The world is continuous.** Native scrolling never cuts to a different page or hijacks input. The drive remains visible behind the document from start to destination.
 2. **The car is the anchor.** Camera, road convergence, panel corridors, signs, and HUD placement are composed around a stable chase view.
 3. **Information stays credible.** Panels use substantially opaque near-black surfaces, calm typography, short accent moments, and no game-menu framing.
 4. **Motion communicates state.** Acceleration shows input energy, signs announce an upcoming section, chapter changes show route progression, and controls acknowledge activation.
 5. **Static remains first-class.** Reduced motion and Static mode provide a composed destination image and complete content without simulating a paused broken scene.
 6. **Project evidence is authentic.** Only supplied work appears as project media. No AI-generated substitutes or fake interface screenshots.
 7. **The first screen is complete.** Name, equal hybrid role, value proposition, Explore work, and Start the drive are visible without scrolling.
 ## 5. Visual system
 ### 5.1 Typography
 Use a self-hosted sans-serif pairing with clear licensing:
 - Display and body: Geist Variable.
 - Technical labels and route data: Geist Mono.
 - Obtain both families from a verified licensed source, self-host them, and record their license in the repository.
 - No serif display treatment.
 - Headings use sentence case except the two approved destination lines and the Start the drive control.
 - Display tracking is tight but not compressed. Body copy targets 60-65 characters per line.
 - All visible copy uses regular hyphens. The page contains no em dash or en dash characters.
 - Section-number labels and decorative index notation are removed.
 ### 5.2 Color
 Information tokens:
 - `--canvas`: blue-black, never pure black.
 - `--surface`: near-black navy at 95 percent opacity where text overlaps the world.
 - `--surface-strong`: the same near-black navy at 97 percent opacity for mobile overlays and high-energy horizon crossings.
 - `--surface-soft`: a slightly lighter same-hue surface at 92 percent opacity for nested evidence that does not cross bright scenery.
 - `--text`: soft white with AAA-target contrast for primary copy.
 - `--text-muted`: cool gray with WCAG AA contrast.
 - `--accent`: restrained cyan for focus, active navigation, links, and one primary interface action.
 - `--focus`: warm pale amber reserved for focus visibility, not general decoration.
 World-only colors:
 - Cyan for near road edges, lower grid energy, underglow, and cool atmospheric depth.
 - Magenta for higher terrain ridges, rear light, and deep-night horizon energy.
 - Amber for sun warmth, center-lane energy, and pre-dawn progression.
 Interface buttons do not alternate between cyan, magenta, and amber. Cyan is the single action accent.
 ### 5.3 Surfaces and depth
 - Panels use one 12px radius, a quiet internal highlight, a same-hue border, and a tinted shadow.
 - No broad glass blur. Text surfaces remain substantially opaque and readable when the scene becomes bright.
 - Nested content is grouped with spacing, type, and sparse dividers rather than a card inside every card.
 - A fixed low-opacity grain layer may be used only as a pointer-free viewport overlay.
 - CRT treatment is limited to the Three.js output and global atmosphere. Body text never receives scanlines, chromatic aberration, or glow.
 ### 5.4 Layer scale
 - `0`: static poster and scene canvas
 - `1`: atmospheric viewport treatment
 - `2`: document content
 - `3`: site navigation
 - `4`: route HUD and drive controls
 - `5`: control popover
 - `6`: skip link and transient error notices
 No arbitrary z-index values are introduced outside this scale.
 ## 6. Page composition
 The page retains the existing anchors but each section gets a distinct layout family.
 ### 6.1 Start
 - Initial viewport uses a left-biased identity composition with the road horizon visible to the right and the car below.
 - Text stack contains name, role, value proposition, and actions only.
 - `Explore work` links to `#selected-builds` and works without audio or scene activation.
 - `START THE DRIVE` is visible in the compact pre-activation HUD and does not gate exploration.
 - The hero uses `min-height: 100dvh`; the primary content and both actions remain visible in the initial viewport.
 ### 6.2 Profile
 - A restrained right-side dossier surface with a short introduction and screening facts.
 - Facts use aligned label/value rows without section numbering, decorative dots, or a long bordered table.
 - The open left corridor preserves the road and terrain.
 ### 6.3 Experience
 - A wide left-side professional record with reverse chronological roles and a clearly separated systems-operations proof block.
 - Roles use typographic hierarchy and whitespace rather than repeated equal cards.
 - The systems evidence receives a distinct same-surface composition, not a nested generic card.
 ### 6.4 Infrastructure
 - A centered, wider technical canvas that temporarily narrows the visible road corridor but keeps the horizon and car edges visible.
 - The real architecture diagram is the main visual.
 - Supporting copy is grouped under traffic flow, identity boundary, service layer, and operations rather than repeating a long list of four generic bands.
 ### 6.5 Selected builds
 - The private self-hosted medication tracker and Footy Tracker are the two primary software case studies.
 - Each receives an authentic media-led composition with problem, contribution, decisions, outcome, and link state.
 - The two compositions use different media proportions to avoid repeated split layouts.
 - Opinion Dynamics Simulation appears as a smaller research module following the two primary studies. It remains substantive but clearly supporting.
 ### 6.6 Additional work
 - Additional work becomes an asymmetric evidence rail or compact mosaic, not a second Selected builds section.
 - The private game prototype, private healthcare platform, Currency Converter, and Linux Modding Guide remain concise.
 - Available supplied media creates visual variation. Missing media does not trigger invented screenshots.
 - Private projects never receive repository links.
 ### 6.7 Toolkit
 - Technologies appear as a compact responsive icon registry grouped into systems and delivery, software and data, and additional experience.
 - Every item shows its official icon and visible technology name.
 - Official brand icons come from Simple Icons or an official project asset with recorded licensing.
 - UI controls use one Phosphor Vue family at a consistent weight. Brand icons are exempt from the UI icon-family rule because their official marks must remain recognizable.
 - No decorative colored status dots appear.
 ### 6.8 Contact destination
 - The environment reaches a calm pre-dawn state with less magenta, warmer horizon light, lower terrain energy, and a quiet car idle response.
 - Display copy is exactly:
  `END OF THIS ROAD.`  
  `START OF THE NEXT.`
 - Primary action label is `START A CONVERSATION` and uses the existing `mailto:` destination.
 - The visible email remains available as fallback text.
 - The CV message remains: a current or role-specific CV is available by direct contact.
 - GitHub, GitLab, and LinkedIn show recognizable official icons and visible names.
 ## 7. Three.js world reconstruction
 ### 7.1 Architecture
 Retain `createSceneController` as the lifecycle authority. Replace the current procedural generation internals with focused world modules:
 - `world/road.ts`: shader-driven road bed, edge energy, center markers, shoulder reflection, and flow.
 - `world/terrain.ts`: indexed line-segment grid with vertex-shader displacement and distance-aware color/fade.
 - `world/sky.ts`: chapter-interpolated sky gradient and atmospheric color.
 - `world/sun.ts`: scan-band sun disc, halo, horizon occlusion, and chapter warmth.
 - `world/atmosphere.ts`: stars, horizon haze, distant light sources, and speed streaks.
 - `world/car.ts`: original modeled grand tourer and its suspension/light response.
 - `world/sign.ts`: world-space sign mesh and texture presentation.
 - `world/post-processing.ts`: quality-aware composer and final restrained CRT pass.
 - `world/environment.ts`: builds modules, owns chapter interpolation, and coordinates the render frame.
 The existing resource bag owns every geometry, material, texture, render target, listener, and disposable runtime object.
 ### 7.2 Camera and road
 - Perspective begins near 68-72 degrees at cruise and eases wider under acceleration.
 - Camera remains behind and above the car, looking beyond the horizon convergence point.
 - Road occupies a convincing central valley with shoulders wide enough to frame the vehicle.
 - Continuous shader flow replaces moving individual center-marker meshes.
 - Near-road material stays dark and low-reflective, with restrained cyan shoulder response and amber center energy.
 - Acceleration affects flow rate, FOV, subtle camera settling, and light streak length. It does not shake body text or move the semantic document.
 ### 7.3 Terrain
 - Build one wide indexed line grid across the road and both landscapes.
 - Vertex displacement combines multiple deterministic noise octaves.
 - A smooth center mask creates a flat road valley while ridges grow toward the edges.
 - Grid color blends from cooler cyan near the valley to restrained magenta on higher ridges.
 - Distance fog, line opacity, and horizon haze create depth instead of drawing every line at equal intensity.
 - Noise and road phases wrap without visible jumps.
 - Low quality reduces grid density and octave count without changing composition.
 ### 7.4 Sky, sun, and atmosphere
 - The sky is a vertically layered color field that interpolates through journey chapters.
 - The large sun sits at the road convergence point and uses a shader for vertical scan bands and edge softness.
 - A separate halo and horizon haze layer create depth without turning the full page into a neon glow.
 - Stars vary in size and brightness with deterministic seeds. Pre-dawn chapters reduce their visibility.
 - Roadside streaks remain nearly invisible at cruise and lengthen only under acceleration.
 - Near particles stay sparse enough not to resemble snow or dust.
 ### 7.5 Post-processing and CRT
 High quality:
 - Render pass.
 - Restrained UnrealBloomPass tuned for sun, road energy, car lights, and bright grid peaks.
 - Final shader with subtle vignette, scanline modulation, and low-amplitude grain.
 Medium quality:
 - Reduced pixel ratio and terrain density.
 - Lower-resolution bloom target and reduced streak count.
 - Same composition and chapter behavior.
 Low quality:
 - Direct renderer or a single lightweight final pass.
 - No bloom render target.
 - Reduced terrain, stars, and streaks.
 - Car, road, sun, and chapter progression remain recognizable.
 Static and reduced motion:
 - Do not initialize or download the live scene when policy disallows it at startup.
 - Render a composed local poster derived from the implemented world, not an unrelated generated image.
 - Suppress signs, speed streaks, suspension motion, and automatic media.
 ### 7.6 Environmental chapters
 Chapter properties interpolate over time instead of changing in one frame:
 - `deep-night`: cool sky, visible stars, magenta horizon, restrained sun.
 - `systems`: clearer cyan road valley and slightly stronger structured grid.
 - `infrastructure`: deeper blue atmosphere and stronger horizon definition.
 - `builds`: richer road response and balanced cyan/magenta terrain.
 - `pre-dawn`: reduced stars, warmer sun, cooler terrain saturation.
 - `destination`: calm amber horizon, low streak energy, softened magenta, stable vehicle idle.
 ## 8. Original chase-view car
 The car is built procedurally from original Three.js geometry. It must not copy a recognizable production model.
 ### 8.1 Form
 - Low, wide wedge silhouette with a planted rear stance.
 - Faceted lower body, intentional rear shoulders, tapered cabin, and sloped rear glass.
 - Rear fascia includes one continuous red light bar, recessed lower panel, and small cyan reflection accents.
 - Visible wheel and tire volumes sit within the body rather than outside a rectangular slab.
 - Body planes use controlled roughness and metalness so they catch the horizon without becoming mirror chrome.
 - Glass remains dark and readable as a different material from the body.
 ### 8.2 Motion and light
 - The group remains compositionally stable at the lower center.
 - Acceleration produces a subtle rear squat and damped suspension response.
 - Cruise adds a barely perceptible road-frequency movement.
 - Steering sway is minimal and never drifts off the road center.
 - The rear light bar gains intensity under acceleration without flashing.
 - Cyan underglow is faint, constrained below the chassis, and reflected into the road rather than drawn as a large transparent rectangle.
 ### 8.3 Responsive behavior
 - Desktop shows the complete rear silhouette and both wheels.
 - Tablet slightly reduces scale and lowers the car to protect content sightlines.
 - Mobile simplifies secondary geometry and keeps only the silhouette, light bar, wheels, glass, and restrained underglow.
 - Short landscape viewports may reduce or hide the car if it would cover essential content or controls.
 ## 9. Section-sign lifecycle
 Replace the distance-mapped `nextSign` output with a clock-driven controller. Document geometry chooses candidates; the animation clock owns presentation.
 ### 9.1 States
 ```text
 idle -> anticipate -> approach -> dwell -> depart -> cooldown -> idle
 ```
 - `anticipate`: candidate latches for 300ms before it becomes visible.
 - `approach`: sign travels from the horizon with eased scale, position, and opacity for 900ms. High scroll acceleration may shorten this to 650ms, but no further.
 - `dwell`: sign occupies the readable roadside position for at least 1400ms.
 - `depart`: sign moves behind the vehicle and fades over 700ms.
 - `cooldown`: prevents immediate relatching and one-frame flashes for 350ms.
 ### 9.2 Eligibility and precedence
 - Only one sign may exist at a time.
 - Ordinary forward passive scrolling may latch the next adjacent section.
 - Scroll acceleration may shorten approach slightly, but never the minimum dwell.
 - Reverse input cancels a not-yet-readable sign or completes a readable sign cleanly. It does not play a reversed label.
 - Explicit anchor navigation, history restoration, multi-section jumps, Static mode, and reduced motion suppress sign creation.
 - A large jump clears the current lifecycle without teleporting a different sign into its place.
 - Hysteresis around section boundaries prevents repeated enter/exit toggles.
 ### 9.3 Rendering
 - Sign sits beside the road rather than floating directly over the car.
 - Panel proportions, mounting geometry, and lighting read as an environmental object.
 - Copy uses the plain navigation label only. No route numbers or index notation.
 - Text texture updates only when the latched target changes.
 - Departure moves behind the camera corridor with opacity and transform animation only.
 ## 10. Scroll and motion data flow
 Use one shared animation-clock path for continuous values.
 1. A frame sampler reads the current document scroll position without storing per-frame values in reactive component state.
 2. The existing pure scroll-drive controller converts samples into route progress, direction, acceleration, and drive speed.
 3. Semantic active-section selection remains independent of Three.js and uses measured heading geometry plus observers.
 4. The sign controller consumes active section, next candidate, navigation source, direction, and the animation clock.
 5. The scene runtime consumes a compact immutable snapshot for each render frame.
 6. Vue receives throttled display snapshots only when route labels or control status actually change.
 Replace the current independent raw scroll listeners in `useScrollDrive` and `useJourneySections` with this shared sampling path. Continuous scene values are sampled by the animation clock; structural section changes use observers and scheduled measurements. Do not add another raw `window` scroll handler.
 ## 11. Compact vehicle HUD
 ### 11.1 Before activation
 - A compact lower-left control exposes `START THE DRIVE` with a clear play or ignition icon.
 - A lower-right route indicator shows current section and progress in a quiet form.
 - Motion and quality remain accessible from a small settings control.
 - The start action is inviting but does not dominate the identity or Explore work action.
 ### 11.2 After activation
 - The start surface collapses into a small horizontal cluster.
 - Direct controls: mute/unmute, volume access, motion pause/resume, and settings.
 - Quality and secondary status live in a 12px popover rather than remaining exposed.
 - Status copy appears only when meaningful: preparing, audio unavailable, Static, or reduced motion.
 - Buttons use Phosphor icons with accessible names and visible tooltips on hover/focus.
 - Every target is at least 44 by 44 CSS pixels and has pressed, hover, focus, disabled, and active feedback.
 ### 11.3 Responsive behavior
 - Desktop balances the control cluster against the route HUD while leaving the car center clear.
 - Tablet uses safe-area-aware left and right insets.
 - Mobile uses one compact horizontal lower control row. Secondary settings open upward.
 - Narrow desktop sidebars remain horizontal while width permits. They do not switch to a tall stacked footer based solely on height.
 - Short landscape layouts may place the cluster in normal flow near Contact if fixed positioning would obscure content.
 ## 12. Procedural soundtrack
 Retain `createAudioController` and replace the underlying graph with separate musical and vehicle layers.
 ### 12.1 Mixer
 ```text
 music bus  -> music filter  -> music gain  \
 engine bus -> engine filter -> engine gain  -> master compressor -> master gain -> output
 road bus   -> road filter   -> road gain   /
 ```
 - Master volume and mute operate after all buses.
 - Music, engine, and road levels are independently balanced.
 - The graph remains opt-in and is created synchronously inside the activating gesture.
 ### 12.2 Music
 - Original procedural synthwave arrangement around a restrained 82-88 BPM pulse.
 - Four-chord minor progression using pad voices with slow attack and release.
 - Bass sequence locked to the progression and subdivision clock.
 - Sparse kick, soft snare or clap, and restrained pulse percussion.
 - Optional short melodic motif used infrequently.
 - Atmospheric noise or filtered texture supplies continuity between musical events.
 - Scheduling uses look-ahead Web Audio timing, not one UI timer per note.
 ### 12.3 Acceleration coupling
 - Scroll acceleration may raise the music filter, add a small percussion layer, increase engine pitch, and lift road texture.
 - Musical tempo, harmony, and note order do not change chaotically with every wheel event.
 - Coupling values are smoothed and bounded.
 - Returning to cruise settles naturally without muting the music.
 ### 12.4 Failure and lifecycle
 - Rejected start shows `Audio unavailable. Continue without sound.`
 - Visibility and mobile interruption suspend and resume according to the existing lifecycle.
 - Rapid activation creates one context and one graph.
 - Teardown stops scheduled sources, clears schedulers, disconnects buses, and closes once.
 The procedural music engine is the only planned Luna-high implementation assignment. The primary agent owns its interface, integration, balancing, browser iteration, and final acceptance.
 ## 13. Infrastructure diagram
 Build a functional responsive SVG or semantic diagram, not decorative artwork.
 ### 13.1 Nodes and flow
 Primary traffic path:
 ```text
 Personal domain
  -> Nginx reverse proxy on a repurposed Linux PC
  -> optional Authelia protection for services without suitable native authentication
  -> Docker service layer
  -> Nextcloud, SearXNG, Vaultwarden, Gitea
 ```
 Supporting controls:
 - Let's Encrypt and Certbot connect to the domain and Nginx certificate lifecycle.
 - fail2ban protects exposed entry points around the host-level ingress boundary.
 - Passkeys, two-factor authentication, and recovery connect to the identity boundary at a non-sensitive level.
 - Pi-hole appears as a smaller network utility, not as an internet-facing service.
 ### 13.2 Trust boundaries
 - Internet and public-domain boundary.
 - Host-level ingress and security boundary.
 - Identity gate where applicable.
 - Docker service boundary.
 - Local network utility boundary.
 No real hostname, IP address, port, username, version, threshold, recovery endpoint, or private service name appears.
 ### 13.3 Responsive and accessible form
 - Desktop uses a left-to-right flow with clear connectors and grouped boundaries.
 - Tablet reduces connector complexity and stacks supporting controls around the primary path.
 - Mobile becomes a vertical traffic flow with the same node order.
 - Visible legend explains boundary and connector meanings.
 - Adjacent structured text describes the same traffic path and controls.
 - Relationships do not rely on color alone.
 ## 14. Authentic project media
 ### 14.1 Current dependency
 The repository and current attachment set do not contain the supplied source binaries. The media slice cannot begin until the source root is identified or the files are attached again.
 ### 14.2 Development preparation
 - Use the existing preparation pipeline with an explicit untracked source root and mapping.
 - Create safe local derivatives first. Formal release signing and final-byte approval remain deferred.
 - Strip metadata and external references.
 - Use synthetic demonstration data for medication and healthcare interfaces.
 - Remove private URLs, identifiers, personal data, medication data, infrastructure details, and unintended browser chrome.
 - The private self-hosted medication tracker never exposes its unpublished product name.
 - The private game prototype never exposes its product or repository name.
 - Game footage begins after the title screen and uses gameplay only.
 - Private projects remain without repository links.
 ### 14.3 Presentation
 - Primary case-study media receives intrinsic dimensions and a stable aspect ratio.
 - Image captions are functional and concise.
 - Video keeps explicit play/pause, reduced-motion poster behavior, offscreen pause, and accessible failure text.
 - Media failure keeps project copy and link state intact.
 - No AI-generated or stock substitute is used when a supplied derivative is missing.
 ## 15. Verified public links
 - Inspect `https://github.com/LucaPisl` and match repositories by project identity, README, language, and visible purpose.
 - Add links only when a repository match is verified.
 - Required candidates: Footy Tracker, Opinion Dynamics Simulation, Currency Converter, and Linux Modding Guide.
 - Do not invent URLs or expose private repositories.
 - If a match remains ambiguous after repository inspection, request Luca's decision for that project only.
 - Public links use recognizable Git hosting icons, visible action labels, and safe external-link attributes.
 ## 16. Responsive integration
 ### 16.1 Desktop, 1280px and above
 - Full chase composition, complete car model, highest permitted world density.
 - Content corridors may occupy 42-58 percent of width depending on section.
 - Navigation remains one line and no taller than 72px.
 - Panels never cover both the horizon and car simultaneously.
 ### 16.2 Tablet, 768-1279px
 - Reduced car scale, terrain density, and panel overlap.
 - Content uses one primary column with controlled left/right offset, never alternating narrow half-width cards.
 - HUD and route status use safe-area-aware insets.
 - Infrastructure diagram uses the tablet flow.
 ### 16.3 Mobile, below 768px
 - Strict single-column content with 16px horizontal padding.
 - Near-black surfaces become more opaque for readability.
 - Secondary car detail and far atmosphere are reduced.
 - Navigation becomes a compact accessible menu or horizontally efficient control without a two-row fixed link wall.
 - Bottom controls remain one compact row and do not cover text or media.
 - Every section declares its mobile composition explicitly.
 ### 16.4 Short and narrow desktop viewports
 - Fixed HUD stays horizontal when width permits.
 - Car scale and vertical position adapt before controls move into normal flow.
 - Height alone does not trigger the current tall stacked control layout.
 - Contact receives enough safe-area padding for every action to remain unobscured.
 ## 17. Accessibility and resilient states
 Preserve the current semantic and accessibility contracts while focusing this phase on visual quality.
 - Canvas, car, road, particles, signs, and route HUD remain decorative and hidden from assistive technology.
 - Scene description remains available as concise offscreen text.
 - Navigation, content, links, diagrams, media, and contact actions remain semantic.
 - Reduced motion prevents scene initialization at initial load and disables section signs and automatic media.
 - Static poster, loading, scene failure, audio failure, media failure, and missing optional social links each retain a composed layout.
 - Loading uses the poster and stable HUD state, not a generic spinner.
 - Control labels, focus rings, helper text, and errors meet WCAG AA contrast.
 - Keyboard focus never follows passive scrolling or decorative sign state.
 - Content remains usable at 320 CSS pixels and with text spacing overrides.
 ## 18. Performance constraints
 - Keep Three.js and all scene code behind the existing deferred import.
 - Do not download live-scene code for initial reduced-motion or Static policy.
 - Preserve the existing transfer and runtime budget gates as regression signals.
 - High quality caps device pixel ratio through the existing quality policy.
 - Bloom and additional render targets must be reflected in runtime GPU accounting.
 - Terrain, stars, streaks, car detail, and post passes scale by quality tier.
 - Animate transforms, opacity, shader uniforms, and audio parameters only.
 - Avoid per-frame Vue state updates and layout reads inside the Three.js render path.
 - Resize recomputes renderer and camera dimensions only when dimensions change.
 - Every animation and scheduler has deterministic cleanup.
 ## 19. Source originality and licensing
 - The Nightdrive reference supplies a quality bar and technical vocabulary, not portfolio branding or content.
 - Build original shader organization, parameter values, color calibration, car geometry, sign system, soundtrack, and UI composition.
 - Do not copy Nightdrive's names, writing, cassette artwork, recording, dashboard labels, metrics, or decorative assets.
 - If implementation substantially adapts MIT-licensed reference code, include Kyle Provost's MIT notice in a third-party notices file and annotate the adapted module.
 - Official icons and any added fonts include their required license records.
 ## 20. Implementation ownership and review cadence
 Primary agent owns:
 - visual direction and token system;
 - Three.js scene reconstruction;
 - car reconstruction;
 - section-sign lifecycle and rendering;
 - information-layer styling and content composition;
 - HUD and controls;
 - infrastructure diagram;
 - responsive integration;
 - browser screenshots, motion comparison, and iterative refinement.
 One Luna-high subagent may implement the isolated procedural music engine after the scene and HUD interfaces are stable. It does not redesign shared visual files.
 Review cadence:
 - One quick focused review after the integrated scene, car, sign, and HUD milestone.
 - One final integrated visual and UX review.
 - No reviewer after every task and no simultaneous redesign of overlapping files.
 ## 21. Implementation slices
 1. Establish visual tokens, font plan, scene interfaces, and isolated preview branch.
 2. Reconstruct road, terrain, sky, sun, atmosphere, and quality-aware post-processing.
 3. Rebuild and integrate the original chase-view car.
 4. Replace sign mapping with the clock-driven lifecycle.
 5. Replace the fixed controls with the pre-activation and collapsed HUD states.
 6. Implement and integrate the procedural soundtrack.
 7. Recompose the information layer and section rhythm.
 8. Build the responsive infrastructure diagram and icon registries.
 9. Prepare and integrate authentic project media and verified public links.
 10. Add destination copy, Explore work, contact action, and project-priority refinements.
 11. Perform integrated desktop, tablet, mobile, Static, reduced-motion, and failure-state browser refinement.
 ## 22. Visual acceptance
 This redesign phase is acceptable only when:
 - The world has convincing road convergence, displaced terrain, atmospheric depth, a layered horizon, and restrained post-processing.
 - Acceleration is immediately perceptible but native scrolling remains normal.
 - The car reads as an intentional original grand tourer rather than a box.
 - Signs approach, dwell, and depart without flashes, teleports, or overlapping labels.
 - Start the drive is inviting before activation and controls become compact afterward.
 - The information layer reads as a professional portfolio, not a game menu or generic AI card layout.
 - The two leading software case studies clearly outrank Opinion Dynamics and Additional work.
 - The infrastructure diagram communicates traffic flow and trust boundaries on desktop and mobile.
 - Toolkit and social links show official icons and visible names.
 - Authentic project media is integrated without private identifiers.
 - Destination copy and Start a conversation are present.
 - Keyboard, reduced-motion, Static, no-JavaScript, and lifecycle foundations show no known regression.
 - The preview has been inspected directly against the reference quality bar at representative desktop, tablet, mobile, and narrow-short viewports.
 - Luca receives a working preview and visually approves it.
 The redesign must not be described as finished before the final working preview and Luca's visual review.