From 4fa61eb522724ceb010662ef69d5ed2edf558f89 Mon Sep 17 00:00:00 2001
From: Randall Stillwell <me@randallstillwell.com>
Date: Mon, 28 Jul 2025 10:38:02 -0500
Subject: [PATCH] =?UTF-8?q?=F0=9F=94=A5=20Replace=20with=20Realistic=20SVG?=
 =?UTF-8?q?=20Fire=20Logo?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

✨ Professional SVG Fire Animation:
- Complete rewrite using provided SVG flame paths
- 6 main flame layers with realistic organic shapes
- 3 small accent flames for detail
- Theme-aware color schemes (dark/light modes)

🎨 Advanced Animation System:
- Individual animation timings for each flame layer
- Staggered animation delays for natural movement
- Transform-origin set to bottom for realistic flickering
- Subtle scaling, rotation, and opacity variations

🌟 Enhanced Visual Effects:
- Drop-shadow glow effect with brightness animation
- Proper aspect ratio (1.5x height) for flame proportions
- Smooth color transitions between themes
- Professional flame colors matching real fire

The fire logo now uses authentic flame shapes and looks incredibly realistic
---
 components/AnimatedFireLogo.js | 444 ++++++++++++++++-----------------
 1 file changed, 211 insertions(+), 233 deletions(-)

