UI: Add custom glowing cursors matching the app theme

public/cursor-default.svg

@@ -0,0 +1,18 @@
+<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <linearGradient id="grad" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" stop-color="#e879f9" />
+      <stop offset="100%" stop-color="#8b5cf6" />
+    </linearGradient>
+    <filter id="glow" x="-20%" y="-20%" width="140%" height="140%">
+      <feGaussianBlur stdDeviation="1.5" result="blur" />
+      <feComposite in="SourceGraphic" in2="blur" operator="over" />
+    </filter>
+  </defs>
+  <path d="M4 2 L19 14 L12.5 15.5 L15.5 22.5 L12 24 L8.5 17.5 L3 21 Z" 
+        fill="#070710" 
+        stroke="url(#grad)" 
+        stroke-width="1.5" 
+        stroke-linejoin="round"
+        filter="url(#glow)"/>
+</svg>

public/cursor-pointer.svg

@@ -0,0 +1,18 @@
+<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <linearGradient id="gradPointer" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" stop-color="#06b6d4" />
+      <stop offset="100%" stop-color="#8b5cf6" />
+    </linearGradient>
+    <filter id="glowPointer" x="-20%" y="-20%" width="140%" height="140%">
+      <feGaussianBlur stdDeviation="2" result="blur" />
+      <feComposite in="SourceGraphic" in2="blur" operator="over" />
+    </filter>
+  </defs>
+  <path d="M4 2 L19 14 L12.5 15.5 L15.5 22.5 L12 24 L8.5 17.5 L3 21 Z" 
+        fill="#070710" 
+        stroke="url(#gradPointer)" 
+        stroke-width="2" 
+        stroke-linejoin="round"
+        filter="url(#glowPointer)"/>
+</svg>

public/favicon.svg

@@ -1,8 +1,8 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="none">
   <defs>
-    <linearGradient id="g" x1="0" y1="0" x2="32" y2="32" gradientUnits="userSpaceOnUse">
+    <linearGradient id="g" x1="0" y1="0" x2="0" y2="32" gradientUnits="userSpaceOnUse">
-      <stop offset="0" stop-color="#7c3aed"/>
+      <stop offset="0" stop-color="#e879f9"/>
-      <stop offset="1" stop-color="#06b6d4"/>
+      <stop offset="1" stop-color="#8b5cf6"/>
     </linearGradient>
   </defs>
   <rect width="32" height="32" rx="7" fill="#080810"/>

src/components/Footer.tsx

@@ -5,7 +5,7 @@ export function Footer() {
   return (
     <footer className="shrink-0 h-8 flex items-center px-6 border-t border-border bg-bg/50 backdrop-blur-sm">
       <p className="text-[10px] font-semibold text-fg-muted uppercase tracking-wider">
-        <span className="gradient-text font-bold">MelodyMuse</span>
+        <span className="gradient-text-animated font-bold">MelodyMuse</span>
         <span className="mx-1.5 opacity-40">·</span>
         {t.appSubtitle}
       </p>

src/index.css

@@ -37,6 +37,15 @@
         height: 100%;
         overflow: hidden;
         font-family: 'Inter', system-ui, sans-serif;
+        cursor: url('/cursor-default.svg') 4 2, auto;
+    }
+
+    a, button, [role="button"], select, .cursor-pointer {
+        cursor: url('/cursor-pointer.svg') 4 2, pointer !important;
+    }
+
+    input, textarea {
+        cursor: text;
     }
 
     body {
@@ -146,7 +155,7 @@
         -webkit-background-clip: text;
         background-clip: text;
         color: transparent;
-        animation: gradient-shift 6s linear infinite;
+        animation: gradient-shift 20s linear infinite;
     }
 
     .gradient-bg {
@@ -194,7 +203,7 @@
         animation: blob-drift-3 26s ease-in-out infinite;
     }
 
-    /* Animated logo bars (5 bars, matching favicon heights, slow) */
+    /* Animated logo bars (5 bars, matching favicon heights, smooth scaleY) */
     .music-bar {
         display: inline-block;
         width: 3px;
@@ -203,19 +212,18 @@
         transform-origin: bottom center;
         opacity: 0.9;
     }
-    .music-bar-1 { animation: bar-bounce-1 8.0s ease-in-out infinite; }
+    .music-bar-1 { height: 12px; animation: bar-scale 8.0s ease-in-out infinite; }
-    .music-bar-2 { animation: bar-bounce-2 11.0s ease-in-out infinite; }
+    .music-bar-2 { height: 22px; animation: bar-scale 11.0s ease-in-out infinite; }
-    .music-bar-3 { animation: bar-bounce-3 9.0s ease-in-out infinite; }
+    .music-bar-3 { height: 10px; animation: bar-scale 9.0s ease-in-out infinite; }
-    .music-bar-4 { animation: bar-bounce-4 13.0s ease-in-out infinite; }
+    .music-bar-4 { height: 16px; animation: bar-scale 13.0s ease-in-out infinite; }
-    .music-bar-5 { animation: bar-bounce-5 10.0s ease-in-out infinite; }
+    .music-bar-5 { height: 8px; animation: bar-scale 10.0s ease-in-out infinite; }
 }
 
 /* Keyframes */
-@keyframes bar-bounce-1 { 0%, 100% { height: 6px; } 50% { height: 12px; } }
+@keyframes bar-scale {
-@keyframes bar-bounce-2 { 0%, 100% { height: 11px; } 50% { height: 22px; } }
+    0%, 100% { transform: scaleY(0.5); }
-@keyframes bar-bounce-3 { 0%, 100% { height: 5px; } 50% { height: 10px; } }
+    50% { transform: scaleY(1); }
-@keyframes bar-bounce-4 { 0%, 100% { height: 8px; } 50% { height: 16px; } }
+}
-@keyframes bar-bounce-5 { 0%, 100% { height: 4px; } 50% { height: 8px; } }
 
 @keyframes gradient-shift {
     0% { background-position: 0% 50%; }