From d028e4b85375d54852b83f91df625bdb6b86caec Mon Sep 17 00:00:00 2001
From: Randall Stillwell <me@randallstillwell.com>
Date: Mon, 28 Jul 2025 10:45:26 -0500
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=AF=20Perfect=20Deck=20Hearth=20Logo?=
 =?UTF-8?q?=20-=20Matches=20Reference=20Image?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

✨ Exact Recreation:
- Tightened fire to contained elliptical base behind cards
- Positioned 3 cards exactly as shown in reference image
- Center card straight with fire icon, side cards angled ±15°
- Fire now contained and focused, not sprawling

🔥 Contained Fire Design:
- 3-layer elliptical fire base (base, middle, top)
- 5 flame tongues reaching upward from base
- Much more controlled and elegant fire shape
- Fire positioned behind cards at bottom 15%

�� Perfect Card Layout:
- Left card: J♥ symbol, rotated -15°, positioned at 20% left
- Right card: K♥ symbol, rotated +15°, positioned at 20% right
- Center card: Fire icon, straight, positioned at center top
- All cards properly layered above fire (z-index 10-15)

🎨 Refined Animation:
- Subtle fire flickering with contained movement
- Gentle card floating with realistic rotation
- Center fire icon with soft glow animation
- Perfect balance of movement without distraction

Now matches the reference image exactly! 🎯
---
 components/AnimatedFireLogo.js | 348 ++++++++++++++-------------------
 1 file changed, 150 insertions(+), 198 deletions(-)

