From d3e4980b8fd92c36b9954bfc127b4d22f98a49c5 Mon Sep 17 00:00:00 2001
From: Randall Stillwell <me@randallstillwell.com>
Date: Sat, 26 Jul 2025 09:17:22 -0500
Subject: [PATCH] =?UTF-8?q?=F0=9F=94=A5=20Primary=20Red=20Add=20Button=20+?=
 =?UTF-8?q?=20Static=20Rarity=20Shadows?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

🎨 Add Button Color Update:
- Changed main add button from wood brown to ember red
- Updated 'Own' option to match ember red theme
- Added static ember red shadow with ring effect
- Consistent fire-themed primary action color

⚡ Performance: Removed All Pulsing Animations:
- Eliminated mythic-pulse animation (3s infinite)
- Eliminated rare-pulse animation (2.5s infinite)
- Eliminated uncommon-pulse animation (2s infinite)
- Eliminated enchanted-pulse animation (2s infinite)
- Removed all @keyframes pulse definitions

✨ Static Rarity Shadow System:
- Mythic/Legendary: Enhanced golden glow (static)
- Rare: Enhanced purple glow (static)
- Uncommon: Enhanced blue glow (static)
- Enchanted: Multi-color rainbow glow (static)
- All shadows now use consistent opacity levels

🚀 Performance Benefits:
- Eliminated continuous CSS animations on every card
- Reduced GPU usage from constant pulse effects
- Smoother scrolling and hover interactions
- Better battery life on mobile devices
- Cleaner, more professional appearance

🎯 Visual Improvements:
- More vibrant static shadows than pulsing minimums
- Consistent visual hierarchy with static effects
- Primary red add button stands out appropriately
- Cleaner, less distracting card presentation

The cards page should now be much more performant without the constant pulsing animations! 🔥⚡
---
 components/CardItem.js |  7 ++--
 styles/globals.css     | 90 ++++++------------------------------------
 2 files changed, 15 insertions(+), 82 deletions(-)

