From 77895c01ffb45746e8a9206ee21f93c10097c6e6 Mon Sep 17 00:00:00 2001
From: LucaP <luca.pislaru@protonmail.com>
Date: Wed, 2 Sep 2026 06:04:20 +0300
Subject: [PATCH] fix: close phase 2 journey blockers

---
 src/components/AppShell.vue                | 17 ++++--
 src/components/SceneCanvas.vue             | 17 ++++--
 src/composables/useAdaptiveQuality.ts      |  3 +-
 src/composables/useJourneySections.ts      | 12 +++-
 src/composables/useSceneController.ts      | 18 +++++-
 src/composables/useScrollDrive.ts          |  1 +
 src/journey/scroll-drive-controller.ts     |  4 ++
 src/scene/create-scene-controller.ts       | 13 ++++-
 src/scene/types.ts                         |  1 +
 src/scene/world/car.ts                     | 45 ++++++++++++++-
 src/scene/world/environment.ts             | 11 +++-
 src/styles/world.css                       |  2 +
 tests/browser/bfcache-lifecycle.spec.ts    |  2 +-
 tests/browser/scene-controls.spec.ts       | 41 ++++++++++++-
 tests/unit/SceneCanvas.test.ts             | 67 +++++++++++++++++++++-
 tests/unit/adaptive-quality.test.ts        | 21 +++++++
 tests/unit/scene-lifecycle.test.ts         | 55 +++++++++++++++++-
 tests/unit/scene-resources.test.ts         | 47 +++++++++++++++
 tests/unit/scroll-drive-controller.test.ts | 27 +++++++++
 19 files changed, 378 insertions(+), 26 deletions(-)