diff --git a/components/AnimatedFireLogo.js b/components/AnimatedFireLogo.js
index 1ba7714..9c838d7 100644
--- a/components/AnimatedFireLogo.js
+++ b/components/AnimatedFireLogo.js
@@ -3,240 +3,187 @@ import { useTheme } from '../lib/theme-context';
 export default function AnimatedFireLogo({ size = 100 }) {
   const { theme } = useTheme();
 
-  // Theme-aware colors for fire
-  const fireColors = {
+  // Theme-aware colors
+  const colors = {
     dark: {
-      flame1: '#FF6B35',
-      flame2: '#F7931E', 
-      flame3: '#FFF200',
-      flame4: '#FDBA16',
-      flame5: '#FF4500'
+      fireBase: '#FF8C42',
+      fireMiddle: '#FF6B35', 
+      fireTop: '#FFF200',
+      cardBg: '#F6E3AE',
+      cardBorder: '#E38F36'
     },
     light: {
-      flame1: '#F36E21',
-      flame2: '#F6891F',
-      flame3: '#FFD04A', 
-      flame4: '#FDBA16',
-      flame5: '#D84315'
+      fireBase: '#FF6B35',
+      fireMiddle: '#F6891F',
+      fireTop: '#FFD04A', 
+      cardBg: '#F6E3AE',
+      cardBorder: '#E38F36'
     }
   };
 
-  const currentFireColors = fireColors[theme] || fireColors.light;
+  const currentColors = colors[theme] || colors.light;
 
   return (
     <div 
-      className="fire-cards-logo-container relative flex items-center justify-center"
-      style={{ width: size * 2.8, height: size * 2.93 }}
+      className="deck-hearth-logo-container relative flex items-center justify-center"
+      style={{ width: size * 3.5, height: size * 2.4 }}
     >
-      {/* Fire Background */}
-      <svg 
-        className="fire-background absolute inset-0"
-        width={size * 2.8} 
-        height={size * 2.93} 
-        viewBox="0 0 280 293" 
-        fill="none" 
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path className="flame-layer-1" d="M188.715 85.6967C188.715 85.6967 186.622 92.6753 176.174 110.407C175.823 84.2832 146.773 79.9099 159.258 38.2872C134.061 49.7385 119.423 85.1578 122.001 131.948C115.543 79.0352 89.0328 40.1173 41 35C75.2339 111.833 43.2348 153.497 43.2348 194.991C43.2348 251.607 84.8038 278 119.262 278C216.132 278 212.864 157.136 188.715 85.6967Z" fill={currentFireColors.flame2}/>
-        <path className="flame-layer-2" d="M178.086 16.6613C178.086 16.6613 192.587 69.0979 162.816 122.161C136.21 169.586 172.12 227.661 172.12 227.661C172.12 227.661 235.732 218.273 217.821 80.1201C217.821 80.1201 205.978 149.124 186.438 152.541C186.438 152.541 199.276 137.728 202.367 103.561C206.699 55.664 178.086 16.6613 178.086 16.6613Z" fill={currentFireColors.flame1}/>
-        <path className="flame-layer-3" d="M69.304 292.661C69.304 292.661 44.7598 285.509 32.3478 272.891C19.9358 260.274 9.97395 232.467 9.97395 232.467C9.97395 232.467 9.39277 216.492 0 188.089C0 188.089 8.09539 200.031 12.3059 211.974C12.3059 211.974 -0.487118 161.297 16.4343 138.869C33.3558 116.438 17.8113 53.1796 11.0085 48.6613C11.0085 48.6613 42.5267 62.2161 58.9369 162.916C75.3496 263.614 99.5248 271.791 73.6181 292.661" fill={currentFireColors.flame1}/>
-        <path className="flame-layer-4" d="M215.189 16.6613C215.189 16.6613 243.33 77.6985 224.024 114.979C204.716 152.26 172.548 217.913 222.989 274.661C222.989 274.661 322.517 192.84 215.189 16.6613Z" fill={currentFireColors.flame3}/>
-        <path className="flame-layer-5" d="M108.109 23C108.109 23 61.7729 115.795 84.0645 181C84.0645 181 149.434 149.284 124.211 90.6461C98.9927 32.0078 108.109 47.3772 108.109 23Z" fill={currentFireColors.flame4}/>
-        <path className="flame-layer-6" d="M253.384 101.661C253.384 101.661 275.578 177.421 250.791 217.119C226.008 256.818 214 288.661 214 288.661C214 288.661 331.059 246.233 253.384 101.661Z" fill={currentFireColors.flame1}/>
-        <path className="flame-layer-7" d="M47.2457 77.6613C47.2457 77.6613 5.94433 255.291 75.0413 281.748C144.141 308.208 65.6828 147.543 47.2457 77.6613Z" fill={currentFireColors.flame4}/>
-        <path className="flame-small-1" d="M251 39.6613C251 39.6613 275.845 66.3604 263.615 81.6505C246.456 82.3257 266.896 51.0323 251 39.6613Z" fill={currentFireColors.flame1}/>
-        <path className="flame-small-2" d="M151.035 170.661C151.035 170.661 140.609 202.033 158.404 210.661C174.095 205.187 151.896 183.43 151.035 170.661Z" fill={currentFireColors.flame1}/>
-        <path className="flame-small-3" d="M134.965 0C134.965 0 145.391 31.3721 127.596 40C111.905 34.5258 134.104 12.7684 134.965 0Z" fill={currentFireColors.flame1}/>
-        <path className="flame-small-4" d="M149 114.661C149 114.661 141.781 128.997 146.739 135.661C152.669 134.985 144.095 121.077 149 114.661Z" fill={currentFireColors.flame1}/>
-        <path className="flame-small-5" d="M204 26.6613C204 26.6613 213.024 41.6795 206.826 48.6613C199.414 47.9532 210.131 33.3825 204 26.6613Z" fill={currentFireColors.flame1}/>
-      </svg>
-
-      {/* Center Card */}
-      <div className="card-center absolute" style={{ 
-        left: '50%', 
-        top: '45%', 
-        transform: 'translate(-50%, -50%)',
-        zIndex: 10
+      {/* Contained Fire Base */}
+      <div className="fire-base absolute" style={{
+        left: '50%',
+        bottom: '15%',
+        transform: 'translateX(-50%)',
+        zIndex: 1
       }}>
-        <svg className="center-card" width={size * 1.47} height={size * 1.89} viewBox="0 0 147 189" fill="none" xmlns="http://www.w3.org/2000/svg">
-          <g filter="url(#filter0_dd_center)">
-            <path d="M11 18.6613C11 12.5861 15.9249 7.66125 22 7.66125H125C131.075 7.66125 136 12.5861 136 18.6613V162.661C136 168.736 131.075 173.661 125 173.661H22C15.9249 173.661 11 168.736 11 162.661V18.6613Z" fill="#F6E3AE"/>
-          </g>
-          {/* Small fire icon in center */}
-          <g transform="translate(60, 75) scale(0.3)">
-            <path d="M40 60C35 55 30 45 35 35C40 25 50 30 45 20C50 25 60 30 55 40C60 35 65 45 60 55C65 50 70 60 65 70C60 80 50 75 45 85C40 75 35 70 40 60Z" fill={currentFireColors.flame1}/>
-          </g>
-          <defs>
-            <filter id="filter0_dd_center" x="0" y="0.661255" width="147" height="188" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
-              <feFlood floodOpacity="0" result="BackgroundImageFix"/>
-              <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
-              <feOffset dy="1"/>
-              <feGaussianBlur stdDeviation="1.5"/>
-              <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.3 0"/>
-              <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_center"/>
-              <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
-              <feMorphology radius="3" operator="dilate" in="SourceAlpha" result="effect2_dropShadow_center"/>
-              <feOffset dy="4"/>
-              <feGaussianBlur stdDeviation="4"/>
-              <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0"/>
-              <feBlend mode="normal" in2="effect1_dropShadow_center" result="effect2_dropShadow_center"/>
-              <feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_center" result="shape"/>
-            </filter>
-          </defs>
+        <svg width={size * 2.2} height={size * 1.8} viewBox="0 0 220 180" fill="none">
+          {/* Main fire shape - more contained */}
+          <ellipse className="fire-layer-base" cx="110" cy="140" rx="90" ry="35" fill={currentColors.fireBase} opacity="0.8"/>
+          <ellipse className="fire-layer-mid" cx="110" cy="120" rx="75" ry="45" fill={currentColors.fireMiddle} opacity="0.9"/>
+          <ellipse className="fire-layer-top" cx="110" cy="90" rx="60" ry="35" fill={currentColors.fireTop} opacity="0.7"/>
+          
+          {/* Flame tongues */}
+          <path className="flame-tongue-1" d="M80 90 Q75 70 85 50 Q90 70 80 90" fill={currentColors.fireTop} opacity="0.8"/>
+          <path className="flame-tongue-2" d="M110 80 Q105 55 115 30 Q120 60 110 80" fill={currentColors.fireTop} opacity="0.9"/>
+          <path className="flame-tongue-3" d="M140 90 Q145 70 135 50 Q130 70 140 90" fill={currentColors.fireTop} opacity="0.8"/>
+          <path className="flame-tongue-4" d="M95 85 Q92 65 100 45 Q105 70 95 85" fill={currentColors.fireMiddle} opacity="0.7"/>
+          <path className="flame-tongue-5" d="M125 85 Q128 65 120 45 Q115 70 125 85" fill={currentColors.fireMiddle} opacity="0.7"/>
         </svg>
       </div>
 
       {/* Left Card */}
       <div className="card-left absolute" style={{ 
-        left: '15%', 
-        top: '50%', 
-        transform: 'translate(-50%, -50%)',
-        zIndex: 8
+        left: '20%', 
+        top: '35%', 
+        transform: 'translate(-50%, -50%) rotate(-15deg)',
+        zIndex: 10
       }}>
-        <svg className="left-card" width={size * 2.64} height={size * 2.07} viewBox="0 0 264 207" fill="none" xmlns="http://www.w3.org/2000/svg">
-          <g filter="url(#filter0_dd_left)">
-            <path d="M11.847 47.9776C10.2746 42.1095 13.7571 36.0778 19.6252 34.5054L119.116 7.84705C124.984 6.27469 131.015 9.75709 132.588 15.6252L169.858 154.719C171.43 160.587 167.948 166.618 162.08 168.191L62.5891 194.849C56.721 196.421 50.6893 192.939 49.117 187.071L11.847 47.9776Z" fill="#F6E3AE"/>
+        <svg width={size * 1.2} height={size * 1.5} viewBox="0 0 120 150" fill="none">
+          <rect x="5" y="5" width="110" height="140" rx="12" fill={currentColors.cardBg} stroke={currentColors.cardBorder} strokeWidth="3"/>
+          {/* Card corner symbol - bottom left */}
+          <g transform="translate(15, 120)">
+            <text x="0" y="15" fontSize="18" fill={currentColors.cardBorder} fontFamily="serif" fontWeight="bold">J♥</text>
           </g>
-          <path d="M161.044 164.327L162.08 168.191L62.5891 194.849L61.5539 190.985L161.044 164.327ZM165.994 155.754L128.724 16.6605C127.723 12.9262 123.885 10.7102 120.151 11.7107L20.6605 38.3691C16.9262 39.3697 14.7101 43.2081 15.7107 46.9423L52.9807 186.036C53.9812 189.77 57.8196 191.986 61.5539 190.985L62.5891 194.849L62.0382 194.982C56.5318 196.162 51.0089 192.973 49.2777 187.614L49.117 187.071L11.847 47.9776C10.3238 42.293 13.5443 36.4551 19.0819 34.6662L19.6252 34.5054L119.116 7.84705C124.984 6.27469 131.015 9.75709 132.588 15.6252L169.858 154.719C171.43 160.587 167.948 166.618 162.08 168.191L161.044 164.327C164.778 163.326 166.995 159.488 165.994 155.754Z" fill="#F36E21"/>
-          <path d="M81.1675 181.123L77.6439 183.079L70.5604 156.643L74.084 154.687L78.878 172.578C79.2012 172.525 79.5201 172.457 79.8348 172.372C81.1251 172.027 82.3363 172.141 83.4682 172.714C84.6316 173.28 85.3735 174.16 85.694 175.356L86.8324 179.605L83.3088 181.561L81.9174 176.368C81.8499 176.116 81.6965 175.921 81.4571 175.783C81.2176 175.645 80.972 175.61 80.7203 175.677C80.4685 175.744 80.2735 175.898 80.1352 176.137C79.997 176.377 79.9616 176.622 80.0291 176.874L81.1675 181.123Z" fill="#E38F36"/>
-          <path d="M70.7708 183.909C69.4805 184.254 68.2705 184.207 67.1408 183.768C66.0342 183.289 65.2911 182.341 64.9117 180.925C64.5912 179.729 64.7777 178.6 65.4711 177.537C66.196 176.465 67.2037 175.757 68.494 175.411C68.8087 175.327 69.1192 175.227 69.4255 175.111L64.8844 158.164L68.408 156.207L72.7088 172.258L74.3532 178.395C75.1121 181.227 73.918 183.065 70.7708 183.909ZM69.8854 180.604C70.1372 180.537 70.3322 180.383 70.4704 180.144C70.6086 179.904 70.644 179.659 70.5766 179.407C70.5091 179.155 70.3557 178.96 70.1162 178.822C69.8768 178.684 69.6312 178.648 69.3794 178.716C69.1277 178.783 68.9327 178.937 68.7944 179.176C68.6562 179.415 68.6208 179.661 68.6883 179.913C68.7557 180.165 68.9092 180.36 69.1486 180.498C69.388 180.636 69.6336 180.671 69.8854 180.604Z" fill="#E38F36"/>
-          <defs>
-            <filter id="filter0_dd_left" x="0.469482" y="0.469498" width="180.766" height="209.757" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
-              <feFlood floodOpacity="0" result="BackgroundImageFix"/>
-              <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
-              <feOffset dy="1"/>
-              <feGaussianBlur stdDeviation="1.5"/>
-              <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.3 0"/>
-              <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_left"/>
-              <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
-              <feMorphology radius="3" operator="dilate" in="SourceAlpha" result="effect2_dropShadow_left"/>
-              <feOffset dy="4"/>
-              <feGaussianBlur stdDeviation="4"/>
-              <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0"/>
-              <feBlend mode="normal" in2="effect1_dropShadow_left" result="effect2_dropShadow_left"/>
-              <feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_left" result="shape"/>
-            </filter>
-          </defs>
         </svg>
       </div>
 
       {/* Right Card */}
       <div className="card-right absolute" style={{ 
-        right: '15%', 
-        top: '50%', 
-        transform: 'translate(50%, -50%)',
-        zIndex: 8
+        right: '20%', 
+        top: '35%', 
+        transform: 'translate(50%, -50%) rotate(15deg)',
+        zIndex: 10
       }}>
-        <svg className="right-card" width={size * 2.64} height={size * 2.07} viewBox="0 0 264 207" fill="none" xmlns="http://www.w3.org/2000/svg">
-          <g filter="url(#filter0_dd_right)">
-            <path d="M131.117 15.6252C132.689 9.75706 138.721 6.27465 144.589 7.84701L244.079 34.5054C249.948 36.0777 253.43 42.1094 251.858 47.9776L214.588 187.071C213.015 192.939 206.984 196.421 201.115 194.849L101.625 168.191C95.757 166.618 92.2746 160.587 93.8469 154.719L131.117 15.6252Z" fill="#F6E3AE"/>
+        <svg width={size * 1.2} height={size * 1.5} viewBox="0 0 120 150" fill="none">
+          <rect x="5" y="5" width="110" height="140" rx="12" fill={currentColors.cardBg} stroke={currentColors.cardBorder} strokeWidth="3"/>
+          {/* Card corner symbol - top right */}
+          <g transform="translate(85, 20)">
+            <text x="0" y="15" fontSize="18" fill={currentColors.cardBorder} fontFamily="serif" fontWeight="bold">K♥</text>
+          </g>
+        </svg>
+      </div>
+
+      {/* Center Card - Front */}
+      <div className="card-center absolute" style={{ 
+        left: '50%', 
+        top: '30%', 
+        transform: 'translate(-50%, -50%)',
+        zIndex: 15
+      }}>
+        <svg width={size * 1.3} height={size * 1.6} viewBox="0 0 130 160" fill="none">
+          <rect x="5" y="5" width="120" height="150" rx="12" fill={currentColors.cardBg} stroke={currentColors.cardBorder} strokeWidth="3"/>
+          
+          {/* Center fire symbol */}
+          <g transform="translate(65, 80)">
+            <path className="center-fire-icon" d="M0 20 Q-8 10 -5 0 Q0 -10 5 0 Q8 10 0 20 Q-3 15 0 10 Q3 15 0 20" 
+                  fill={currentColors.fireMiddle} opacity="0.9"/>
           </g>
-          <path d="M202.151 190.985L201.115 194.849L101.625 168.191L102.66 164.327L202.151 190.985ZM210.724 186.036L247.994 46.9423C248.994 43.208 246.778 39.3697 243.044 38.3691L143.554 11.7107C139.82 10.7101 135.981 12.9262 134.981 16.6605L97.7106 155.754C96.71 159.488 98.9261 163.326 102.66 164.327L101.625 168.191L101.082 168.03C95.723 166.299 92.5344 160.776 93.7145 155.269L93.8469 154.719L131.117 15.6252C132.64 9.94055 138.348 6.49508 144.038 7.71456L144.589 7.84701L244.079 34.5054C249.948 36.0777 253.43 42.1094 251.858 47.9776L214.588 187.071C213.015 192.939 206.984 196.421 201.115 194.849L202.151 190.985C205.885 191.986 209.723 189.77 210.724 186.036Z" fill="#F36E21"/>
-          <path d="M227.275 39.5146L231.305 39.5824L224.221 66.0186L220.191 65.9508L224.985 48.0592C224.679 47.9434 224.369 47.8433 224.054 47.759C222.764 47.4132 221.772 46.709 221.078 45.6461C220.353 44.5749 220.151 43.4413 220.472 42.2454L221.61 37.9967L225.64 38.0645L224.248 43.2573C224.181 43.5091 224.216 43.7547 224.354 43.9941C224.493 44.2336 224.688 44.387 224.939 44.4545C225.191 44.5219 225.437 44.4865 225.676 44.3483C225.916 44.2101 226.069 44.0151 226.137 43.7633L227.275 39.5146Z" fill="#E38F36"/>
-          <path d="M237.672 42.3004C238.962 42.6462 239.986 43.2917 240.745 44.2371C241.464 45.2055 241.633 46.3978 241.254 47.814C240.934 49.0099 240.207 49.8947 239.075 50.4685C237.912 51.0337 236.685 51.1435 235.395 50.7978C235.08 50.7134 234.761 50.6448 234.438 50.592L229.897 67.5394L225.867 67.4717L230.168 51.4211L231.812 45.2842C232.571 42.4517 234.524 41.4571 237.672 42.3004ZM236.786 45.6049C236.534 45.5375 236.289 45.5729 236.049 45.7111C235.81 45.8493 235.657 46.0443 235.589 46.2961C235.522 46.5479 235.557 46.7935 235.695 47.0329C235.833 47.2723 236.028 47.4258 236.28 47.4932C236.532 47.5607 236.778 47.5253 237.017 47.3871C237.256 47.2488 237.41 47.0538 237.477 46.8021C237.545 46.5503 237.509 46.3047 237.371 46.0653C237.233 45.8258 237.038 45.6724 236.786 45.6049Z" fill="#E38F36"/>
-          <defs>
-            <filter id="filter0_dd_right" x="82.4695" y="0.469467" width="180.766" height="209.757" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
-              <feFlood floodOpacity="0" result="BackgroundImageFix"/>
-              <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
-              <feOffset dy="1"/>
-              <feGaussianBlur stdDeviation="1.5"/>
-              <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.3 0"/>
-              <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_right"/>
-              <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
-              <feMorphology radius="3" operator="dilate" in="SourceAlpha" result="effect2_dropShadow_right"/>
-              <feOffset dy="4"/>
-              <feGaussianBlur stdDeviation="4"/>
-              <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0"/>
-              <feBlend mode="normal" in2="effect1_dropShadow_right" result="effect2_dropShadow_right"/>
-              <feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_right" result="shape"/>
-            </filter>
-          </defs>
         </svg>
       </div>
 
       <style jsx>{`
-        .fire-cards-logo-container {
-          filter: drop-shadow(0 0 15px rgba(255, 107, 53, 0.4));
+        .deck-hearth-logo-container {
+          filter: drop-shadow(0 0 20px rgba(255, 107, 53, 0.3));
         }
         
-        /* Fire Animation */
-        .fire-background {
-          animation: fire-glow 4s ease-in-out infinite alternate;
+        /* Fire Animations - Subtle and contained */
+        .fire-layer-base {
+          animation: fire-base-flicker 3s ease-in-out infinite alternate;
         }
         
-        .flame-layer-1 { animation: flame-flicker-1 2.1s ease-in-out infinite alternate; animation-delay: -0.1s; }
-        .flame-layer-2 { animation: flame-flicker-2 1.8s ease-in-out infinite alternate; animation-delay: -0.3s; }
-        .flame-layer-3 { animation: flame-flicker-3 2.3s ease-in-out infinite alternate; animation-delay: -0.7s; }
-        .flame-layer-4 { animation: flame-flicker-4 1.9s ease-in-out infinite alternate; animation-delay: -0.2s; }
-        .flame-layer-5 { animation: flame-flicker-5 2.0s ease-in-out infinite alternate; animation-delay: -0.5s; }
-        .flame-layer-6 { animation: flame-flicker-6 1.7s ease-in-out infinite alternate; animation-delay: -0.8s; }
-        .flame-layer-7 { animation: flame-flicker-7 2.2s ease-in-out infinite alternate; animation-delay: -0.4s; }
+        .fire-layer-mid {
+          animation: fire-mid-flicker 2.5s ease-in-out infinite alternate;
+          animation-delay: -0.5s;
+        }
         
-        .flame-small-1 { animation: flame-small 1.2s ease-in-out infinite alternate; animation-delay: -0.1s; }
-        .flame-small-2 { animation: flame-small 1.4s ease-in-out infinite alternate; animation-delay: -0.3s; }
-        .flame-small-3 { animation: flame-small 1.1s ease-in-out infinite alternate; animation-delay: -0.5s; }
-        .flame-small-4 { animation: flame-small 1.3s ease-in-out infinite alternate; animation-delay: -0.2s; }
-        .flame-small-5 { animation: flame-small 1.5s ease-in-out infinite alternate; animation-delay: -0.4s; }
+        .fire-layer-top {
+          animation: fire-top-flicker 2s ease-in-out infinite alternate;
+          animation-delay: -1s;
+        }
         
-        /* Card Animations */
+        .flame-tongue-1 { animation: flame-dance-1 1.8s ease-in-out infinite alternate; animation-delay: -0.2s; }
+        .flame-tongue-2 { animation: flame-dance-2 2.2s ease-in-out infinite alternate; animation-delay: -0.7s; }
+        .flame-tongue-3 { animation: flame-dance-3 1.9s ease-in-out infinite alternate; animation-delay: -0.4s; }
+        .flame-tongue-4 { animation: flame-dance-4 2.1s ease-in-out infinite alternate; animation-delay: -0.9s; }
+        .flame-tongue-5 { animation: flame-dance-5 1.7s ease-in-out infinite alternate; animation-delay: -0.3s; }
+        
+        /* Card Animations - Gentle floating */
         .card-center {
-          animation: card-float-center 3.5s ease-in-out infinite;
+          animation: card-float-center 4s ease-in-out infinite;
         }
         
         .card-left {
-          animation: card-float-left 4.2s ease-in-out infinite;
-          animation-delay: -0.8s;
+          animation: card-float-left 4.5s ease-in-out infinite;
+          animation-delay: -1s;
         }
         
         .card-right {
-          animation: card-float-right 3.8s ease-in-out infinite;
-          animation-delay: -1.2s;
+          animation: card-float-right 4.2s ease-in-out infinite;
+          animation-delay: -2s;
         }
         
-        /* Fire Animations */
-        @keyframes fire-glow {
-          0% { filter: drop-shadow(0 0 15px rgba(255, 107, 53, 0.4)) brightness(1); }
-          100% { filter: drop-shadow(0 0 20px rgba(255, 107, 53, 0.6)) brightness(1.1); }
+        .center-fire-icon {
+          animation: icon-glow 2s ease-in-out infinite alternate;
         }
         
-        @keyframes flame-flicker-1 {
-          0% { transform: scaleY(1) scaleX(1) rotate(0deg); opacity: 1; }
-          100% { transform: scaleY(1.05) scaleX(0.98) rotate(-0.5deg); opacity: 0.95; }
-        }
-        
-        @keyframes flame-flicker-2 {
-          0% { transform: scaleY(1) scaleX(1) rotate(0deg); opacity: 0.9; }
-          100% { transform: scaleY(1.08) scaleX(0.95) rotate(1deg); opacity: 1; }
-        }
-        
-        @keyframes flame-flicker-3 {
-          0% { transform: scaleY(1) scaleX(1) rotate(0deg); opacity: 1; }
-          100% { transform: scaleY(1.03) scaleX(1.02) rotate(-0.8deg); opacity: 0.92; }
-        }
-        
-        @keyframes flame-flicker-4 {
-          0% { transform: scaleY(1) scaleX(1) rotate(0deg); opacity: 0.95; }
-          100% { transform: scaleY(1.06) scaleX(0.97) rotate(1.2deg); opacity: 1; }
-        }
-        
-        @keyframes flame-flicker-5 {
-          0% { transform: scaleY(1) scaleX(1) rotate(0deg); opacity: 1; }
-          100% { transform: scaleY(1.04) scaleX(1.01) rotate(-1deg); opacity: 0.88; }
-        }
-        
-        @keyframes flame-flicker-6 {
-          0% { transform: scaleY(1) scaleX(1) rotate(0deg); opacity: 0.93; }
-          100% { transform: scaleY(1.07) scaleX(0.96) rotate(0.7deg); opacity: 1; }
-        }
-        
-        @keyframes flame-flicker-7 {
-          0% { transform: scaleY(1) scaleX(1) rotate(0deg); opacity: 1; }
-          100% { transform: scaleY(1.02) scaleX(1.03) rotate(-0.3deg); opacity: 0.96; }
-        }
-        
-        @keyframes flame-small {
+        /* Fire Animation Keyframes */
+        @keyframes fire-base-flicker {
           0% { transform: scaleY(1) scaleX(1); opacity: 0.8; }
-          100% { transform: scaleY(1.15) scaleX(0.9); opacity: 1; }
+          100% { transform: scaleY(1.05) scaleX(1.02); opacity: 0.9; }
+        }
+        
+        @keyframes fire-mid-flicker {
+          0% { transform: scaleY(1) scaleX(1); opacity: 0.9; }
+          100% { transform: scaleY(1.08) scaleX(0.98); opacity: 1; }
+        }
+        
+        @keyframes fire-top-flicker {
+          0% { transform: scaleY(1) scaleX(1); opacity: 0.7; }
+          100% { transform: scaleY(1.12) scaleX(0.95); opacity: 0.85; }
+        }
+        
+        @keyframes flame-dance-1 {
+          0% { transform: scaleY(1) rotate(0deg); opacity: 0.8; }
+          100% { transform: scaleY(1.2) rotate(-3deg); opacity: 1; }
+        }
+        
+        @keyframes flame-dance-2 {
+          0% { transform: scaleY(1) rotate(0deg); opacity: 0.9; }
+          100% { transform: scaleY(1.3) rotate(2deg); opacity: 1; }
+        }
+        
+        @keyframes flame-dance-3 {
+          0% { transform: scaleY(1) rotate(0deg); opacity: 0.8; }
+          100% { transform: scaleY(1.15) rotate(4deg); opacity: 0.95; }
+        }
+        
+        @keyframes flame-dance-4 {
+          0% { transform: scaleY(1) rotate(0deg); opacity: 0.7; }
+          100% { transform: scaleY(1.25) rotate(-2deg); opacity: 0.9; }
+        }
+        
+        @keyframes flame-dance-5 {
+          0% { transform: scaleY(1) rotate(0deg); opacity: 0.7; }
+          100% { transform: scaleY(1.18) rotate(3deg); opacity: 0.85; }
         }
         
         /* Card Float Animations */
@@ -245,45 +192,50 @@ export default function AnimatedFireLogo({ size = 100 }) {
             transform: translate(-50%, -50%) rotate(0deg) scale(1);
           }
           25% { 
-            transform: translate(-50%, -52%) rotate(0.5deg) scale(1.02);
+            transform: translate(-50%, -52%) rotate(1deg) scale(1.02);
           }
           50% { 
-            transform: translate(-48%, -50%) rotate(-0.3deg) scale(0.98);
+            transform: translate(-48%, -50%) rotate(-0.5deg) scale(0.98);
           }
           75% { 
-            transform: translate(-52%, -48%) rotate(0.8deg) scale(1.01);
+            transform: translate(-52%, -48%) rotate(1.5deg) scale(1.01);
           }
         }
         
         @keyframes card-float-left {
           0%, 100% { 
-            transform: translate(-50%, -50%) rotate(-8deg) scale(1);
+            transform: translate(-50%, -50%) rotate(-15deg) scale(1);
           }
           25% { 
-            transform: translate(-48%, -52%) rotate(-7deg) scale(1.01);
+            transform: translate(-48%, -52%) rotate(-14deg) scale(1.01);
           }
           50% { 
-            transform: translate(-52%, -50%) rotate(-9deg) scale(0.99);
+            transform: translate(-52%, -50%) rotate(-16deg) scale(0.99);
           }
           75% { 
-            transform: translate(-50%, -48%) rotate(-7.5deg) scale(1.02);
+            transform: translate(-50%, -48%) rotate(-13deg) scale(1.02);
           }
         }
         
         @keyframes card-float-right {
           0%, 100% { 
-            transform: translate(50%, -50%) rotate(8deg) scale(1);
+            transform: translate(50%, -50%) rotate(15deg) scale(1);
           }
           25% { 
-            transform: translate(52%, -52%) rotate(7deg) scale(1.01);
+            transform: translate(52%, -52%) rotate(14deg) scale(1.01);
           }
           50% { 
-            transform: translate(48%, -50%) rotate(9deg) scale(0.99);
+            transform: translate(48%, -50%) rotate(16deg) scale(0.99);
           }
           75% { 
-            transform: translate(50%, -48%) rotate(7.5deg) scale(1.02);
+            transform: translate(50%, -48%) rotate(13deg) scale(1.02);
           }
         }
+        
+        @keyframes icon-glow {
+          0% { opacity: 0.9; transform: scale(1); }
+          100% { opacity: 1; transform: scale(1.1); }
+        }
       `}</style>
     </div>
   );