Add animation keyframes for grid and shimmer effects, implement mouse position tracking for dynamic background, and create direct download API for video/audio files. Update types for download requests and responses.

app/globals.css

@@ -145,6 +145,18 @@
   }
 }
 
+@keyframes grid-wave {
+  0% {
+    transform: perspective(100vh) rotateX(60deg) translateY(0) scale(2);
+  }
+  50% {
+    transform: perspective(120vh) rotateX(50deg) translateY(-2%) scale(2.2);
+  }
+  100% {
+    transform: perspective(100vh) rotateX(60deg) translateY(0) scale(2);
+  }
+}
+
 @keyframes slide-up {
   from {
     opacity: 0;
@@ -165,6 +177,15 @@
   }
 }
 
+@keyframes shimmer-text-sweep {
+  0% {
+    background-position: -200% 0;
+  }
+  100% {
+    background-position: 200% 0;
+  }
+}
+
 @layer base {
   * {
     @apply border-border outline-ring/50;
@@ -190,6 +211,24 @@
     animation: pulse-glow 8s ease-in-out infinite;
   }
 
+  /* Retro-futuristic flexible grid */
+  .background-grid {
+    position: fixed;
+    top: -50%;
+    left: -50%;
+    width: 200%;
+    height: 200%;
+    z-index: -2;
+    background-image: 
+      linear-gradient(to right, oklch(1 0 0 / 0.03) 1px, transparent 1px),
+      linear-gradient(to bottom, oklch(1 0 0 / 0.03) 1px, transparent 1px);
+    background-size: 60px 60px;
+    transform-origin: 50% 50%;
+    animation: grid-wave 20s ease-in-out infinite both alternate;
+    mask-image: radial-gradient(circle at center, black 0%, transparent 70%);
+    pointer-events: none;
+  }
+
   /* Floating orbs */
   .floating-orb {
     position: absolute;
@@ -246,6 +285,7 @@
 
   /* Gradient text */
   .gradient-text {
+    position: relative;
     background: linear-gradient(135deg, 
       oklch(0.85 0.18 280) 0%, 
       oklch(0.75 0.22 300) 50%, 
@@ -257,6 +297,30 @@
     color: transparent;
     animation: gradient-shift 6s ease infinite;
   }
+  
+  .gradient-text::after {
+    content: attr(data-text);
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 2;
+    background: linear-gradient(
+      110deg,
+      transparent 35%,
+      oklch(1 0 0 / 0.3) 45%,
+      oklch(1 0 0 / 0.7) 50%,
+      oklch(1 0 0 / 0.3) 55%,
+      transparent 65%
+    );
+    background-size: 200% 100%;
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
+    animation: shimmer-text-sweep 4s linear infinite;
+    pointer-events: none;
+  }
 
   /* Shimmer effect for loading */
   .shimmer {