diff --git a/src/components/AppShell.vue b/src/components/AppShell.vue
index f2ccd6a..487e4b0 100644
--- a/src/components/AppShell.vue
+++ b/src/components/AppShell.vue
@@ -78,20 +78,28 @@ watch(
 watch(
   () => motion.policy.value.maximumTier,
   (tier, previous) => {
-    if (tier !== previous) adaptive.setMaximum(tier, 'manual');
+    if (tier !== previous) {
+      adaptive.setMaximum(tier, controlsReady.value ? 'resize' : 'manual');
+    }
   },
+  { flush: 'sync' },
 );
 
 const setQuality = (tier: import('@/journey/motion-policy').QualityTier): void => {
   motion.setMaximumQuality(tier);
-  adaptive.setMaximum(tier, 'manual');
+  adaptive.setMaximum(motion.policy.value.maximumTier, 'manual');
 };
 
 const enableMotion = (): void => {
   const tier = motion.maximumQuality.value === 'static' ? 'high' : motion.maximumQuality.value;
   motion.setMaximumQuality(tier);
   motion.setPaused(false);
-  adaptive.setMaximum(tier, 'manual');
+  adaptive.setMaximum(motion.policy.value.maximumTier, 'manual');
+};
+
+const resumeMotion = (): void => {
+  motion.setPaused(false);
+  adaptive.setMaximum(motion.policy.value.maximumTier, 'manual');
 };
 
 onMounted(() => {
@@ -118,6 +126,7 @@ onUnmounted(() => removePageListeners());
     :policy="motion.policy.value"
     :quality="actualQuality"
     :scene-description="content.sceneDescription"
+    :sample-frame="adaptive.sampleFrame"
     @state-change="sceneState = $event"
   />
   <JourneyHud
@@ -185,7 +194,7 @@ onUnmounted(() => removePageListeners());
     :audio-muted="audio.muted.value"
     :audio-volume="controlsReady ? motion.volume.value : 0.4"
     @pause="motion.setPaused(true)"
-    @resume="motion.setPaused(false)"
+    @resume="resumeMotion"
     @enable="enableMotion"
     @quality-change="setQuality"
     @audio-start="audio.startFromGesture"
diff --git a/src/components/SceneCanvas.vue b/src/components/SceneCanvas.vue
index db5133f..82a95e2 100644
--- a/src/components/SceneCanvas.vue
+++ b/src/components/SceneCanvas.vue
@@ -9,6 +9,7 @@ const props = defineProps<{
   policy: MotionPolicy;
   quality: QualityTier;
   sceneDescription: string;
+  sampleFrame?: (start: number, end: number) => unknown;
 }>();
 
 const emit = defineEmits<{
@@ -20,13 +21,16 @@ const clientReady = ref(false);
 const journey = toRef(props, 'journey');
 const policy = toRef(props, 'policy');
 const quality = toRef(props, 'quality');
-const scene = useSceneController({ canvas, journey, policy, quality });
+const scene = useSceneController({ canvas, journey, policy, quality, sampleFrame: props.sampleFrame });
 const sceneState = computed(() => scene.state.value);
+const sceneGeneration = computed(() => scene.snapshot.value?.currentGeneration ?? null);
 const showCanvas = computed(() => (
   clientReady.value
-  && policy.value.allowSceneRequest
-  && quality.value !== 'static'
   && !scene.error.value
+  && (
+    (policy.value.allowSceneRequest && quality.value !== 'static')
+    || (policy.value.reason === 'visitor-pause' && sceneGeneration.value !== null)
+  )
 ));
 
 watch(scene.state, (state) => emit('stateChange', state), { immediate: true });
@@ -35,7 +39,12 @@ onMounted(() => { clientReady.value = true; });
 
 <template>
   <p id="journey-scene-description" class="visually-hidden">{{ sceneDescription }}</p>
-  <div class="journey-world" aria-hidden="true" :data-scene-state="sceneState">
+  <div
+    class="journey-world"
+    aria-hidden="true"
+    :data-scene-state="sceneState"
+    :data-scene-generation="sceneGeneration"
+  >
     <img class="journey-poster" alt="" width="1600" height="900">
     <canvas v-if="showCanvas" ref="canvas" class="journey-canvas" aria-hidden="true" />
   </div>
diff --git a/src/composables/useAdaptiveQuality.ts b/src/composables/useAdaptiveQuality.ts
index d87a6a1..f0fef64 100644
--- a/src/composables/useAdaptiveQuality.ts
+++ b/src/composables/useAdaptiveQuality.ts
@@ -13,6 +13,7 @@ import {
   type QualityDecision,
 } from '@/journey/adaptive-quality';
 import type { QualityTier } from '@/journey/motion-policy';
+import { lowerTier } from '@/journey/motion-policy';
 
 const PASSIVE_LISTENER: AddEventListenerOptions = { passive: true };
 
@@ -70,7 +71,7 @@ export function useAdaptiveQuality(sources: AdaptiveQualitySources): AdaptiveQua
     tier: QualityTier,
     reason: 'resize' | 'manual',
   ): QualityDecision | null => {
-    const decision = controller.setMaximum(tier, reason);
+    const decision = controller.setMaximum(lowerTier(tier, sources.maximum.value), reason);
     reconcileEpoch();
     return decision;
   };
diff --git a/src/composables/useJourneySections.ts b/src/composables/useJourneySections.ts
index a2fbe19..0495ee6 100644
--- a/src/composables/useJourneySections.ts
+++ b/src/composables/useJourneySections.ts
@@ -1,4 +1,5 @@
 import {
+  computed,
   onMounted,
   onUnmounted,
   readonly,
@@ -41,7 +42,12 @@ export function useJourneySections(
     throw new Error("At least one canonical journey section is required.");
   }
   const drive = useScrollDrive();
-  const snapshot = shallowRef<JourneySnapshot>(initialJourney(firstId));
+  const sectionSnapshot = shallowRef<JourneySnapshot>(initialJourney(firstId));
+  const snapshot = computed<JourneySnapshot>(() => ({
+    ...sectionSnapshot.value,
+    ...drive.value,
+    routeProgress: sectionSnapshot.value.arrived ? 1 : drive.value.routeProgress,
+  }));
   let scheduleMeasurement = (): void => {};
   let teardown = (): void => {};
 
@@ -100,7 +106,7 @@ export function useJourneySections(
       const activeIndex = canonicalIds.indexOf(activeSectionId);
       const crossedBoundaries = Math.abs(activeIndex - previousActiveIndex);
       const deltaY = scrollY - previousScrollY;
-      const currentSign = snapshot.value.sign;
+      const currentSign = sectionSnapshot.value.sign;
       const signTargetId =
         currentSign?.targetId ?? canonicalIds[activeIndex + 1] ?? null;
       const signTarget = headings.find(
@@ -119,7 +125,7 @@ export function useJourneySections(
               motionAllowed: motionAllowed?.value ?? true,
             });
       const sectionState = deriveSectionState(activeSectionId);
-      snapshot.value = {
+      sectionSnapshot.value = {
         ...drive.value,
         routeProgress: atDocumentEnd ? 1 : drive.value.routeProgress,
         ...sectionState,
diff --git a/src/composables/useSceneController.ts b/src/composables/useSceneController.ts
index b64a54f..51a6abc 100644
--- a/src/composables/useSceneController.ts
+++ b/src/composables/useSceneController.ts
@@ -25,6 +25,7 @@ export interface SceneControllerSources {
   journey: Readonly<Ref<JourneySnapshot>>;
   policy: Readonly<Ref<MotionPolicy>>;
   quality: Readonly<Ref<QualityTier>>;
+  sampleFrame?: ((start: number, end: number) => unknown) | undefined;
 }
 
 export function useSceneController(sources: SceneControllerSources): SceneControllerBinding {
@@ -61,14 +62,26 @@ export function useSceneController(sources: SceneControllerSources): SceneContro
     if (!mounted) return;
     const allowed = sources.policy.value.allowSceneRequest && sources.quality.value !== 'static';
     const canvas = sources.canvas.value;
-    if (!allowed || canvas === null) {
-      disposeActive(allowed ? (error.value ? 'failed' : 'idle') : 'static');
+    if (!allowed) {
+      if (sources.policy.value.reason === 'visitor-pause' && controller !== null) {
+        controller.pause();
+        publish();
+      } else {
+        disposeActive('static');
+      }
+      return;
+    }
+    if (canvas === null) {
+      disposeActive(error.value ? 'failed' : 'idle');
       return;
     }
 
     if (controller !== null) {
       controller.update(sources.journey.value);
       await controller.setQuality(sources.quality.value);
+      if (controller.snapshot().state.kind === 'paused') {
+        await controller.resume();
+      }
       publish();
       return;
     }
@@ -94,6 +107,7 @@ export function useSceneController(sources: SceneControllerSources): SceneContro
         quality: sources.quality.value,
         build: createProceduralSceneGeneration,
         motionAllowed: () => sources.policy.value.allowSceneRequest,
+        onFrameRendered: sources.sampleFrame,
         signal: abort.signal,
       });
       controller = next;
diff --git a/src/composables/useScrollDrive.ts b/src/composables/useScrollDrive.ts
index 7639628..a3e9f33 100644
--- a/src/composables/useScrollDrive.ts
+++ b/src/composables/useScrollDrive.ts
@@ -39,6 +39,7 @@ export function useScrollDrive(): Readonly<Ref<ScrollDriveSnapshot>> {
         ? controller.reset(input)
         : controller.sample(input);
       resetOnNextFrame = false;
+      if (snapshot.value.acceleration > 0) scheduleFrame();
     };
 
     const scheduleFrame = (): void => {
diff --git a/src/journey/scroll-drive-controller.ts b/src/journey/scroll-drive-controller.ts
index c775956..29b767a 100644
--- a/src/journey/scroll-drive-controller.ts
+++ b/src/journey/scroll-drive-controller.ts
@@ -10,6 +10,7 @@ const DECAY_TIME_CONSTANT_MS = 420;
 const CRUISE_SPEED = 0.18;
 const ACCELERATION_SPEED_RANGE = 0.82;
 const BACKGROUND_GAP_MS = 250;
+const DECAY_SETTLE_EPSILON = 0.001;
 
 const clamp = (value: number, minimum: number, maximum: number): number =>
   Math.min(maximum, Math.max(minimum, value));
@@ -87,6 +88,9 @@ export function createScrollDriveController(): ScrollDriveController {
       : DECAY_TIME_CONSTANT_MS;
     const alpha = 1 - Math.exp(-elapsedMs / timeConstantMs);
     smoothedAcceleration += (impulse - smoothedAcceleration) * alpha;
+    if (impulse === 0 && smoothedAcceleration < DECAY_SETTLE_EPSILON) {
+      smoothedAcceleration = 0;
+    }
     previousSample = { ...input };
 
     const direction: -1 | 0 | 1 = deltaY > 0 ? 1 : deltaY < 0 ? -1 : 0;
diff --git a/src/scene/create-scene-controller.ts b/src/scene/create-scene-controller.ts
index d362a89..b92bfa4 100644
--- a/src/scene/create-scene-controller.ts
+++ b/src/scene/create-scene-controller.ts
@@ -121,7 +121,10 @@ export function createSceneController(options: SceneControllerOptions): SceneCon
       rootResources.releaseAnimationFrame(frameId);
       if (overlay !== 'active' || machine.snapshot().kind !== 'running' || !current) return;
       try {
+        const frameStartedAt = scheduler.now();
         current.runtime.render(latestJourney, now);
+        const frameEndedAt = scheduler.now();
+        options.onFrameRendered?.(frameStartedAt, frameEndedAt);
       } catch {
         enterStatic('render-failure');
         return;
@@ -332,7 +335,7 @@ export function createSceneController(options: SceneControllerOptions): SceneCon
         pauseReason = 'freeze';
         break;
       case 'paused':
-        pauseReason = 'freeze';
+        if (pauseReason !== 'visitor') pauseReason = 'freeze';
         break;
       case 'lost':
         clearRestoreWatchdog();
@@ -351,11 +354,17 @@ export function createSceneController(options: SceneControllerOptions): SceneCon
     const persisted = Boolean((event as Event & { persisted?: boolean }).persisted);
     if (!persisted || overlay !== 'frozen') return;
     overlay = 'active';
+    const lifecycle = machine.snapshot();
     if (!(options.motionAllowed?.() ?? true)) {
+      if (
+        lifecycle.kind === 'paused'
+        && current !== null
+        && !lifecycle.resumeNeedsLoad
+        && pauseReason === 'visitor'
+      ) return;
       enterStatic('motion-disallowed');
       return;
     }
-    const lifecycle = machine.snapshot();
     if (page.visibilityState !== 'visible') return;
     if (lifecycle.kind === 'paused' && pauseReason === 'freeze') {
       pauseReason = null;
diff --git a/src/scene/types.ts b/src/scene/types.ts
index c614d81..6c6d66e 100644
--- a/src/scene/types.ts
+++ b/src/scene/types.ts
@@ -52,6 +52,7 @@ export interface SceneControllerOptions {
   scheduler?: SceneScheduler;
   page?: ScenePageEnvironment;
   motionAllowed?: () => boolean;
+  onFrameRendered?: ((start: number, end: number) => unknown) | undefined;
   signal?: AbortSignal;
 }
 
diff --git a/src/scene/world/car.ts b/src/scene/world/car.ts
index 75d608c..cc28281 100644
--- a/src/scene/world/car.ts
+++ b/src/scene/world/car.ts
@@ -3,10 +3,11 @@ import type { SceneResourceBag } from '@/scene/resources';
 
 export function createCar(resources: SceneResourceBag) {
   const group = new THREE.Group();
-  group.position.set(0, 0.72, 4.4);
+  group.position.set(0, 0.69, 0.5);
+  group.scale.set(0.9, 0.65, 0.78);
 
   const bodyMaterial = resources.own('material', new THREE.MeshStandardMaterial({
-    color: 0x111722,
+    color: 0x202938,
     roughness: 0.28,
     metalness: 0.78,
   }));
@@ -16,6 +17,12 @@ export function createCar(resources: SceneResourceBag) {
     metalness: 0.35,
   }));
   const tailMaterial = resources.own('material', new THREE.MeshBasicMaterial({ color: 0xff315f }));
+  const silhouetteMaterial = resources.own('material', new THREE.MeshBasicMaterial({ color: 0x405875 }));
+  const fasciaMaterial = resources.own('material', new THREE.MeshStandardMaterial({
+    color: 0x151c28,
+    roughness: 0.42,
+    metalness: 0.62,
+  }));
   const underglowMaterial = resources.own('material', new THREE.MeshBasicMaterial({
     color: 0x28d8ef,
     transparent: true,
@@ -39,6 +46,38 @@ export function createCar(resources: SceneResourceBag) {
   rearLight.position.set(0, 0.04, 3.08);
   group.add(rearLight);
 
+  const rearProfile = new THREE.Shape();
+  rearProfile.moveTo(-2.5, -0.32);
+  rearProfile.lineTo(-2.32, 0.28);
+  rearProfile.lineTo(-1.42, 0.72);
+  rearProfile.lineTo(1.42, 0.72);
+  rearProfile.lineTo(2.32, 0.28);
+  rearProfile.lineTo(2.5, -0.32);
+  rearProfile.closePath();
+  const silhouetteGeometry = resources.own('geometry', new THREE.ShapeGeometry(rearProfile));
+  const silhouette = new THREE.Mesh(silhouetteGeometry, silhouetteMaterial);
+  silhouette.name = 'rear-silhouette';
+  silhouette.position.z = 2.98;
+  group.add(silhouette);
+
+  const fasciaGeometry = resources.own('geometry', new THREE.BoxGeometry(4.3, 0.38, 0.22));
+  const fascia = new THREE.Mesh(fasciaGeometry, fasciaMaterial);
+  fascia.position.set(0, -0.12, 2.94);
+  group.add(fascia);
+
+  const shoulderGeometry = resources.own('geometry', new THREE.BoxGeometry(5.05, 0.18, 1.1));
+  const shoulders = new THREE.Mesh(shoulderGeometry, bodyMaterial);
+  shoulders.position.set(0, 0.18, 2.48);
+  group.add(shoulders);
+
+  const accentMaterial = resources.own('material', new THREE.MeshBasicMaterial({ color: 0x28d8ef }));
+  const accentGeometry = resources.own('geometry', new THREE.BoxGeometry(0.36, 0.1, 0.08));
+  for (const x of [-2.02, 2.02]) {
+    const accent = new THREE.Mesh(accentGeometry, accentMaterial);
+    accent.position.set(x, -0.15, 3.11);
+    group.add(accent);
+  }
+
   const glowGeometry = resources.own('geometry', new THREE.PlaneGeometry(4.2, 6.2));
   const underglow = new THREE.Mesh(glowGeometry, underglowMaterial);
   underglow.rotation.x = -Math.PI / 2;
@@ -60,7 +99,7 @@ export function createCar(resources: SceneResourceBag) {
     group,
     update(speed: number, acceleration: number, elapsedSeconds: number) {
       const response = Math.min(1, Math.max(0, acceleration));
-      group.position.y = 0.72 + Math.sin(elapsedSeconds * (2.2 + speed)) * (0.012 + response * 0.018);
+      group.position.y = 0.69 + Math.sin(elapsedSeconds * (2.2 + speed)) * (0.012 + response * 0.018);
       group.rotation.z = Math.sin(elapsedSeconds * 1.4) * 0.003 * response;
       tailMaterial.color.setRGB(1, 0.12 + response * 0.08, 0.28 + response * 0.08);
       underglowMaterial.opacity = 0.32 + Math.min(0.3, speed * 0.2);
diff --git a/src/scene/world/environment.ts b/src/scene/world/environment.ts
index cd6ea68..e7a6712 100644
--- a/src/scene/world/environment.ts
+++ b/src/scene/world/environment.ts
@@ -19,6 +19,13 @@ const skyColors: Readonly<Record<EnvironmentChapter, number>> = {
   destination: 0x2b2035,
 };
 
+export function createChaseCamera(aspect = 1) {
+  const camera = new THREE.PerspectiveCamera(52, aspect, 0.1, 320);
+  camera.position.set(0, 4.8, 12.5);
+  camera.lookAt(0, 1.6, -22);
+  return camera;
+}
+
 export async function createProceduralSceneGeneration(
   context: SceneBuildContext,
 ): Promise<SceneGeneration> {
@@ -42,9 +49,7 @@ export async function createProceduralSceneGeneration(
   const background = new THREE.Color(skyColors['deep-night']);
   scene.background = background;
   scene.fog = new THREE.FogExp2(0x080c18, 0.012);
-  const camera = new THREE.PerspectiveCamera(52, 1, 0.1, 320);
-  camera.position.set(0, 4.8, 12.5);
-  camera.lookAt(0, 1.6, -22);
+  const camera = createChaseCamera();
 
   const ambient = new THREE.HemisphereLight(0x6aa9c5, 0x100812, 1.25);
   scene.add(ambient);
diff --git a/src/styles/world.css b/src/styles/world.css
index f59a316..8680949 100644
--- a/src/styles/world.css
+++ b/src/styles/world.css
@@ -44,6 +44,8 @@
 }
 
 .site-header {
+  position: relative;
+  z-index: 2;
   background: rgb(7 13 23 / 96%);
 }
 
diff --git a/tests/browser/bfcache-lifecycle.spec.ts b/tests/browser/bfcache-lifecycle.spec.ts
index 0a05845..3fa68bd 100644
--- a/tests/browser/bfcache-lifecycle.spec.ts
+++ b/tests/browser/bfcache-lifecycle.spec.ts
@@ -41,7 +41,7 @@ test('persisted lifecycle events preserve paused and Static states without dupli
   await page.getByRole('button', { name: 'Pause motion' }).click();
   await dispatchPersistedPageTransition(page, 'pagehide');
   await dispatchPersistedPageTransition(page, 'pageshow');
-  await expect(page.locator('.journey-canvas')).toHaveCount(0);
+  await expect(page.locator('.journey-canvas')).toHaveCount(1);
   await expect(page.getByRole('button', { name: 'Resume motion' })).toBeVisible();
 
   await page.getByLabel('Quality control').selectOption('static');
diff --git a/tests/browser/scene-controls.spec.ts b/tests/browser/scene-controls.spec.ts
index 66be98e..b1b1b0c 100644
--- a/tests/browser/scene-controls.spec.ts
+++ b/tests/browser/scene-controls.spec.ts
@@ -10,6 +10,37 @@ test('keeps the decorative world separate from the semantic reading path', async
   await expect(page.locator('main#portfolio-content')).toBeVisible();
 });
 
+test('keeps the desktop identity and navigation in a paint layer above the world', async ({ page, distUrl }) => {
+  await page.setViewportSize({ width: 1440, height: 900 });
+  await page.goto(distUrl, { waitUntil: 'domcontentloaded' });
+
+  const layers = await page.evaluate(() => {
+    const world = document.querySelector<HTMLElement>('.journey-world');
+    const header = document.querySelector<HTMLElement>('.site-header');
+    const heading = document.querySelector<HTMLElement>('.site-header h1');
+    const navigation = document.querySelector<HTMLElement>('.site-navigation');
+    if (!world || !header || !heading || !navigation) throw new Error('Missing top-screen structure');
+    const worldStyle = getComputedStyle(world);
+    const headerStyle = getComputedStyle(header);
+    return {
+      worldZ: Number(worldStyle.zIndex),
+      headerZ: Number(headerStyle.zIndex),
+      headerPosition: headerStyle.position,
+      headingVisible: heading.getBoundingClientRect().width > 0 && heading.getBoundingClientRect().height > 0,
+      navigationVisible: navigation.getBoundingClientRect().width > 0 && navigation.getBoundingClientRect().height > 0,
+      headerOpacity: Number.parseFloat(headerStyle.backgroundColor.match(/[\d.]+(?=\))/gu)?.at(-1) ?? '1'),
+    };
+  });
+
+  expect(layers).toMatchObject({
+    headerPosition: 'relative',
+    headingVisible: true,
+    navigationVisible: true,
+  });
+  expect(layers.headerZ).toBeGreaterThan(layers.worldZ);
+  expect(layers.headerOpacity).toBeGreaterThanOrEqual(0.94);
+});
+
 test('provides native motion and quality controls with visible state', async ({ page, distUrl }) => {
   await page.goto(distUrl, { waitUntil: 'domcontentloaded' });
 
@@ -17,13 +48,21 @@ test('provides native motion and quality controls with visible state', async ({
   await expect(quality).toBeVisible();
   await expect(page.getByRole('button', { name: 'Pause motion' })).toBeVisible();
   await expect(page.getByRole('status')).toContainText('Motion:');
+  const canvas = page.locator('.journey-canvas');
+  const originalCanvas = await canvas.elementHandle();
+  const originalGeneration = await page.locator('.journey-world').getAttribute('data-scene-generation');
 
   await page.getByRole('button', { name: 'Pause motion' }).click();
   await expect(page.getByRole('button', { name: 'Resume motion' })).toBeVisible();
-  await expect(page.locator('.journey-canvas')).toHaveCount(0);
+  await expect(canvas).toHaveCount(1);
+  await expect(page.locator('.journey-world')).toHaveAttribute('data-scene-generation', originalGeneration ?? '');
+  expect(await originalCanvas?.evaluate((element) => element.isConnected)).toBe(true);
 
   await page.getByRole('button', { name: 'Resume motion' }).click();
   await expect(page.getByRole('button', { name: 'Pause motion' })).toBeVisible();
+  await expect(canvas).toHaveCount(1);
+  await expect(page.locator('.journey-world')).toHaveAttribute('data-scene-generation', originalGeneration ?? '');
+  expect(await originalCanvas?.evaluate((element) => element.isConnected)).toBe(true);
 
   await quality.selectOption('static');
   await expect(page.getByRole('button', { name: 'Enable motion' })).toBeVisible();
diff --git a/tests/unit/SceneCanvas.test.ts b/tests/unit/SceneCanvas.test.ts
index ef23d9e..e248a93 100644
--- a/tests/unit/SceneCanvas.test.ts
+++ b/tests/unit/SceneCanvas.test.ts
@@ -38,7 +38,10 @@ const policy = (overrides: Partial<MotionPolicy> = {}): MotionPolicy => ({
 
 describe('SceneCanvas', () => {
   beforeEach(() => sceneMocks.build.mockClear());
-  afterEach(() => vi.restoreAllMocks());
+  afterEach(() => {
+    vi.restoreAllMocks();
+    vi.unstubAllGlobals();
+  });
 
   it.each([
     ['reduced motion', policy({ allowSceneRequest: false, maximumTier: 'static', reason: 'system-reduce' })],
@@ -81,6 +84,36 @@ describe('SceneCanvas', () => {
     wrapper.unmount();
   });
 
+  it('forwards each complete scene frame interval to adaptive quality', async () => {
+    const callbacks = new Map<number, FrameRequestCallback>();
+    let nextFrameId = 1;
+    vi.stubGlobal('requestAnimationFrame', vi.fn((callback: FrameRequestCallback) => {
+      const id = nextFrameId++;
+      callbacks.set(id, callback);
+      return id;
+    }));
+    vi.stubGlobal('cancelAnimationFrame', vi.fn((id: number) => callbacks.delete(id)));
+    const sampleFrame = vi.fn();
+    const wrapper = mount(SceneCanvas, {
+      props: {
+        journey: journey(),
+        policy: policy(),
+        quality: 'high',
+        sceneDescription: 'A decorative night road behind the portfolio content.',
+        sampleFrame,
+      },
+    });
+    await flushPromises();
+    const frame = [...callbacks.entries()][0]!;
+    callbacks.delete(frame[0]);
+    vi.spyOn(performance, 'now').mockReturnValueOnce(2_000).mockReturnValueOnce(2_301);
+
+    frame[1](2_000);
+
+    expect(sampleFrame).toHaveBeenCalledWith(2_000, 2_301);
+    wrapper.unmount();
+  });
+
   it('falls back to the poster without obscuring semantic content after scene failure', async () => {
     sceneMocks.build.mockRejectedValueOnce(new Error('WebGL unavailable'));
     const wrapper = mount(SceneCanvas, {
@@ -123,6 +156,38 @@ describe('SceneCanvas', () => {
     expect(wrapper.get('img').isVisible()).toBe(true);
     wrapper.unmount();
   });
+
+  it('retains the same canvas and scene generation for a visitor pause and resume', async () => {
+    const wrapper = mount(SceneCanvas, {
+      props: {
+        journey: journey(),
+        policy: policy(),
+        quality: 'high',
+        sceneDescription: 'A decorative night road behind the portfolio content.',
+      },
+    });
+    await flushPromises();
+    const canvas = wrapper.get('canvas').element;
+    const runtime = await sceneMocks.build.mock.results[0]!.value;
+
+    await wrapper.setProps({
+      policy: policy({ allowSceneRequest: false, maximumTier: 'static', reason: 'visitor-pause' }),
+      quality: 'high',
+    });
+    await flushPromises();
+
+    expect(wrapper.get('canvas').element).toBe(canvas);
+    expect(runtime.dispose).not.toHaveBeenCalled();
+    expect(sceneMocks.build).toHaveBeenCalledTimes(1);
+
+    await wrapper.setProps({ policy: policy() });
+    await flushPromises();
+
+    expect(wrapper.get('canvas').element).toBe(canvas);
+    expect(runtime.dispose).not.toHaveBeenCalled();
+    expect(sceneMocks.build).toHaveBeenCalledTimes(1);
+    wrapper.unmount();
+  });
 });
 
 describe('DriveControls', () => {
diff --git a/tests/unit/adaptive-quality.test.ts b/tests/unit/adaptive-quality.test.ts
index eeadfca..363139e 100644
--- a/tests/unit/adaptive-quality.test.ts
+++ b/tests/unit/adaptive-quality.test.ts
@@ -7,6 +7,7 @@ import {
   type AdaptiveQualityController,
   type QualityDecision,
 } from '@/journey/adaptive-quality';
+import type { QualityTier } from '@/journey/motion-policy';
 
 afterEach(() => {
   vi.restoreAllMocks();
@@ -265,6 +266,26 @@ describe('useAdaptiveQuality', () => {
     expect(wrapper.vm.snapshot.epoch).toBeNull();
     expect(documentRemove).toHaveBeenCalledWith('visibilitychange', expect.any(Function), { passive: true });
   });
+
+  it('never lets a visitor request bypass the device-resolved maximum', async () => {
+    const { useAdaptiveQuality } = await import('@/composables/useAdaptiveQuality');
+    Object.defineProperty(document, 'visibilityState', {
+      configurable: true,
+      value: 'visible',
+    });
+    const maximum = ref<QualityTier>('low');
+    const sceneState = ref('running');
+    const pageLifecycle = ref<'active'>('active');
+    const wrapper = mount(defineComponent({
+      setup: () => useAdaptiveQuality({ maximum, sceneState, pageLifecycle, now: () => 0 }),
+      template: '<output />',
+    }));
+
+    expect(wrapper.vm.setMaximum('high', 'manual')).toBeNull();
+    expect(wrapper.vm.snapshot).toMatchObject({ maximum: 'low', actual: 'low' });
+
+    wrapper.unmount();
+  });
 });
 
 function feedWindow(
diff --git a/tests/unit/scene-lifecycle.test.ts b/tests/unit/scene-lifecycle.test.ts
index d464ef9..3acf365 100644
--- a/tests/unit/scene-lifecycle.test.ts
+++ b/tests/unit/scene-lifecycle.test.ts
@@ -89,6 +89,51 @@ describe('scene controller lifecycle', () => {
     expect(harness.generations[0]?.render).toHaveBeenCalledOnce();
   });
 
+  it('samples the complete scene update and render interval', async () => {
+    const harness = createHarness();
+    const renderedFrames: Array<{ start: number; end: number }> = [];
+    const controller = createSceneController({
+      ...harness.options,
+      onFrameRendered: (start, end) => renderedFrames.push({ start, end }),
+    });
+    await controller.start();
+    harness.generations[0]?.render.mockImplementation(() => {
+      harness.clock.now += 300;
+    });
+
+    harness.scheduler.flushFrame(2_000);
+
+    expect(renderedFrames).toEqual([{ start: 2_000, end: 2_300 }]);
+  });
+
+  it('retains the same complete generation and frame across a visitor pause', async () => {
+    const harness = createHarness();
+    const controller = createSceneController(harness.options);
+    await controller.start();
+    const running = controller.snapshot();
+
+    controller.pause();
+
+    expect(controller.snapshot()).toMatchObject({
+      state: { kind: 'paused', generation: running.currentGeneration, resumeNeedsLoad: false },
+      currentGeneration: running.currentGeneration,
+      canvasCount: 1,
+      rafCount: 0,
+    });
+    expect(harness.generations).toHaveLength(1);
+    expect(harness.generations[0]?.dispose).not.toHaveBeenCalled();
+
+    await controller.resume();
+
+    expect(controller.snapshot()).toMatchObject({
+      state: { kind: 'running', generation: running.currentGeneration },
+      currentGeneration: running.currentGeneration,
+      canvasCount: 1,
+      rafCount: 1,
+    });
+    expect(harness.generations).toHaveLength(1);
+  });
+
   it('copies serializable journey snapshots instead of retaining caller objects', async () => {
     const harness = createHarness();
     const controller = createSceneController(harness.options);
@@ -266,7 +311,15 @@ describe('scene controller lifecycle', () => {
     await controller.whenSettled();
 
     expect(controller.snapshot().overlay).toBe('active');
-    if (source === 'running' || source === 'paused') expect(controller.snapshot().state.kind).toBe('running');
+    if (source === 'running') expect(controller.snapshot().state.kind).toBe('running');
+    if (source === 'paused') {
+      expect(controller.snapshot()).toMatchObject({
+        state: { kind: 'paused', generation: 1, resumeNeedsLoad: false },
+        currentGeneration: 1,
+        rafCount: 0,
+      });
+      expect(harness.generations[0]?.dispose).not.toHaveBeenCalled();
+    }
     if (source === 'loading') expect(harness.buildContexts.length).toBe(beforeShow + 1);
     if (source === 'static') expect(controller.snapshot().state.kind).toBe('static');
     if (start && source === 'loading') {
diff --git a/tests/unit/scene-resources.test.ts b/tests/unit/scene-resources.test.ts
index 7b52116..15935a5 100644
--- a/tests/unit/scene-resources.test.ts
+++ b/tests/unit/scene-resources.test.ts
@@ -1,6 +1,9 @@
 import { describe, expect, it, vi } from 'vitest';
+import * as THREE from 'three';
 import { SceneResourceBag } from '@/scene/resources';
 import { renderQualityFor } from '@/scene/render-quality';
+import { createChaseCamera } from '@/scene/world/environment';
+import { createCar } from '@/scene/world/car';
 import { routeLabelFor } from '@/scene/world/sign';
 
 describe('SceneResourceBag', () => {
@@ -109,4 +112,48 @@ describe('scene render quality', () => {
     expect(routeLabelFor('infrastructure')).toBe('03 / INFRASTRUCTURE');
     expect(routeLabelFor('contact')).toBe('07 / DESTINATION');
   });
+
+  it('keeps the chase car recognizably wide and fully inside the desktop view', () => {
+    const resources = new SceneResourceBag();
+    const camera = createChaseCamera(16 / 9);
+    const car = createCar(resources);
+    car.group.updateMatrixWorld(true);
+    camera.updateMatrixWorld(true);
+    const bounds = new THREE.Box3().setFromObject(car.group);
+    const projected = boxCorners(bounds).map((point) => point.project(camera));
+    const minX = Math.min(...projected.map((point) => point.x));
+    const maxX = Math.max(...projected.map((point) => point.x));
+    const minY = Math.min(...projected.map((point) => point.y));
+    const maxY = Math.max(...projected.map((point) => point.y));
+
+    expect(maxX - minX).toBeGreaterThan(0.22);
+    expect(minY).toBeGreaterThan(-0.98);
+    expect(maxY).toBeLessThan(-0.15);
+    const silhouette = car.group.getObjectByName('rear-silhouette');
+    expect(silhouette).toBeDefined();
+    const silhouetteBounds = new THREE.Box3().setFromObject(silhouette);
+    expect(silhouetteBounds.max.x - silhouetteBounds.min.x).toBeGreaterThan(4);
+    expect(Math.max(
+      silhouette.material.color.r,
+      silhouette.material.color.g,
+      silhouette.material.color.b,
+    )).toBeGreaterThan(0.12);
+    resources.dispose();
+  });
 });
+
+function boxCorners(bounds: {
+  min: { x: number; y: number; z: number };
+  max: { x: number; y: number; z: number };
+}) {
+  return [
+    new THREE.Vector3(bounds.min.x, bounds.min.y, bounds.min.z),
+    new THREE.Vector3(bounds.min.x, bounds.min.y, bounds.max.z),
+    new THREE.Vector3(bounds.min.x, bounds.max.y, bounds.min.z),
+    new THREE.Vector3(bounds.min.x, bounds.max.y, bounds.max.z),
+    new THREE.Vector3(bounds.max.x, bounds.min.y, bounds.min.z),
+    new THREE.Vector3(bounds.max.x, bounds.min.y, bounds.max.z),
+    new THREE.Vector3(bounds.max.x, bounds.max.y, bounds.min.z),
+    new THREE.Vector3(bounds.max.x, bounds.max.y, bounds.max.z),
+  ];
+}
diff --git a/tests/unit/scroll-drive-controller.test.ts b/tests/unit/scroll-drive-controller.test.ts
index 65c7259..ab6693c 100644
--- a/tests/unit/scroll-drive-controller.test.ts
+++ b/tests/unit/scroll-drive-controller.test.ts
@@ -247,6 +247,33 @@ describe('useScrollDrive', () => {
       acceleration: expect.closeTo(0.6708070121920944, 14),
       driveSpeed: expect.closeTo(0.7300617499975173, 14),
     });
+    expect(callbacks).toHaveLength(1);
+
+    const decayingAccelerations: number[] = [];
+    let frameNow = 216;
+    while (callbacks.size > 0 && frameNow < 10_000) {
+      expect(callbacks).toHaveLength(1);
+      const decayFrame = [...callbacks.entries()][0]!;
+      callbacks.delete(decayFrame[0]);
+      decayFrame[1](frameNow);
+      await nextTick();
+      decayingAccelerations.push(drive().acceleration);
+      frameNow += 16;
+    }
+
+    expect(decayingAccelerations.length).toBeGreaterThan(1);
+    expect(decayingAccelerations.every((value, index) => (
+      index === 0 || value <= decayingAccelerations[index - 1]!
+    ))).toBe(true);
+    expect(decayingAccelerations.at(-1)).toBe(0);
+    expect(drive()).toMatchObject({
+      scrollY: 750,
+      routeProgress: 0.75,
+      direction: 0,
+      acceleration: 0,
+      driveSpeed: 0.18,
+    });
+    expect(callbacks).toHaveLength(0);
 
     window.dispatchEvent(new Event('scroll'));
     expect(callbacks).toHaveLength(1);