diff --git a/components/CardItem.js b/components/CardItem.js
index 10b1737..bc2291e 100644
--- a/components/CardItem.js
+++ b/components/CardItem.js
@@ -54,7 +54,7 @@ function ExpandingAddButton({ card, onAddToCollection, onAddToDeck, onMarkAsOwne
           <button
             onClick={(e) => handleOptionClick(e, onMarkAsOwned)}
             className="p-1.5 rounded-md shadow-lg transition-all duration-150 hover:scale-105 flex items-center space-x-1 text-xs whitespace-nowrap"
-            style={{ backgroundColor: 'var(--accent-wood)', color: 'white' }}
+            style={{ backgroundColor: 'var(--accent-ember)', color: 'white' }}
             title="Mark as Owned"
           >
             <svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -70,8 +70,9 @@ function ExpandingAddButton({ card, onAddToCollection, onAddToDeck, onMarkAsOwne
         onClick={handleMainClick}
         className="p-1.5 rounded-md shadow-lg transition-all duration-150 hover:scale-105 relative"
         style={{ 
-          backgroundColor: isExpanded ? 'var(--accent-ember)' : 'var(--accent-wood)',
-          color: 'white'
+          backgroundColor: 'var(--accent-ember)',
+          color: 'white',
+          boxShadow: '0 0 0 2px var(--accent-ember), 0 4px 6px -1px rgba(216, 67, 21, 0.3)'
         }}
         title={isExpanded ? "Add to Collection" : "Show Options"}
       >
diff --git a/styles/globals.css b/styles/globals.css
index a01c0d9..eeade37 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -463,25 +463,9 @@ body {
 /* Mythic/Legendary - Golden glow */
 .rarity-glow-mythic {
   box-shadow: 
-    0 0 20px rgba(251, 191, 36, 0.4),
-    0 0 40px rgba(251, 191, 36, 0.3),
-    0 0 60px rgba(251, 191, 36, 0.2);
-  animation: mythic-pulse 3s ease-in-out infinite;
-}
-
-@keyframes mythic-pulse {
-  0%, 100% { 
-    box-shadow: 
-      0 0 20px rgba(251, 191, 36, 0.4),
-      0 0 40px rgba(251, 191, 36, 0.3),
-      0 0 60px rgba(251, 191, 36, 0.2);
-  }
-  50% { 
-    box-shadow: 
-      0 0 30px rgba(251, 191, 36, 0.6),
-      0 0 60px rgba(251, 191, 36, 0.4),
-      0 0 90px rgba(251, 191, 36, 0.3);
-  }
+    0 0 25px rgba(251, 191, 36, 0.5),
+    0 0 50px rgba(251, 191, 36, 0.35),
+    0 0 75px rgba(251, 191, 36, 0.25);
 }
 
 .rarity-particles-mythic::before {
@@ -503,25 +487,9 @@ body {
 /* Rare - Purple glow */
 .rarity-glow-rare {
   box-shadow: 
-    0 0 15px rgba(168, 85, 247, 0.4),
-    0 0 30px rgba(168, 85, 247, 0.3),
-    0 0 45px rgba(168, 85, 247, 0.2);
-  animation: rare-pulse 2.5s ease-in-out infinite;
-}
-
-@keyframes rare-pulse {
-  0%, 100% { 
-    box-shadow: 
-      0 0 15px rgba(168, 85, 247, 0.4),
-      0 0 30px rgba(168, 85, 247, 0.3),
-      0 0 45px rgba(168, 85, 247, 0.2);
-  }
-  50% { 
-    box-shadow: 
-      0 0 25px rgba(168, 85, 247, 0.5),
-      0 0 50px rgba(168, 85, 247, 0.4),
-      0 0 75px rgba(168, 85, 247, 0.3);
-  }
+    0 0 20px rgba(168, 85, 247, 0.45),
+    0 0 40px rgba(168, 85, 247, 0.35),
+    0 0 60px rgba(168, 85, 247, 0.25);
 }
 
 .rarity-particles-rare::before {
@@ -542,22 +510,8 @@ body {
 /* Uncommon - Blue glow */
 .rarity-glow-uncommon {
   box-shadow: 
-    0 0 10px rgba(96, 165, 250, 0.3),
-    0 0 20px rgba(96, 165, 250, 0.2);
-  animation: uncommon-pulse 2s ease-in-out infinite;
-}
-
-@keyframes uncommon-pulse {
-  0%, 100% { 
-    box-shadow: 
-      0 0 10px rgba(96, 165, 250, 0.3),
-      0 0 20px rgba(96, 165, 250, 0.2);
-  }
-  50% { 
-    box-shadow: 
-      0 0 15px rgba(96, 165, 250, 0.4),
-      0 0 30px rgba(96, 165, 250, 0.3);
-  }
+    0 0 12px rgba(96, 165, 250, 0.35),
+    0 0 25px rgba(96, 165, 250, 0.25);
 }
 
 .rarity-particles-uncommon::before {
@@ -577,31 +531,9 @@ body {
 /* Enchanted/Secret - Pink/Rainbow glow */
 .rarity-glow-enchanted {
   box-shadow: 
-    0 0 25px rgba(244, 114, 182, 0.5),
-    0 0 50px rgba(244, 114, 182, 0.4),
-    0 0 75px rgba(244, 114, 182, 0.3);
-  animation: enchanted-pulse 2s ease-in-out infinite;
-}
-
-@keyframes enchanted-pulse {
-  0%, 100% { 
-    box-shadow: 
-      0 0 25px rgba(244, 114, 182, 0.5),
-      0 0 50px rgba(244, 114, 182, 0.4),
-      0 0 75px rgba(244, 114, 182, 0.3);
-  }
-  33% { 
-    box-shadow: 
-      0 0 30px rgba(168, 85, 247, 0.5),
-      0 0 60px rgba(168, 85, 247, 0.4),
-      0 0 90px rgba(168, 85, 247, 0.3);
-  }
-  66% { 
-    box-shadow: 
-      0 0 30px rgba(59, 130, 246, 0.5),
-      0 0 60px rgba(59, 130, 246, 0.4),
-      0 0 90px rgba(59, 130, 246, 0.3);
-  }
+    0 0 28px rgba(244, 114, 182, 0.5),
+    0 0 55px rgba(168, 85, 247, 0.35),
+    0 0 80px rgba(59, 130, 246, 0.25);
 }
 
 .rarity-particles-enchanted::before {