diff --git a/components/AnimatedFireLogo.js b/components/AnimatedFireLogo.js
index 82ddac8..bcb2be2 100644
--- a/components/AnimatedFireLogo.js
+++ b/components/AnimatedFireLogo.js
@@ -3,287 +3,265 @@ import { useTheme } from '../lib/theme-context';
 export default function AnimatedFireLogo({ size = 80 }) {
   const { theme } = useTheme();
 
+  // Theme-aware colors
+  const colors = {
+    dark: {
+      flame1: '#FF6B35',
+      flame2: '#F7931E', 
+      flame3: '#FFF200',
+      flame4: '#FDBA16',
+      flame5: '#FF4500'
+    },
+    light: {
+      flame1: '#F36E21',
+      flame2: '#F6891F',
+      flame3: '#FFD04A', 
+      flame4: '#FDBA16',
+      flame5: '#D84315'
+    }
+  };
+
+  const currentColors = colors[theme] || colors.light;
+
   return (
     <div 
       className="fire-logo-container relative flex items-center justify-center"
-      style={{ width: size, height: size }}
+      style={{ width: size, height: size * 1.5 }}
     >
-      {/* Main Fire */}
-      <div className="fire-main">
-        <div className="fire-left"></div>
-        <div className="fire-main-flame"></div>
-        <div className="fire-right"></div>
-      </div>
-      
-      {/* Additional flames for more realistic effect */}
-      <div className="fire-particle fire-particle-1"></div>
-      <div className="fire-particle fire-particle-2"></div>
-      <div className="fire-particle fire-particle-3"></div>
-      
-      {/* Base/Log */}
-      <div className="fire-base"></div>
-      
+      <svg 
+        version="1.1" 
+        xmlns="http://www.w3.org/2000/svg" 
+        x="0px" 
+        y="0px"
+        width={size} 
+        height={size * 1.5} 
+        viewBox="0 0 125 189.864" 
+        className="fire-svg"
+      >
+        {/* Main flame paths */}
+        <path 
+          className="flame-main" 
+          fill={currentColors.flame1} 
+          d="M76.553,186.09c0,0-10.178-2.976-15.325-8.226s-9.278-16.82-9.278-16.82s-0.241-6.647-4.136-18.465
+          c0,0,3.357,4.969,5.103,9.938c0,0-5.305-21.086,1.712-30.418c7.017-9.333,0.571-35.654-2.25-37.534c0,0,13.07,5.64,19.875,47.54
+          c6.806,41.899,16.831,45.301,6.088,53.985"
+        />
+        
+        <path 
+          className="flame-main one" 
+          fill={currentColors.flame2} 
+          d="M61.693,122.257c4.117-15.4,12.097-14.487-11.589-60.872c0,0,32.016,10.223,52.601,63.123
+          c20.585,52.899-19.848,61.045-19.643,61.582c0.206,0.537-19.401-0.269-14.835-18.532S57.576,137.656,61.693,122.257z"
+        />
+        
+        <path 
+          className="flame-main two" 
+          fill={currentColors.flame3} 
+          d="M81.657,79.192c0,0,11.549,24.845,3.626,40.02c-7.924,15.175-21.126,41.899-0.425,64.998
+          C84.858,184.21,125.705,150.905,81.657,79.192z"
+        />
+        
+        <path 
+          className="flame-main three" 
+          fill={currentColors.flame4} 
+          d="M99.92,101.754c0,0-23.208,47.027-12.043,80.072c0,0,32.741-16.073,20.108-45.79
+          C95.354,106.319,99.92,114.108,99.92,101.754z"
+        />
+        
+        <path 
+          className="flame-main four" 
+          fill={currentColors.flame1} 
+          d="M103.143,105.917c0,0,8.927,30.753-1.043,46.868c-9.969,16.115-14.799,29.041-14.799,29.041
+          S134.387,164.603,103.143,105.917z"
+        />
+        
+        <path 
+          className="flame-main five" 
+          fill={currentColors.flame4} 
+          d="M62.049,104.171c0,0-15.645,67.588,10.529,77.655C98.753,191.894,69.033,130.761,62.049,104.171z"
+        />
+        
+        {/* Small accent flames */}
+        <path 
+          className="flame" 
+          fill={currentColors.flame5} 
+          d="M101.011,112.926c0,0,8.973,10.519,4.556,16.543C99.37,129.735,106.752,117.406,101.011,112.926z"
+        />
+        
+        <path 
+          className="flame one" 
+          fill={currentColors.flame5} 
+          d="M55.592,126.854c0,0-3.819,13.29,2.699,16.945C64.038,141.48,55.907,132.263,55.592,126.854z"
+        />
+        
+        <path 
+          className="flame two" 
+          fill={currentColors.flame5} 
+          d="M54.918,104.595c0,0-3.959,6.109-1.24,8.949C56.93,113.256,52.228,107.329,54.918,104.595z"
+        />
+      </svg>
+
       <style jsx>{`
         .fire-logo-container {
-          transform: scale(${size / 80});
+          filter: drop-shadow(0 0 10px rgba(255, 107, 53, 0.3));
         }
         
-        .fire-main {
-          position: relative;
-          width: 60px;
-          height: 60px;
+        .fire-svg {
+          animation: fire-glow 3s ease-in-out infinite alternate;
         }
         
-        .fire-left, .fire-main-flame, .fire-right {
-          position: absolute;
-          bottom: 0;
+        .flame-main {
+          animation: flame-flicker-main 1.5s ease-in-out infinite alternate;
+          transform-origin: center bottom;
         }
         
-        .fire-main-flame {
-          width: 40px;
-          height: 50px;
-          left: 50%;
-          transform: translateX(-50%);
-          background: ${theme === 'dark' 
-            ? 'linear-gradient(to top, #ff6b35 0%, #f7931e 50%, #fff200 100%)'
-            : 'linear-gradient(to top, #d84315 0%, #ff6f00 50%, #ffab40 100%)'
-          };
-          clip-path: polygon(
-            20% 100%, 
-            10% 85%, 
-            5% 70%, 
-            15% 55%, 
-            8% 40%, 
-            20% 30%, 
-            15% 15%, 
-            30% 10%, 
-            25% 0%, 
-            45% 5%, 
-            50% 0%, 
-            65% 8%, 
-            70% 15%, 
-            85% 30%, 
-            92% 40%, 
-            85% 55%, 
-            95% 70%, 
-            90% 85%, 
-            80% 100%
-          );
-          animation: fire-flicker 0.8s ease-in-out infinite alternate;
-          z-index: 2;
+        .flame-main.one {
+          animation: flame-flicker-one 1.8s ease-in-out infinite alternate;
+          animation-delay: -0.3s;
         }
         
-        .fire-left {
-          width: 30px;
-          height: 40px;
-          left: 5px;
-          background: ${theme === 'dark'
-            ? 'linear-gradient(to top, #ff4500 0%, #ff6b35 50%, #ffa500 100%)'
-            : 'linear-gradient(to top, #bf360c 0%, #d84315 50%, #ff6f00 100%)'
-          };
-          clip-path: polygon(
-            25% 100%, 
-            15% 80%, 
-            5% 60%, 
-            20% 45%, 
-            10% 25%, 
-            25% 15%, 
-            20% 5%, 
-            40% 0%, 
-            60% 10%, 
-            80% 20%, 
-            90% 35%, 
-            85% 50%, 
-            95% 65%, 
-            85% 80%, 
-            75% 100%
-          );
-          animation: fire-flicker-left 1.2s ease-in-out infinite alternate;
-          z-index: 1;
+        .flame-main.two {
+          animation: flame-flicker-two 1.2s ease-in-out infinite alternate;
+          animation-delay: -0.6s;
         }
         
-        .fire-right {
-          width: 25px;
-          height: 35px;
-          right: 8px;
-          background: ${theme === 'dark'
-            ? 'linear-gradient(to top, #ff4500 0%, #ff6b35 50%, #ffa500 100%)'
-            : 'linear-gradient(to top, #bf360c 0%, #d84315 50%, #ff6f00 100%)'
-          };
-          clip-path: polygon(
-            20% 100%, 
-            10% 85%, 
-            5% 65%, 
-            15% 50%, 
-            8% 30%, 
-            25% 20%, 
-            20% 5%, 
-            40% 0%, 
-            65% 8%, 
-            85% 25%, 
-            90% 40%, 
-            85% 60%, 
-            95% 75%, 
-            88% 90%, 
-            80% 100%
-          );
-          animation: fire-flicker-right 1s ease-in-out infinite alternate;
-          z-index: 1;
+        .flame-main.three {
+          animation: flame-flicker-three 2.1s ease-in-out infinite alternate;
+          animation-delay: -0.9s;
         }
         
-        .fire-particle {
-          position: absolute;
-          border-radius: 50%;
-          opacity: 0.7;
+        .flame-main.four {
+          animation: flame-flicker-four 1.7s ease-in-out infinite alternate;
+          animation-delay: -0.2s;
         }
         
-        .fire-particle-1 {
-          width: 8px;
-          height: 8px;
-          top: 10px;
-          left: 15px;
-          background: ${theme === 'dark' ? '#fff200' : '#ffab40'};
-          clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
-          animation: particle-float-1 2s ease-in-out infinite;
+        .flame-main.five {
+          animation: flame-flicker-five 1.9s ease-in-out infinite alternate;
+          animation-delay: -0.7s;
         }
         
-        .fire-particle-2 {
-          width: 6px;
-          height: 6px;
-          top: 15px;
-          right: 12px;
-          background: ${theme === 'dark' ? '#ffa500' : '#ff6f00'};
-          clip-path: polygon(25% 0%, 75% 0%, 100% 25%, 100% 75%, 75% 100%, 25% 100%, 0% 75%, 0% 25%);
-          animation: particle-float-2 1.8s ease-in-out infinite;
+        .flame {
+          animation: flame-small 1.0s ease-in-out infinite alternate;
+          transform-origin: center bottom;
         }
         
-        .fire-particle-3 {
-          width: 4px;
-          height: 4px;
-          top: 8px;
-          left: 50%;
-          transform: translateX(-50%);
-          background: ${theme === 'dark' ? '#ff6b35' : '#d84315'};
-          clip-path: polygon(20% 0%, 80% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0% 20%);
-          animation: particle-float-3 2.2s ease-in-out infinite;
+        .flame.one {
+          animation: flame-small-one 1.3s ease-in-out infinite alternate;
+          animation-delay: -0.4s;
         }
         
-        .fire-base {
-          position: absolute;
-          bottom: -5px;
-          left: 50%;
-          transform: translateX(-50%);
-          width: 50px;
-          height: 8px;
-          background: ${theme === 'dark' 
-            ? 'linear-gradient(to right, #8b4513, #a0522d, #8b4513)'
-            : 'linear-gradient(to right, #5d4037, #6d4c41, #5d4037)'
-          };
-          border-radius: 50%;
-          opacity: 0.8;
+        .flame.two {
+          animation: flame-small-two 0.9s ease-in-out infinite alternate;
+          animation-delay: -0.1s;
         }
         
-        @keyframes fire-flicker {
+        @keyframes fire-glow {
           0% {
-            transform: translateX(-50%) rotate(-1deg) scaleY(1) scaleX(1);
-            filter: hue-rotate(0deg);
-          }
-          25% {
-            transform: translateX(-50%) rotate(0.5deg) scaleY(1.08) scaleX(0.95);
-            filter: hue-rotate(2deg);
-          }
-          50% {
-            transform: translateX(-50%) rotate(1deg) scaleY(1.05) scaleX(1.02);
-            filter: hue-rotate(-1deg);
-          }
-          75% {
-            transform: translateX(-50%) rotate(-0.5deg) scaleY(0.98) scaleX(1.05);
-            filter: hue-rotate(3deg);
+            filter: drop-shadow(0 0 10px rgba(255, 107, 53, 0.3)) brightness(1);
           }
           100% {
-            transform: translateX(-50%) rotate(-1deg) scaleY(0.95) scaleX(0.98);
-            filter: hue-rotate(0deg);
+            filter: drop-shadow(0 0 15px rgba(255, 107, 53, 0.5)) brightness(1.1);
           }
         }
         
-        @keyframes fire-flicker-left {
+        @keyframes flame-flicker-main {
           0% {
-            transform: rotate(-2deg) scaleY(1) scaleX(1);
-            filter: hue-rotate(0deg);
-          }
-          25% {
-            transform: rotate(1deg) scaleY(1.12) scaleX(0.88);
-            filter: hue-rotate(-2deg);
-          }
-          50% {
-            transform: rotate(2deg) scaleY(1.08) scaleX(0.92);
-            filter: hue-rotate(1deg);
-          }
-          75% {
-            transform: rotate(-1deg) scaleY(0.95) scaleX(1.08);
-            filter: hue-rotate(-1deg);
-          }
-          100% {
-            transform: rotate(-2deg) scaleY(0.90) scaleX(1.12);
-            filter: hue-rotate(0deg);
-          }
-        }
-        
-        @keyframes fire-flicker-right {
-          0% {
-            transform: rotate(1.5deg) scaleY(1) scaleX(1);
-            filter: hue-rotate(0deg);
-          }
-          25% {
-            transform: rotate(-0.8deg) scaleY(1.1) scaleX(1.05);
-            filter: hue-rotate(2deg);
-          }
-          50% {
-            transform: rotate(-2deg) scaleY(1.05) scaleX(0.95);
-            filter: hue-rotate(-1deg);
-          }
-          75% {
-            transform: rotate(2.5deg) scaleY(0.92) scaleX(1.08);
-            filter: hue-rotate(1deg);
-          }
-          100% {
-            transform: rotate(3deg) scaleY(0.95) scaleX(0.90);
-            filter: hue-rotate(0deg);
-          }
-        }
-        
-        @keyframes particle-float-1 {
-          0%, 100% {
-            transform: translateY(0px) scale(1) rotate(0deg);
-            opacity: 0.7;
-          }
-          50% {
-            transform: translateY(-15px) scale(1.2) rotate(180deg);
+            transform: scaleY(1) scaleX(1) rotate(0deg);
             opacity: 1;
           }
+          100% {
+            transform: scaleY(1.05) scaleX(0.98) rotate(-1deg);
+            opacity: 0.95;
+          }
         }
         
-        @keyframes particle-float-2 {
-          0%, 100% {
-            transform: translateY(0px) scale(1) rotate(0deg);
-            opacity: 0.6;
-          }
-          50% {
-            transform: translateY(-12px) scale(0.8) rotate(-180deg);
+        @keyframes flame-flicker-one {
+          0% {
+            transform: scaleY(1) scaleX(1) rotate(0deg);
             opacity: 0.9;
           }
+          100% {
+            transform: scaleY(1.08) scaleX(0.95) rotate(1deg);
+            opacity: 1;
+          }
         }
         
-        @keyframes particle-float-3 {
-          0%, 100% {
-            transform: translateX(-50%) translateY(0px) scale(1) rotate(0deg);
+        @keyframes flame-flicker-two {
+          0% {
+            transform: scaleY(1) scaleX(1) rotate(0deg);
+            opacity: 1;
+          }
+          100% {
+            transform: scaleY(1.03) scaleX(1.02) rotate(-0.5deg);
+            opacity: 0.92;
+          }
+        }
+        
+        @keyframes flame-flicker-three {
+          0% {
+            transform: scaleY(1) scaleX(1) rotate(0deg);
+            opacity: 0.95;
+          }
+          100% {
+            transform: scaleY(1.06) scaleX(0.97) rotate(1.5deg);
+            opacity: 1;
+          }
+        }
+        
+        @keyframes flame-flicker-four {
+          0% {
+            transform: scaleY(1) scaleX(1) rotate(0deg);
+            opacity: 1;
+          }
+          100% {
+            transform: scaleY(1.04) scaleX(1.01) rotate(-1.2deg);
+            opacity: 0.88;
+          }
+        }
+        
+        @keyframes flame-flicker-five {
+          0% {
+            transform: scaleY(1) scaleX(1) rotate(0deg);
+            opacity: 0.93;
+          }
+          100% {
+            transform: scaleY(1.07) scaleX(0.96) rotate(0.8deg);
+            opacity: 1;
+          }
+        }
+        
+        @keyframes flame-small {
+          0% {
+            transform: scaleY(1) scaleX(1);
             opacity: 0.8;
           }
-          50% {
-            transform: translateX(-50%) translateY(-18px) scale(1.5) rotate(360deg);
+          100% {
+            transform: scaleY(1.15) scaleX(0.9);
             opacity: 1;
           }
         }
+        
+        @keyframes flame-small-one {
+          0% {
+            transform: scaleY(1) scaleX(1);
+            opacity: 0.9;
+          }
+          100% {
+            transform: scaleY(1.12) scaleX(0.95);
+            opacity: 0.7;
+          }
+        }
+        
+        @keyframes flame-small-two {
+          0% {
+            transform: scaleY(1) scaleX(1);
+            opacity: 1;
+          }
+          100% {
+            transform: scaleY(1.18) scaleX(0.88);
+            opacity: 0.85;
+          }
+        }
       `}</style>
     </div>
   );