Enhance audio and UI interactions for improved user experience

- Added a prebuild script in package.json to copy audio assets for smoother audio playback.
- Updated App.vue to ensure the router is ready before displaying content, addressing issues with hard refreshes.
- Introduced a "Tap to start" feature in SplashScreen.vue to comply with browser autoplay policies for audio.
- Enhanced playLoopStart function in useLoginSounds.ts to utilize the Web Audio API for better audio control.
- Removed unnecessary redirect in router index.ts for cleaner routing logic.
- Improved Dashboard.vue and Login.vue styles for better visual hierarchy and user engagement during transitions.

neode-ui/src/views/Dashboard.vue

@@ -69,7 +69,7 @@
     <!-- Sidebar - Desktop Only, animates in at end with separate parts -->
     <aside
       data-controller-zone="sidebar"
-      class="hidden md:flex w-[256px] flex-shrink-0 relative flex-col"
+      class="hidden md:flex w-[256px] flex-shrink-0 relative flex-col z-10"
       :class="{ 'sidebar-animate': showZoomIn }"
     >
       <div class="sidebar-shell">
@@ -127,7 +127,7 @@
     <!-- Main Content (Xbox: Right goes here from sidebar) -->
     <main
       data-controller-zone="main"
-      class="flex-1 overflow-hidden relative pb-20 md:pb-0 glass-piece"
+      class="flex-1 overflow-hidden relative pb-20 md:pb-0 glass-piece z-10"
       :class="{ 'glass-throw-main': showZoomIn }"
     >
       <!-- Connection Status Banner -->
@@ -1011,9 +1011,11 @@ function getTransitionName(currentRoute: any) {
   }
 }
 
-/* When not animating, show everything */
+/* When not animating, show everything (direct load / hard refresh) */
 aside:not(.sidebar-animate) .sidebar-shell {
   border-color: rgba(255, 255, 255, 0.18);
+  opacity: 1;
+  transform: none;
 }
 aside:not(.sidebar-animate) .sidebar-inner,
 aside:not(.sidebar-animate) .sidebar-logo,

neode-ui/src/views/Login.vue

@@ -1,10 +1,10 @@
 <template>
-  <div class="min-h-screen flex items-center justify-center p-4 relative z-10">
+  <div class="min-h-screen flex items-center justify-center p-4 relative z-10 login-fly-perspective">
     <div class="w-full max-w-md relative z-20">
-      <!-- Login Card -->
+      <!-- Login Card - flies towards user on success -->
       <div
-        class="glass-card p-8 pt-20 relative login-card overflow-visible transition-all duration-300"
-        :class="{ 'whoosh-away': whooshAway }"
+        class="glass-card p-8 pt-20 relative login-card overflow-visible"
+        :class="{ 'login-fly-towards': whooshAway }"
       >
         <!-- Logo - half in, half out of container -->
         <div class="absolute -top-10 left-1/2 -translate-x-1/2 z-10">
@@ -202,7 +202,7 @@ async function handleSetup() {
     playLoginSuccessWhoosh()
     loginTransition.setJustLoggedIn(true)
     await store.login(password.value)
-    await new Promise(r => setTimeout(r, 350))
+    await new Promise(r => setTimeout(r, 520))
     router.replace({ name: 'home' })
   } catch (err) {
     whooshAway.value = false
@@ -225,7 +225,7 @@ async function handleLogin() {
     whooshAway.value = true
     playLoginSuccessWhoosh()
     loginTransition.setJustLoggedIn(true)
-    await new Promise(r => setTimeout(r, 350))
+    await new Promise(r => setTimeout(r, 520))
     router.replace({ name: 'home' })
   } catch (err) {
     whooshAway.value = false
@@ -245,10 +245,39 @@ function replayIntro() {
 </script>
 
 <style scoped>
-/* Whoosh accent - login card blurs and shrinks as whoosh plays */
-.whoosh-away {
-  transform: scale(0.92);
-  filter: blur(6px);
-  opacity: 0.6;
+/* Perspective for 3D fly effect */
+.login-fly-perspective {
+  perspective: 1200px;
+  perspective-origin: center center;
+}
+
+.login-card {
+  transform-style: preserve-3d;
+  transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),
+              opacity 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),
+              filter 0.5s ease-out;
+}
+
+/* Fly towards user - card zooms forward as it transitions out */
+.login-fly-towards {
+  animation: login-fly-towards 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
+}
+
+@keyframes login-fly-towards {
+  0% {
+    transform: translateZ(0) scale(1);
+    opacity: 1;
+    filter: blur(0);
+  }
+  60% {
+    transform: translateZ(180px) scale(1.4);
+    opacity: 0.95;
+    filter: blur(2px);
+  }
+  100% {
+    transform: translateZ(400px) scale(2);
+    opacity: 0;
+    filter: blur(8px);
+  }
 }
 </style>