From a960addaadce62737be0257ccf2d291e8f71eada Mon Sep 17 00:00:00 2001
From: dilgenfritz <drewilgenfritz@gmail.com>
Date: Mon, 3 Nov 2025 06:24:36 -0600
Subject: [PATCH] Step 5: Add iconic synthwave 3D perspective grid

- Added .neon-grid element with 3D CSS transform
- Grid uses perspective(1000px) and rotateX(60deg) for floor effect
- Magenta grid lines (#ff00ff) at 50px spacing
- Added gridFloat animation for subtle floating motion
- Grid positioned behind content with proper z-index
- Creates authentic 80s synthwave/outrun grid floor
- Added neon-grid div to HTML structure

TEST: Refresh to see the classic synthwave perspective grid floor effect
---
 index.html            |  1 +
 src/styles/styles.css | 20 ++++++++++++++++++++
 2 files changed, 21 insertions(+)

diff --git a/index.html b/index.html
index eb3f5cb..1c9f091 100644
--- a/index.html
+++ b/index.html
@@ -41,6 +41,7 @@
         <!-- Game Header -->
         <header class="game-header hero-header">
             <div class="hero-background"></div>
+            <div class="neon-grid"></div>
             <div class="hero-content">
                 <div class="hero-title-section">
                     <h1 class="hero-title">
diff --git a/src/styles/styles.css b/src/styles/styles.css
index af57a78..b6ec5b1 100644
--- a/src/styles/styles.css
+++ b/src/styles/styles.css
@@ -193,6 +193,26 @@ body {
     animation: synthwaveMove 6s linear infinite;
 }
 
+.neon-grid {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 120%;
+    height: 120%;
+    transform: translate(-50%, -50%) perspective(1000px) rotateX(60deg);
+    background-image: 
+        linear-gradient(rgba(255, 0, 255, 0.3) 1px, transparent 1px),
+        linear-gradient(90deg, rgba(255, 0, 255, 0.3) 1px, transparent 1px);
+    background-size: 50px 50px;
+    animation: gridFloat 8s ease-in-out infinite alternate;
+    z-index: 1;
+}
+
+@keyframes gridFloat {
+    from { transform: translate(-50%, -50%) perspective(1000px) rotateX(60deg) translateZ(0); }
+    to { transform: translate(-50%, -50%) perspective(1000px) rotateX(60deg) translateZ(20px); }
+}
+
 @keyframes synthwaveMove {
     0% { transform: translateY(0); }
     100% { transform: translateY(100px); }