diff --git a/components/AnimatedFireLogo.js b/components/AnimatedFireLogo.js index 2480689..82ddac8 100644 --- a/components/AnimatedFireLogo.js +++ b/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; } }