deckhearth/components/AnimatedFireLogo.js

import { useTheme } from '../lib/theme-context';

export default function AnimatedFireLogo({ size = 80 }) {
  const { theme } = useTheme();

  return (
    <div 
      className="fire-logo-container relative flex items-center justify-center"
      style={{ width: size, height: size }}
    >
      {/* 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>
      
      <style jsx>{`
        .fire-logo-container {
          transform: scale(${size / 80});
        }
        
        .fire-main {
          position: relative;
          width: 60px;
          height: 60px;
        }
        
        .fire-left, .fire-main-flame, .fire-right {
          position: absolute;
          bottom: 0;
          border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
        }
        
        .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%)'
          };
          animation: fire-flicker 0.8s ease-in-out infinite alternate;
          z-index: 2;
        }
        
        .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%)'
          };
          animation: fire-flicker-left 1.2s ease-in-out infinite alternate;
          z-index: 1;
        }
        
        .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%)'
          };
          animation: fire-flicker-right 1s ease-in-out infinite alternate;
          z-index: 1;
        }
        
        .fire-particle {
          position: absolute;
          border-radius: 50%;
          opacity: 0.7;
        }
        
        .fire-particle-1 {
          width: 8px;
          height: 8px;
          top: 10px;
          left: 15px;
          background: ${theme === 'dark' ? '#fff200' : '#ffab40'};
          animation: particle-float-1 2s ease-in-out infinite;
        }
        
        .fire-particle-2 {
          width: 6px;
          height: 6px;
          top: 15px;
          right: 12px;
          background: ${theme === 'dark' ? '#ffa500' : '#ff6f00'};
          animation: particle-float-2 1.8s ease-in-out infinite;
        }
        
        .fire-particle-3 {
          width: 4px;
          height: 4px;
          top: 8px;
          left: 50%;
          transform: translateX(-50%);
          background: ${theme === 'dark' ? '#ff6b35' : '#d84315'};
          animation: particle-float-3 2.2s ease-in-out infinite;
        }
        
        .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;
        }
        
        @keyframes fire-flicker {
          0% {
            transform: translateX(-50%) rotate(-2deg) scaleY(1);
          }
          50% {
            transform: translateX(-50%) rotate(1deg) scaleY(1.05);
          }
          100% {
            transform: translateX(-50%) rotate(-1deg) scaleY(0.95);
          }
        }
        
        @keyframes fire-flicker-left {
          0% {
            transform: rotate(-3deg) scaleY(1) scaleX(1);
          }
          50% {
            transform: rotate(2deg) scaleY(1.1) scaleX(0.9);
          }
          100% {
            transform: rotate(-1deg) scaleY(0.9) scaleX(1.1);
          }
        }
        
        @keyframes fire-flicker-right {
          0% {
            transform: rotate(2deg) scaleY(1) scaleX(1);
          }
          50% {
            transform: rotate(-1deg) scaleY(1.05) scaleX(1.1);
          }
          100% {
            transform: rotate(3deg) scaleY(0.95) scaleX(0.9);
          }
        }
        
        @keyframes particle-float-1 {
          0%, 100% {
            transform: translateY(0px) scale(1);
            opacity: 0.7;
          }
          50% {
            transform: translateY(-15px) scale(1.2);
            opacity: 1;
          }
        }
        
        @keyframes particle-float-2 {
          0%, 100% {
            transform: translateY(0px) scale(1);
            opacity: 0.6;
          }
          50% {
            transform: translateY(-12px) scale(0.8);
            opacity: 0.9;
          }
        }
        
        @keyframes particle-float-3 {
          0%, 100% {
            transform: translateX(-50%) translateY(0px) scale(1);
            opacity: 0.8;
          }
          50% {
            transform: translateX(-50%) translateY(-18px) scale(1.5);
            opacity: 1;
          }
        }
      `}</style>
    </div>
  );
}