From aac17e1263a27be03be407ee667ef32be76f5feb Mon Sep 17 00:00:00 2001
From: Jeff Loiselle <jeff@loiselles.com>
Date: Mon, 22 Dec 2025 10:56:58 -0600
Subject: [PATCH] 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 +
 app/globals.css                  | 96 +++++++++++++++++++++++++++++---
 app/page.tsx                     |  4 ++
 3 files changed, 93 insertions(+), 8 deletions(-)

diff --git a/app/api/direct-download/route.ts b/app/api/direct-download/route.ts
index 83e8cea..7046f9b 100644
--- a/app/api/direct-download/route.ts
+++ b/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';
diff --git a/app/globals.css b/app/globals.css
index 949415f..6799d8a 100644
--- a/app/globals.css
+++ b/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");
+  }
+}
\ No newline at end of file
diff --git a/app/page.tsx b/app/page.tsx
index 5381c36..687f6a1 100644
--- a/app/page.tsx
+++ b/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={{