Enhance background effects with new subtle animations and layers, including noise, particles, and wave lines. Update global styles for improved grid perspective and animation timing. Add YouTube URL validation to direct download API.

app/api/direct-download/route.ts

@@ -1,5 +1,6 @@
 import { NextRequest, NextResponse } from 'next/server';
 import { downloadVideo } from '@/lib/youtube';
+import { isValidYouTubeUrl } from '@/lib/utils';
 import type { DownloadRequest, AudioFormat, VideoFormat, FormatType } from '@/lib/types';
 import { createReadStream } from 'fs';
 import { stat } from 'fs/promises';

app/globals.css

@@ -211,21 +211,21 @@
     animation: pulse-glow 8s ease-in-out infinite;
   }
 
-  /* Retro-futuristic flexible grid */
+  /* Subtle perspective grid */
   .background-grid {
     position: fixed;
     top: -50%;
     left: -50%;
     width: 200%;
     height: 200%;
-    z-index: -2;
+    z-index: -6;
     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;
+      linear-gradient(to right, oklch(1 0 0 / 0.015) 1px, transparent 1px),
+      linear-gradient(to bottom, oklch(1 0 0 / 0.015) 1px, transparent 1px);
+    background-size: 80px 80px;
     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%);
+    animation: grid-wave 25s ease-in-out infinite both alternate;
+    mask-image: radial-gradient(circle at center, black 0%, transparent 60%);
     pointer-events: none;
   }
 
@@ -414,4 +414,84 @@
       0 8px 32px oklch(0.50 0.18 150 / 0.15),
       inset 0 1px 0 oklch(0.70 0.15 150 / 0.1);
   }
-}
+
+  /* NEW: Background Effects - Subtle undulating waves */
+
+  @keyframes aurora-drift {
+    0%, 100% {
+      transform: translateY(0%) rotate(0deg) scale(1);
+      opacity: 0.4;
+    }
+    33% {
+      transform: translateY(-5%) rotate(1deg) scale(1.02);
+      opacity: 0.5;
+    }
+    66% {
+      transform: translateY(3%) rotate(-1deg) scale(0.98);
+      opacity: 0.35;
+    }
+  }
+
+  @keyframes wave-flow {
+    0% {
+      background-position: 0% 50%;
+    }
+    50% {
+      background-position: 100% 50%;
+    }
+    100% {
+      background-position: 0% 50%;
+    }
+  }
+
+  /* Soft aurora wave - the main subtle effect */
+  .bg-wave-lines {
+    position: fixed;
+    inset: 0;
+    z-index: 1;
+    background: 
+      linear-gradient(
+        135deg,
+        transparent 0%,
+        oklch(0.55 0.25 280 / 0.4) 25%,
+        transparent 40%,
+        oklch(0.50 0.22 320 / 0.35) 60%,
+        transparent 75%,
+        oklch(0.60 0.2 240 / 0.3) 90%,
+        transparent 100%
+      );
+    background-size: 200% 200%;
+    filter: blur(60px);
+    animation: wave-flow 20s ease-in-out infinite, aurora-drift 15s ease-in-out infinite;
+    pointer-events: none;
+  }
+
+  .bg-particles {
+    position: fixed;
+    inset: 0;
+    z-index: 0;
+    background: radial-gradient(
+      ellipse 80% 60% at 70% 20%,
+      oklch(0.6 0.25 280 / 0.35) 0%,
+      transparent 50%
+    ),
+    radial-gradient(
+      ellipse 60% 80% at 20% 80%,
+      oklch(0.55 0.22 200 / 0.3) 0%,
+      transparent 50%
+    );
+    filter: blur(50px);
+    animation: aurora-drift 25s ease-in-out infinite reverse;
+    pointer-events: none;
+  }
+
+  /* Very subtle noise texture */
+  .bg-noise {
+    position: fixed;
+    inset: 0;
+    z-index: 1000;
+    opacity: 0.015;
+    pointer-events: none;
+    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
+  }
+}

app/page.tsx

@@ -123,6 +123,10 @@ export default function Home() {
       {/* Animated background */}
       <div className="animated-bg" />
       
+      <div className="bg-noise" />
+      <div className="bg-particles" />
+      <div className="bg-wave-lines" />
+      
       <div 
         className="fixed inset-0 z-[-2] pointer-events-none transition-transform duration-1000 cubic-bezier(0.1, 0.8, 0.2, 1)"
         style={{