🔥 Enhanced Fire Logo with Sharp Realistic Flames

✨ Sharp Flame Edges:
- Replaced rounded borders with custom clip-path polygons
- Created jagged, realistic flame shapes for all fire elements
- Sharp pointed tips and irregular edges like real fire
- Different polygon patterns for main flame, left flame, and right flame

🎨 Enhanced Animation:
- Added more complex flickering with 4 keyframe stages
- Enhanced scaling and rotation variations
- Added subtle hue-rotate filters for color shifting
- More realistic flame movement patterns

🌟 Improved Particles:
- Sharp-edged particles using octagonal clip-paths
- Added rotation animations to particle floating
- Different polygon shapes for visual variety
- More dynamic movement with combined transforms

The fire logo now looks much more realistic with sharp, jagged flame edges that flicker naturally

components/AnimatedFireLogo.js

@@ -37,7 +37,6 @@ export default function AnimatedFireLogo({ size = 80 }) {
         .fire-left, .fire-main-flame, .fire-right {
           position: absolute;
           bottom: 0;
-          border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
         }
         
         .fire-main-flame {
@@ -49,6 +48,27 @@ export default function AnimatedFireLogo({ size = 80 }) {
             ? '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;
         }
@@ -61,6 +81,23 @@ export default function AnimatedFireLogo({ size = 80 }) {
             ? '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;
         }
@@ -73,6 +110,23 @@ export default function AnimatedFireLogo({ size = 80 }) {
             ? '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;
         }
@@ -89,6 +143,7 @@ export default function AnimatedFireLogo({ size = 80 }) {
           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;
         }
         
@@ -98,6 +153,7 @@ export default function AnimatedFireLogo({ size = 80 }) {
           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;
         }
         
@@ -108,6 +164,7 @@ export default function AnimatedFireLogo({ size = 80 }) {
           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;
         }
         
@@ -128,69 +185,102 @@ export default function AnimatedFireLogo({ size = 80 }) {
         
         @keyframes fire-flicker {
           0% {
-            transform: translateX(-50%) rotate(-2deg) scaleY(1);
+            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);
+            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);
           }
           100% {
-            transform: translateX(-50%) rotate(-1deg) scaleY(0.95);
+            transform: translateX(-50%) rotate(-1deg) scaleY(0.95) scaleX(0.98);
+            filter: hue-rotate(0deg);
           }
         }
         
         @keyframes fire-flicker-left {
           0% {
-            transform: rotate(-3deg) scaleY(1) scaleX(1);
+            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.1) scaleX(0.9);
+            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(-1deg) scaleY(0.9) scaleX(1.1);
+            transform: rotate(-2deg) scaleY(0.90) scaleX(1.12);
+            filter: hue-rotate(0deg);
           }
         }
         
         @keyframes fire-flicker-right {
           0% {
-            transform: rotate(2deg) scaleY(1) scaleX(1);
+            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(-1deg) scaleY(1.05) scaleX(1.1);
+            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.9);
+            transform: rotate(3deg) scaleY(0.95) scaleX(0.90);
+            filter: hue-rotate(0deg);
           }
         }
         
         @keyframes particle-float-1 {
           0%, 100% {
-            transform: translateY(0px) scale(1);
+            transform: translateY(0px) scale(1) rotate(0deg);
             opacity: 0.7;
           }
           50% {
-            transform: translateY(-15px) scale(1.2);
+            transform: translateY(-15px) scale(1.2) rotate(180deg);
             opacity: 1;
           }
         }
         
         @keyframes particle-float-2 {
           0%, 100% {
-            transform: translateY(0px) scale(1);
+            transform: translateY(0px) scale(1) rotate(0deg);
             opacity: 0.6;
           }
           50% {
-            transform: translateY(-12px) scale(0.8);
+            transform: translateY(-12px) scale(0.8) rotate(-180deg);
             opacity: 0.9;
           }
         }
         
         @keyframes particle-float-3 {
           0%, 100% {
-            transform: translateX(-50%) translateY(0px) scale(1);
+            transform: translateX(-50%) translateY(0px) scale(1) rotate(0deg);
             opacity: 0.8;
           }
           50% {
-            transform: translateX(-50%) translateY(-18px) scale(1.5);
+            transform: translateX(-50%) translateY(-18px) scale(1.5) rotate(360deg);
             opacity: 1;
           }
         }