From 6f8449d39ba425d1f0fdb90370531a495665e302 Mon Sep 17 00:00:00 2001
From: LucaP <luca.pislaru@protonmail.com>
Date: Sun, 11 Oct 2026 01:25:53 +0300
Subject: [PATCH] style: fade the exit plate in over 160 ms under reduced
 motion

---
 src/components/JourneyHud.vue | 3 +++
 src/styles/gantry.css         | 8 ++++++++
 2 files changed, 11 insertions(+)

diff --git a/src/components/JourneyHud.vue b/src/components/JourneyHud.vue
index 27de407..2cce841 100644
--- a/src/components/JourneyHud.vue
+++ b/src/components/JourneyHud.vue
@@ -20,10 +20,13 @@ const next = computed(() =>
    a route rule that fills along its lower edge. */
 const route = computed(() => Math.min(1, Math.max(0, props.journey.routeProgress)));
 const routePercent = computed(() => `${Math.round(route.value * 100)}%`);
+/* The plate is keyed by chapter, so a new chapter is a new element: under
+   reduced motion it fades in over 160 ms (gantry.css) instead of swapping. */
 </script>
 
 <template>
   <aside
+    :key="journey.activeSectionId"
     class="journey-hud"
     aria-hidden="true"
     :data-exit="exit"
diff --git a/src/styles/gantry.css b/src/styles/gantry.css
index b13e6d3..af87955 100644
--- a/src/styles/gantry.css
+++ b/src/styles/gantry.css
@@ -821,6 +821,14 @@ html[data-expressway='live'] .portfolio-section[data-layout='project-stage'] {
   html .journey-hud,
   html .site-navigation li::after { transition: none; }
 }
+/* No sign flies in under reduced motion, so the plate itself carries the
+   change of chapter: a 160 ms opacity fade, no movement. */
+@media (prefers-reduced-motion: reduce) {
+  html .journey-hud { animation: plate-swap 160ms ease-out both; }
+}
+@keyframes plate-swap {
+  from { opacity: 0; }
+}
 @media (forced-colors: active) {
   html .site-navigation::before { background: Canvas; }
   html .site-navigation::after { color: CanvasText; }