From dc55ef8a54ecac40509f397446c0baddeb780fb0 Mon Sep 17 00:00:00 2001
From: archipelago <archipelago@localhost>
Date: Tue, 21 Jul 2026 13:27:04 -0400
Subject: [PATCH] fix(kiosk): restore tab-change animations with 2D transitions

The onboarding-era :global(html.kiosk-mode .view-wrapper) transform:none
rule also matched the dashboard's route wrappers, freezing every list<->
detail depth transition into a jump cut on kiosk. Scope that rule to the
onboarding viewport and give the dashboard kiosk-safe 2D equivalents
(scale + opacity, no translateZ/blur/preserve-3d) that the software
compositor can animate.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 neode-ui/src/views/OnboardingWrapper.vue      |  6 +++-
 .../src/views/dashboard/dashboard-styles.css  | 32 +++++++++++++++++++
 2 files changed, 37 insertions(+), 1 deletion(-)

diff --git a/neode-ui/src/views/OnboardingWrapper.vue b/neode-ui/src/views/OnboardingWrapper.vue
index 58c14fef..571d89b6 100644
--- a/neode-ui/src/views/OnboardingWrapper.vue
+++ b/neode-ui/src/views/OnboardingWrapper.vue
@@ -699,8 +699,12 @@ video.bg-layer {
 :global(html.kiosk-mode .perspective-container) {
   perspective: none !important;
 }
+/* Scoped to the onboarding viewport: a bare `.view-wrapper` match also killed
+   the dashboard's route transitions on kiosk (transform:none !important beats
+   the transition classes), freezing every tab change. The dashboard has its
+   own kiosk-safe 2D transition overrides in dashboard-styles.css. */
 :global(html.kiosk-mode .bg-layer),
-:global(html.kiosk-mode .view-wrapper) {
+:global(html.kiosk-mode .onb-viewport .view-wrapper) {
   transform: none !important;
   transform-style: flat !important;
   backface-visibility: visible !important;
diff --git a/neode-ui/src/views/dashboard/dashboard-styles.css b/neode-ui/src/views/dashboard/dashboard-styles.css
index 88a99005..8c428b41 100644
--- a/neode-ui/src/views/dashboard/dashboard-styles.css
+++ b/neode-ui/src/views/dashboard/dashboard-styles.css
@@ -756,6 +756,38 @@ html.kiosk-mode .dashboard-view .bg-layer {
   transition: opacity 0.45s ease;
 }
 
+/* Kiosk: keep tab changes animated with cheap 2D moves. The 3D depth
+   transitions (translateZ + blur + preserve-3d) drop frames / paint black
+   under the software compositor, and the onboarding-era blanket
+   `transform: none` on .view-wrapper killed tab motion entirely. Plain 2D
+   scale + opacity composites fine there. */
+html.kiosk-mode .depth-forward-enter-active.view-wrapper,
+html.kiosk-mode .depth-forward-leave-active.view-wrapper,
+html.kiosk-mode .depth-back-enter-active.view-wrapper,
+html.kiosk-mode .depth-back-leave-active.view-wrapper {
+  transition: transform 0.45s ease, opacity 0.45s ease;
+  transform-style: flat;
+  backface-visibility: visible;
+  filter: none !important;
+}
+html.kiosk-mode .depth-forward-enter-from.view-wrapper,
+html.kiosk-mode .depth-back-leave-to.view-wrapper {
+  transform: scale(0.94);
+  filter: none !important;
+}
+html.kiosk-mode .depth-forward-leave-to.view-wrapper,
+html.kiosk-mode .depth-back-enter-from.view-wrapper {
+  transform: scale(1.05);
+  filter: none !important;
+}
+html.kiosk-mode .depth-forward-enter-to.view-wrapper,
+html.kiosk-mode .depth-forward-leave-from.view-wrapper,
+html.kiosk-mode .depth-back-enter-to.view-wrapper,
+html.kiosk-mode .depth-back-leave-from.view-wrapper {
+  transform: scale(1);
+  filter: none !important;
+}
+
 /* Background glitch effect layers - World Fair style */
 .bg-glitch-layer-1,
 .bg-glitch-layer-2,