Update UI components and enhance controller navigation for improved user experience

- Updated styles in various components to change color themes from cyan to yellow for better visual consistency.
- Enhanced focus management in controller navigation to improve accessibility and user interaction.
- Added new data attributes for controller navigation in multiple views to streamline user interactions with app containers.
- Improved audio handling by removing unused functions in useLoginSounds.ts, optimizing the codebase.

neode-ui/src/components/AnimatedLogo.vue

@@ -1,20 +1,13 @@
 <template>
-  <div class="logo-gradient-border flex-shrink-0 inline-block overflow-hidden">
-    <!-- Neode logo - white or coloured -->
+  <div class="logo-gradient-border flex-shrink-0 inline-block overflow-hidden" :class="sizeClass">
+    <!-- Neode logo - always white -->
     <svg
-      class="w-14 h-14 block logo-svg"
+      class="block logo-svg"
       viewBox="0 0 1024 1024"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
       aria-label="Neode"
     >
-      <defs>
-        <linearGradient :id="gradientId" x1="0%" y1="0%" x2="100%" y2="100%">
-          <stop offset="0%" stop-color="#f9aa4b" />
-          <stop offset="50%" stop-color="#f7931a" />
-          <stop offset="100%" stop-color="#e68a19" />
-        </linearGradient>
-      </defs>
       <rect width="1024" height="1024" fill="#030202" />
       <rect
         v-for="(r, i) in rects"
@@ -23,9 +16,8 @@
         :y="r.y"
         :width="r.w"
         :height="r.h"
-        :fill="mode === 'coloured' ? `url(#${gradientId})` : 'white'"
+        fill="white"
         class="logo-square"
-        :class="{ 'logo-square-coloured': mode === 'coloured' }"
         :style="{ '--delay': delays[i] + 'ms' }"
       />
     </svg>
@@ -33,9 +25,11 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onBeforeUnmount } from 'vue'
+const props = withDefaults(defineProps<{
+  size?: 'sm' | 'lg' | 'xl'
+}>(), { size: 'sm' })
 
-const gradientId = 'logo-color-' + Math.random().toString(36).slice(2, 11)
+const sizeClass = props.size === 'xl' ? 'w-48 h-48 sm:w-64 sm:h-64 md:w-80 md:h-80' : props.size === 'lg' ? 'w-32 h-32 sm:w-48 sm:h-48' : 'w-14 h-14'
 
 // Parsed from favico-black.svg path - 20 rects
 const rects = [
@@ -61,26 +55,9 @@ const rects = [
   { x: 595.379, y: 633.989, w: 71.007, h: 72.011 },
 ]
 
-// Stagger delays (ms) - spread over ~4.5s load phase
-const delays = [0, 2341, 467, 1890, 312, 3456, 123, 2789, 567, 4123, 901, 1456, 234, 3789, 2678, 456, 847, 2912, 1891, 423]
-
-type Mode = 'normal' | 'coloured'
-const mode = ref<Mode>('normal')
-let cycleCount = 0
-let intervalId: ReturnType<typeof setInterval> | null = null
-
-const CYCLE_MS = 10000
-
-onMounted(() => {
-  intervalId = setInterval(() => {
-    cycleCount++
-    mode.value = cycleCount % 4 === 3 ? 'coloured' : 'normal'
-  }, CYCLE_MS)
-})
-
-onBeforeUnmount(() => {
-  if (intervalId) clearInterval(intervalId)
-})
+// Stagger delays (ms) - row-by-row top-to-bottom, left-to-right for a clean reveal
+// Row 1 (y~318): 0,1,2,3 | Row 2 (y~396): 4,5 | Row 3 (y~476): 6-11 | Row 4 (y~555): 12-15 | Row 5 (y~634): 16-19
+const delays = [0, 100, 200, 300, 400, 500, 600, 700, 800, 900, 1000, 1100, 1200, 1300, 1400, 1500, 1600, 1700, 1800, 1900]
 </script>
 
 <style scoped>
@@ -90,20 +67,15 @@ onBeforeUnmount(() => {
 
 .logo-square {
   opacity: 0;
-  animation: logo-square-in 10s cubic-bezier(0.4, 0, 0.2, 1) infinite;
+  animation: logo-square-in 3s ease-out infinite;
   animation-delay: var(--delay, 0ms);
   animation-fill-mode: both;
 }
 
-.logo-square-coloured {
-  filter: drop-shadow(0 0 2px rgba(247, 147, 26, 0.4));
-}
-
-/* 0–45%: squares load in. 45–100%: full logo visible */
+/* Fade in only - no scale/position change. Squares stay fixed. */
 @keyframes logo-square-in {
-  0% { opacity: 0; transform: scale(0.95); }
-  4% { opacity: 1; transform: scale(1); }
-  45% { opacity: 1; transform: scale(1); }
-  100% { opacity: 1; transform: scale(1); }
+  0% { opacity: 0; }
+  15% { opacity: 1; }
+  100% { opacity: 1; }
 }
 </style>