From 32327b1cef818ff866a3896c42964218f007deb9 Mon Sep 17 00:00:00 2001
From: jared <jnevans@gmail.com>
Date: Wed, 28 Jan 2026 17:57:24 +0000
Subject: [PATCH] Add orange and red glow colors to car mode news cards

- Last 2 cards now display red glow
- 3 cards before the last 2 display orange glow
- Remaining cards keep yellow glow (default)
- Fixed animation conflict by separating glow into explicit classes

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 news-app/src/main.js   | 12 +++++++++++-
 news-app/src/style.css | 36 ++++++++++++++++++++++++++++++++++++
 2 files changed, 47 insertions(+), 1 deletion(-)

diff --git a/news-app/src/main.js b/news-app/src/main.js
index 53be35a..d59a815 100644
--- a/news-app/src/main.js
+++ b/news-app/src/main.js
@@ -217,8 +217,18 @@ function renderEmpty() {
 
 function renderCarModeCard(group, index, total) {
   const fadeClass = state.isTransitioning ? 'fading-out' : ''
+  // Determine glow color based on position from end
+  // Last 2 cards: red glow
+  // 3 cards before the last 2 (3rd, 4th, 5th from end): orange glow
+  // Others: yellow glow (default)
+  let glowClass = 'glow-yellow'
+  if (index >= total - 2) {
+    glowClass = 'glow-red'
+  } else if (index >= total - 5) {
+    glowClass = 'glow-orange'
+  }
   return `
-    <div class="car-mode-card ${fadeClass} w-full max-w-[350px] sm:max-w-3xl bg-black/90 backdrop-blur-md rounded-[2rem] shadow-2xl overflow-hidden flex flex-col max-h-[92vh] sm:max-h-[92vh] transition-all duration-500 mb-2 border border-white/10">
+    <div class="car-mode-card ${fadeClass} ${glowClass} w-full max-w-[350px] sm:max-w-3xl bg-black/90 backdrop-blur-md rounded-[2rem] shadow-2xl overflow-hidden flex flex-col max-h-[92vh] sm:max-h-[92vh] transition-all duration-500 mb-2 border border-white/10">
       ${group.image ? `
         <div class="h-48 sm:h-80 shrink-0 overflow-hidden relative group-image-container">
           <img src="${group.image}" alt="" class="w-full h-full object-cover" onerror="this.parentElement.style.display='none'" />
diff --git a/news-app/src/style.css b/news-app/src/style.css
index 3b95284..21c8de2 100644
--- a/news-app/src/style.css
+++ b/news-app/src/style.css
@@ -95,6 +95,10 @@
 
 /* Car Mode Card Transitions */
 .car-mode-card {
+  animation: cardFadeIn 0.5s ease-out forwards;
+}
+
+.car-mode-card.glow-yellow {
   animation: cardFadeIn 0.5s ease-out forwards, cardGlow 4s ease-out forwards;
 }
 
@@ -125,6 +129,38 @@
   }
 }
 
+@keyframes cardGlowOrange {
+  0% {
+    box-shadow: 0 0 80px 30px rgba(251, 146, 60, 0.95); /* Orange bold start */
+  }
+  10% {
+    box-shadow: 0 0 100px 40px rgba(251, 146, 60, 0.8); /* Orange max spread */
+  }
+  100% {
+    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5); /* Settle to dark shadow */
+  }
+}
+
+@keyframes cardGlowRed {
+  0% {
+    box-shadow: 0 0 80px 30px rgba(239, 68, 68, 0.95); /* Red bold start */
+  }
+  10% {
+    box-shadow: 0 0 100px 40px rgba(239, 68, 68, 0.8); /* Red max spread */
+  }
+  100% {
+    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5); /* Settle to dark shadow */
+  }
+}
+
+.car-mode-card.glow-orange {
+  animation: cardFadeIn 0.5s ease-out forwards, cardGlowOrange 4s ease-out forwards;
+}
+
+.car-mode-card.glow-red {
+  animation: cardFadeIn 0.5s ease-out forwards, cardGlowRed 4s ease-out forwards;
+}
+
 @keyframes cardFadeOut {
   from {
     opacity: 1;