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;
        }
        
        .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;
        }
        
        .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;
        }
        
        .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;
        }
        
        .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'};
          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;
        }
        
        .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;
        }
        
        .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;
        }
        
        .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(-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);
          }
          100% {
            transform: translateX(-50%) rotate(-1deg) scaleY(0.95) scaleX(0.98);
            filter: hue-rotate(0deg);
          }
        }
        
        @keyframes fire-flicker-left {
          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);
            opacity: 1;
          }
        }
        
        @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);
            opacity: 0.9;
          }
        }
        
        @keyframes particle-float-3 {
          0%, 100% {
            transform: translateX(-50%) translateY(0px) scale(1) rotate(0deg);
            opacity: 0.8;
          }
          50% {
            transform: translateX(-50%) translateY(-18px) scale(1.5) rotate(360deg);
            opacity: 1;
          }
        }
      `}</style>
    </div>
  );
}