/* 全局样式重置 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Arial', sans-serif;
    background: #000000;
    color: #ffffff;
    overflow-x: hidden;
    min-height: 100vh;
}

.container {
    position: relative;
    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* 背景粒子效果 */
.particles {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

.particles::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: 
        radial-gradient(2px 2px at 20px 30px, #fff, transparent),
        radial-gradient(2px 2px at 40px 70px, #fff, transparent),
        radial-gradient(1px 1px at 90px 40px, #fff, transparent),
        radial-gradient(1px 1px at 130px 80px, #fff, transparent),
        radial-gradient(2px 2px at 160px 30px, #fff, transparent);
    background-repeat: repeat;
    background-size: 200px 100px;
    animation: sparkle 20s linear infinite;
    opacity: 0.3;
}

@keyframes sparkle {
    0% { transform: translateY(0px); }
    100% { transform: translateY(-100px); }
}

/* 全屏火焰背景效果 */
.fire-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    pointer-events: none;
}

/* 火焰墙 */
.fire-wall {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding: 0 2%;
}

/* 火焰柱 */
.fire-column {
    position: relative;
    background: linear-gradient(180deg, 
        #fff 0%, 
        #fff 3%,
        #ffd700 15%, 
        #ff8c00 35%, 
        #ff6b35 55%, 
        #ff4500 75%, 
        #cc3300 90%,
        #8b0000 100%);
    border-radius: 50% 50% 20% 20%;
    animation: fireBurn 2.5s ease-in-out infinite alternate;
    box-shadow: 
        0 0 40px #ff4500,
        0 0 80px rgba(255, 69, 0, 0.8),
        0 0 120px rgba(255, 69, 0, 0.6),
        0 0 160px rgba(255, 69, 0, 0.4);
    filter: blur(0.5px);
    transform-origin: bottom center;
}

/* 火焰柱的不同大小和延迟 */
.fire-column-1 { width: 4%; height: 60%; animation-delay: 0s; }
.fire-column-2 { width: 3.5%; height: 55%; animation-delay: 0.2s; }
.fire-column-3 { width: 5%; height: 70%; animation-delay: 0.4s; }
.fire-column-4 { width: 3%; height: 50%; animation-delay: 0.6s; }
.fire-column-5 { width: 6%; height: 80%; animation-delay: 0.8s; }
.fire-column-6 { width: 4.5%; height: 65%; animation-delay: 1.0s; }
.fire-column-7 { width: 3.8%; height: 58%; animation-delay: 1.2s; }
.fire-column-8 { width: 5.5%; height: 75%; animation-delay: 1.4s; }
.fire-column-9 { width: 3.2%; height: 52%; animation-delay: 1.6s; }
.fire-column-10 { width: 4.8%; height: 68%; animation-delay: 1.8s; }
.fire-column-11 { width: 3.7%; height: 56%; animation-delay: 2.0s; }
.fire-column-12 { width: 5.2%; height: 72%; animation-delay: 2.2s; }
.fire-column-13 { width: 4.2%; height: 62%; animation-delay: 2.4s; }
.fire-column-14 { width: 3.3%; height: 54%; animation-delay: 2.6s; }
.fire-column-15 { width: 5.8%; height: 78%; animation-delay: 2.8s; }
.fire-column-16 { width: 4.0%; height: 60%; animation-delay: 3.0s; }
.fire-column-17 { width: 3.6%; height: 57%; animation-delay: 3.2s; }
.fire-column-18 { width: 5.3%; height: 73%; animation-delay: 3.4s; }
.fire-column-19 { width: 3.4%; height: 53%; animation-delay: 3.6s; }
.fire-column-20 { width: 4.6%; height: 66%; animation-delay: 3.8s; }

/* 火焰燃烧动画 */
@keyframes fireBurn {
    0% {
        transform: scale(1) rotate(-2deg);
        opacity: 0.9;
        filter: brightness(1.1) blur(0.5px);
        clip-path: polygon(50% 0%, 65% 20%, 75% 45%, 70% 70%, 50% 90%, 30% 70%, 25% 45%, 35% 20%);
    }
    20% {
        transform: scale(1.15) rotate(-1deg);
        opacity: 1;
        filter: brightness(1.4) blur(0.3px);
        clip-path: polygon(50% 0%, 70% 25%, 80% 50%, 75% 75%, 50% 95%, 25% 75%, 20% 50%, 30% 25%);
    }
    40% {
        transform: scale(1.25) rotate(1deg);
        opacity: 0.95;
        filter: brightness(1.6) blur(0.2px);
        clip-path: polygon(50% 0%, 60% 15%, 70% 35%, 65% 60%, 50% 80%, 35% 60%, 30% 35%, 40% 15%);
    }
    60% {
        transform: scale(1.2) rotate(2deg);
        opacity: 1;
        filter: brightness(1.3) blur(0.4px);
        clip-path: polygon(50% 0%, 75% 30%, 85% 55%, 80% 80%, 50% 100%, 20% 80%, 15% 55%, 25% 30%);
    }
    80% {
        transform: scale(1.1) rotate(3deg);
        opacity: 0.97;
        filter: brightness(1.2) blur(0.6px);
        clip-path: polygon(50% 0%, 55% 10%, 65% 25%, 60% 50%, 50% 70%, 40% 50%, 35% 25%, 45% 10%);
    }
    100% {
        transform: scale(1.3) rotate(4deg);
        opacity: 0.9;
        filter: brightness(1.5) blur(0.3px);
        clip-path: polygon(50% 0%, 80% 35%, 90% 60%, 85% 85%, 50% 100%, 15% 85%, 10% 60%, 20% 35%);
    }
}

/* 火焰柱的额外效果 */
.fire-column::before {
    content: '';
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    height: 30%;
    background: linear-gradient(180deg, #fff 0%, #ffd700 40%, #ff8c00 80%, transparent 100%);
    border-radius: 50% 50% 20% 20%;
    animation: fireTip 1.5s ease-in-out infinite alternate;
    filter: blur(0.3px);
    opacity: 0.9;
    clip-path: polygon(50% 0%, 70% 25%, 80% 60%, 70% 90%, 50% 100%, 30% 90%, 20% 60%, 30% 25%);
}

.fire-column::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 140%;
    height: 25px;
    background: linear-gradient(90deg, transparent, rgba(255, 69, 0, 0.7), transparent);
    border-radius: 50%;
    filter: blur(4px);
    animation: fireShadow 2.5s ease-in-out infinite alternate;
}

@keyframes fireTip {
    0% {
        transform: translateX(-50%) scale(1) rotate(-1deg);
        opacity: 0.9;
        filter: brightness(1.2) blur(0.3px);
    }
    50% {
        transform: translateX(-50%) scale(1.4) rotate(2deg);
        opacity: 1;
        filter: brightness(1.7) blur(0.1px);
    }
    100% {
        transform: translateX(-50%) scale(1.2) rotate(-2deg);
        opacity: 0.95;
        filter: brightness(1.4) blur(0.2px);
    }
}

@keyframes fireShadow {
    0% {
        opacity: 0.4;
        transform: translateX(-50%) scale(1);
    }
    100% {
        opacity: 0.8;
        transform: translateX(-50%) scale(1.3);
    }
}

/* 火花覆盖层 */
.sparks-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 3;
}

/* 火花粒子 */
.spark-particle {
    position: absolute;
    bottom: 0;
    width: 4px;
    height: 4px;
    background: radial-gradient(circle, #fff 0%, #ffd700 50%, #ff4500 100%);
    border-radius: 50%;
    animation: sparkRise 4s linear infinite;
    box-shadow: 0 0 15px #ffd700, 0 0 30px rgba(255, 215, 0, 0.8);
}

/* 火花的不同位置和延迟 */
.spark-1 { left: 5%; animation-delay: 0s; animation-duration: 3.2s; }
.spark-2 { left: 15%; animation-delay: 0.3s; animation-duration: 3.8s; }
.spark-3 { left: 25%; animation-delay: 0.6s; animation-duration: 3.4s; }
.spark-4 { left: 35%; animation-delay: 0.9s; animation-duration: 4.1s; }
.spark-5 { left: 45%; animation-delay: 1.2s; animation-duration: 3.3s; }
.spark-6 { left: 55%; animation-delay: 1.5s; animation-duration: 3.7s; }
.spark-7 { left: 65%; animation-delay: 1.8s; animation-duration: 3.5s; }
.spark-8 { left: 75%; animation-delay: 2.1s; animation-duration: 3.9s; }
.spark-9 { left: 85%; animation-delay: 2.4s; animation-duration: 3.2s; }
.spark-10 { left: 95%; animation-delay: 2.7s; animation-duration: 4.0s; }
.spark-11 { left: 10%; animation-delay: 3.0s; animation-duration: 3.4s; }
.spark-12 { left: 20%; animation-delay: 3.3s; animation-duration: 3.6s; }
.spark-13 { left: 30%; animation-delay: 3.6s; animation-duration: 3.5s; }
.spark-14 { left: 40%; animation-delay: 3.9s; animation-duration: 3.7s; }
.spark-15 { left: 50%; animation-delay: 4.2s; animation-duration: 3.3s; }
.spark-16 { left: 60%; animation-delay: 4.5s; animation-duration: 3.8s; }
.spark-17 { left: 70%; animation-delay: 4.8s; animation-duration: 3.4s; }
.spark-18 { left: 80%; animation-delay: 5.1s; animation-duration: 3.6s; }
.spark-19 { left: 90%; animation-delay: 5.4s; animation-duration: 3.5s; }
.spark-20 { left: 7%; animation-delay: 5.7s; animation-duration: 3.7s; }
.spark-21 { left: 17%; animation-delay: 6.0s; animation-duration: 3.3s; }
.spark-22 { left: 27%; animation-delay: 6.3s; animation-duration: 3.9s; }
.spark-23 { left: 37%; animation-delay: 6.6s; animation-duration: 3.4s; }
.spark-24 { left: 47%; animation-delay: 6.9s; animation-duration: 3.8s; }
.spark-25 { left: 57%; animation-delay: 7.2s; animation-duration: 3.5s; }
.spark-26 { left: 67%; animation-delay: 7.5s; animation-duration: 3.7s; }
.spark-27 { left: 77%; animation-delay: 7.8s; animation-duration: 3.3s; }
.spark-28 { left: 87%; animation-delay: 8.1s; animation-duration: 3.6s; }
.spark-29 { left: 97%; animation-delay: 8.4s; animation-duration: 3.4s; }
.spark-30 { left: 3%; animation-delay: 8.7s; animation-duration: 3.8s; }

/* 火花上升动画 */
@keyframes sparkRise {
    0% {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
    15% {
        transform: translateY(-30px) scale(1.3);
        opacity: 0.9;
    }
    30% {
        transform: translateY(-60px) scale(1.6);
        opacity: 0.8;
    }
    45% {
        transform: translateY(-90px) scale(1.9);
        opacity: 0.7;
    }
    60% {
        transform: translateY(-120px) scale(2.2);
        opacity: 0.6;
    }
    75% {
        transform: translateY(-150px) scale(2.5);
        opacity: 0.4;
    }
    90% {
        transform: translateY(-180px) scale(2.8);
        opacity: 0.2;
    }
    100% {
        transform: translateY(-210px) scale(3.0);
        opacity: 0;
    }
}

/* 主要内容区域 */
.main-content {
    position: relative;
    z-index: 10;
    text-align: center;
    padding: 2rem;
    max-width: 1200px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* 火焰容器 */
.fire-container {
    position: relative;
    margin-bottom: 4rem;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.fire-title {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.title-text {
    font-size: clamp(2.5rem, 8vw, 5rem);
    font-weight: bold;
    background: linear-gradient(45deg, #ff6b35, #f7931e, #ffd700, #ff4500);
    background-size: 300% 300%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: titleGlow 2s ease-in-out infinite alternate;
    text-shadow: 
        0 0 30px rgba(255, 107, 53, 0.8),
        0 0 60px rgba(255, 69, 0, 0.6),
        0 0 90px rgba(255, 215, 0, 0.4);
    position: relative;
    z-index: 5;
    letter-spacing: 0.2em;
    filter: drop-shadow(0 0 20px rgba(255, 69, 0, 0.5));
}

@keyframes titleGlow {
    0% { 
        background-position: 0% 50%;
        filter: drop-shadow(0 0 20px rgba(255, 69, 0, 0.5)) brightness(1);
    }
    100% { 
        background-position: 100% 50%;
        filter: drop-shadow(0 0 30px rgba(255, 69, 0, 0.8)) brightness(1.2);
    }
}

/* 重新设计的火焰效果 - 火舌蜷曲舔舐空气 */
.fire-effect {
    position: absolute;
    top: -60px;
    left: 50%;
    transform: translateX(-50%);
    width: clamp(400px, 90vw, 800px);
    height: clamp(300px, 70vw, 600px);
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: flex-end;
}

/* 基础火焰层 - 火舌主体 */
.flame {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 50% 50% 30% 30%;
    animation: flameDance 0.8s ease-in-out infinite alternate;
    filter: blur(0.8px);
}

/* 主要火舌 - 蜷曲舔舐效果 */
.flame-1 {
    width: clamp(150px, 35vw, 300px);
    height: clamp(200px, 45vw, 400px);
    background: linear-gradient(45deg, #ff4500, #ff6b35, #ff8c00);
    animation-delay: 0s;
    animation-name: flameDance, flameSplit;
    animation-duration: 0.8s, 2s;
    animation-iteration-count: infinite, infinite;
    animation-direction: alternate, normal;
    box-shadow: 
        0 0 60px #ff4500,
        0 0 120px rgba(255, 69, 0, 0.6),
        0 0 180px rgba(255, 69, 0, 0.4);
    clip-path: polygon(50% 0%, 60% 20%, 70% 40%, 65% 60%, 50% 80%, 35% 60%, 30% 40%, 40% 20%);
}

/* 分裂的金蛇效果 */
.flame-2 {
    width: clamp(120px, 28vw, 240px);
    height: clamp(150px, 35vw, 300px);
    background: linear-gradient(45deg, #ffd700, #ffed4e, #fff);
    animation-delay: 0.2s;
    animation-name: flameDance, goldenSnakes;
    animation-duration: 0.6s, 1.5s;
    animation-iteration-count: infinite, infinite;
    animation-direction: alternate, normal;
    box-shadow: 
        0 0 50px #ffd700,
        0 0 100px rgba(255, 215, 0, 0.7),
        0 0 150px rgba(255, 215, 0, 0.5);
    clip-path: polygon(50% 0%, 55% 15%, 65% 30%, 60% 50%, 50% 70%, 40% 50%, 35% 30%, 45% 15%);
}

/* 蓝白色羽冠效果 */
.flame-3 {
    width: clamp(90px, 22vw, 180px);
    height: clamp(120px, 28vw, 240px);
    background: linear-gradient(45deg, #87ceeb, #b0e0e6, #fff);
    animation-delay: 0.4s;
    animation-name: flameDance, blueWhiteCrown;
    animation-duration: 0.7s, 2.5s;
    animation-iteration-count: infinite, infinite;
    animation-direction: alternate, normal;
    box-shadow: 
        0 0 40px #87ceeb,
        0 0 80px rgba(135, 206, 235, 0.6),
        0 0 120px rgba(135, 206, 235, 0.4);
    clip-path: polygon(50% 0%, 60% 25%, 70% 50%, 60% 75%, 50% 100%, 40% 75%, 30% 50%, 40% 25%);
}

/* 火舌分裂效果 */
.flame-4 {
    width: clamp(70px, 18vw, 140px);
    height: clamp(100px, 25vw, 200px);
    background: linear-gradient(45deg, #ff6b35, #ff8c00, #ffd700);
    animation-delay: 0.6s;
    animation-name: flameDance, tongueSplit;
    animation-duration: 0.5s, 1.8s;
    animation-iteration-count: infinite, infinite;
    animation-direction: alternate, normal;
    box-shadow: 
        0 0 35px #ff6b35,
        0 0 70px rgba(255, 107, 53, 0.6),
        0 0 105px rgba(255, 107, 53, 0.4);
    clip-path: polygon(50% 0%, 65% 20%, 75% 40%, 70% 60%, 50% 80%, 30% 60%, 25% 40%, 35% 20%);
}

/* 摇曳的羽冠 */
.flame-5 {
    width: clamp(50px, 12vw, 100px);
    height: clamp(80px, 20vw, 160px);
    background: linear-gradient(45deg, #fff, #b0e0e6, #87ceeb);
    animation-delay: 0.8s;
    animation-name: flameDance, featherCrown;
    animation-duration: 0.4s, 2.2s;
    animation-iteration-count: infinite, infinite;
    animation-direction: alternate, normal;
    box-shadow: 
        0 0 30px #fff,
        0 0 60px rgba(255, 255, 255, 0.7),
        0 0 90px rgba(255, 255, 255, 0.5);
    clip-path: polygon(50% 0%, 70% 30%, 80% 60%, 70% 90%, 50% 100%, 30% 90%, 20% 60%, 30% 30%);
}

/* 额外的火焰层 - 增强效果 */
.flame-6 {
    width: clamp(100px, 25vw, 200px);
    height: clamp(130px, 32vw, 260px);
    background: linear-gradient(45deg, #ff0000, #ff4500, #ff6b35);
    animation-delay: 1s;
    animation-name: flameDance, intenseFlicker;
    animation-duration: 0.9s, 1.2s;
    animation-iteration-count: infinite, infinite;
    animation-direction: alternate, normal;
    box-shadow: 
        0 0 50px #ff0000,
        0 0 100px rgba(255, 0, 0, 0.6),
        0 0 150px rgba(255, 0, 0, 0.4);
    clip-path: polygon(50% 0%, 55% 10%, 65% 25%, 70% 45%, 65% 65%, 50% 85%, 35% 65%, 30% 45%, 35% 25%, 45% 10%);
}

.flame-7 {
    width: clamp(80px, 20vw, 160px);
    height: clamp(110px, 27vw, 220px);
    background: linear-gradient(45deg, #ff4500, #ff6b35, #ff8c00);
    animation-delay: 1.2s;
    animation-name: flameDance, fireWhip;
    animation-duration: 0.6s, 1.6s;
    animation-iteration-count: infinite, infinite;
    animation-direction: alternate, normal;
    box-shadow: 
        0 0 45px #ff4500,
        0 0 90px rgba(255, 69, 0, 0.6),
        0 0 135px rgba(255, 69, 0, 0.4);
    clip-path: polygon(50% 0%, 60% 15%, 75% 35%, 80% 55%, 75% 75%, 50% 95%, 25% 75%, 20% 55%, 25% 35%, 40% 15%);
}

/* 火舌蜷曲舔舐动画 */
@keyframes flameDance {
    0% {
        transform: translateX(-50%) scale(1) rotate(-5deg);
        opacity: 0.9;
        filter: brightness(1) blur(0.8px);
        clip-path: polygon(50% 0%, 60% 20%, 70% 40%, 65% 60%, 50% 80%, 35% 60%, 30% 40%, 40% 20%);
    }
    25% {
        transform: translateX(-50%) scale(1.05) rotate(-2deg);
        opacity: 1;
        filter: brightness(1.2) blur(0.6px);
        clip-path: polygon(50% 0%, 65% 25%, 75% 45%, 70% 65%, 50% 85%, 30% 65%, 25% 45%, 35% 25%);
    }
    50% {
        transform: translateX(-50%) scale(1.1) rotate(2deg);
        opacity: 0.95;
        filter: brightness(1.4) blur(1px);
        clip-path: polygon(50% 0%, 55% 15%, 65% 35%, 60% 55%, 50% 75%, 40% 55%, 35% 35%, 45% 15%);
    }
    75% {
        transform: translateX(-50%) scale(1.05) rotate(4deg);
        opacity: 1;
        filter: brightness(1.1) blur(0.7px);
        clip-path: polygon(50% 0%, 70% 30%, 80% 50%, 75% 70%, 50% 90%, 25% 70%, 20% 50%, 30% 30%);
    }
    100% {
        transform: translateX(-50%) scale(1.15) rotate(6deg);
        opacity: 0.9;
        filter: brightness(1.3) blur(0.9px);
        clip-path: polygon(50% 0%, 45% 10%, 55% 30%, 50% 50%, 50% 70%, 50% 90%, 55% 70%, 45% 50%, 55% 30%);
    }
}

/* 分裂成金蛇的动画 */
@keyframes goldenSnakes {
    0% {
        clip-path: polygon(50% 0%, 55% 15%, 65% 30%, 60% 50%, 50% 70%, 40% 50%, 35% 30%, 45% 15%);
        filter: brightness(1) hue-rotate(0deg);
    }
    25% {
        clip-path: polygon(30% 0%, 45% 20%, 60% 40%, 70% 60%, 60% 80%, 40% 60%, 30% 40%, 40% 20%);
        filter: brightness(1.3) hue-rotate(10deg);
    }
    50% {
        clip-path: polygon(70% 0%, 55% 25%, 40% 45%, 30% 65%, 40% 85%, 60% 65%, 70% 45%, 60% 25%);
        filter: brightness(1.5) hue-rotate(20deg);
    }
    75% {
        clip-path: polygon(40% 0%, 60% 15%, 70% 35%, 65% 55%, 50% 75%, 35% 55%, 30% 35%, 40% 15%);
        filter: brightness(1.2) hue-rotate(15deg);
    }
    100% {
        clip-path: polygon(50% 0%, 55% 15%, 65% 30%, 60% 50%, 50% 70%, 40% 50%, 35% 30%, 45% 15%);
        filter: brightness(1) hue-rotate(0deg);
    }
}

/* 蓝白色羽冠摇曳动画 */
@keyframes blueWhiteCrown {
    0% {
        clip-path: polygon(50% 0%, 60% 25%, 70% 50%, 60% 75%, 50% 100%, 40% 75%, 30% 50%, 40% 25%);
        filter: brightness(1) hue-rotate(0deg);
    }
    33% {
        clip-path: polygon(50% 0%, 65% 20%, 80% 40%, 75% 60%, 50% 80%, 25% 60%, 20% 40%, 35% 20%);
        filter: brightness(1.4) hue-rotate(15deg);
    }
    66% {
        clip-path: polygon(50% 0%, 35% 30%, 20% 50%, 25% 70%, 50% 90%, 75% 70%, 80% 50%, 65% 30%);
        filter: brightness(1.6) hue-rotate(30deg);
    }
    100% {
        clip-path: polygon(50% 0%, 60% 25%, 70% 50%, 60% 75%, 50% 100%, 40% 75%, 30% 50%, 40% 25%);
        filter: brightness(1) hue-rotate(0deg);
    }
}

/* 火舌分裂动画 */
@keyframes tongueSplit {
    0% {
        clip-path: polygon(50% 0%, 65% 20%, 75% 40%, 70% 60%, 50% 80%, 30% 60%, 25% 40%, 35% 20%);
        transform: translateX(-50%) scale(1);
    }
    25% {
        clip-path: polygon(30% 0%, 50% 25%, 70% 45%, 80% 65%, 70% 85%, 50% 65%, 30% 45%, 40% 25%);
        transform: translateX(-50%) scale(1.1);
    }
    50% {
        clip-path: polygon(70% 0%, 50% 20%, 30% 40%, 20% 60%, 30% 80%, 50% 60%, 70% 40%, 60% 20%);
        transform: translateX(-50%) scale(1.2);
    }
    75% {
        clip-path: polygon(40% 0%, 60% 15%, 80% 35%, 75% 55%, 50% 75%, 25% 55%, 20% 35%, 35% 15%);
        transform: translateX(-50%) scale(1.1);
    }
    100% {
        clip-path: polygon(50% 0%, 65% 20%, 75% 40%, 70% 60%, 50% 80%, 30% 60%, 25% 40%, 35% 20%);
        transform: translateX(-50%) scale(1);
    }
}

/* 羽冠摇曳动画 */
@keyframes featherCrown {
    0% {
        clip-path: polygon(50% 0%, 70% 30%, 80% 60%, 70% 90%, 50% 100%, 30% 90%, 20% 60%, 30% 30%);
        filter: brightness(1) hue-rotate(0deg);
    }
    50% {
        clip-path: polygon(50% 0%, 80% 25%, 90% 50%, 80% 75%, 50% 100%, 20% 75%, 10% 50%, 20% 25%);
        filter: brightness(1.5) hue-rotate(20deg);
    }
    100% {
        clip-path: polygon(50% 0%, 20% 35%, 10% 60%, 20% 85%, 50% 100%, 80% 85%, 90% 60%, 80% 35%);
        filter: brightness(1.8) hue-rotate(40deg);
    }
}

/* 强烈闪烁动画 */
@keyframes intenseFlicker {
    0%, 100% {
        filter: brightness(1) blur(0.8px);
        opacity: 0.9;
    }
    25% {
        filter: brightness(1.6) blur(0.4px);
        opacity: 1;
    }
    50% {
        filter: brightness(2) blur(0.2px);
        opacity: 0.8;
    }
    75% {
        filter: brightness(1.4) blur(0.6px);
        opacity: 1;
    }
}

/* 火焰鞭打效果 */
@keyframes fireWhip {
    0% {
        clip-path: polygon(50% 0%, 60% 15%, 75% 35%, 80% 55%, 75% 75%, 50% 95%, 25% 75%, 20% 55%, 25% 35%, 40% 15%);
        transform: translateX(-50%) rotate(0deg);
    }
    25% {
        clip-path: polygon(50% 0%, 70% 20%, 85% 40%, 90% 60%, 85% 80%, 50% 100%, 15% 80%, 10% 60%, 15% 40%, 30% 20%);
        transform: translateX(-50%) rotate(-15deg);
    }
    50% {
        clip-path: polygon(50% 0%, 30% 25%, 15% 45%, 10% 65%, 15% 85%, 50% 100%, 85% 85%, 90% 65%, 85% 45%, 70% 25%);
        transform: translateX(-50%) rotate(15deg);
    }
    75% {
        clip-path: polygon(50% 0%, 80% 10%, 95% 30%, 100% 50%, 95% 70%, 50% 90%, 5% 70%, 0% 50%, 5% 30%, 20% 10%);
        transform: translateX(-50%) rotate(-10deg);
    }
    100% {
        clip-path: polygon(50% 0%, 60% 15%, 75% 35%, 80% 55%, 75% 75%, 50% 95%, 25% 75%, 20% 55%, 25% 35%, 40% 15%);
        transform: translateX(-50%) rotate(0deg);
    }
}

/* 科技装饰元素 */
.tech-elements {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 2;
}

.tech-line {
    position: absolute;
    background: linear-gradient(90deg, transparent, #00ffff, transparent);
    height: 2px;
    animation: techLineMove 4s linear infinite;
}

.tech-line-1 {
    top: 20%;
    width: clamp(200px, 30vw, 300px);
    left: -clamp(200px, 30vw, 300px);
    animation-delay: 0s;
}

.tech-line-2 {
    top: 80%;
    width: clamp(150px, 25vw, 200px);
    right: -clamp(150px, 25vw, 200px);
    animation-delay: 2s;
}

@keyframes techLineMove {
    0% { transform: translateX(0); opacity: 0; }
    50% { opacity: 1; }
    100% { transform: translateX(600px); opacity: 0; }
}

.tech-circle {
    position: absolute;
    border: 2px solid #00ffff;
    border-radius: 50%;
    animation: techCirclePulse 3s ease-in-out infinite;
}

.tech-circle-1 {
    top: 15%;
    left: 10%;
    width: clamp(30px, 8vw, 50px);
    height: clamp(30px, 8vw, 50px);
    animation-delay: 0s;
}

.tech-circle-2 {
    top: 25%;
    right: 15%;
    width: clamp(20px, 6vw, 30px);
    height: clamp(20px, 6vw, 30px);
    animation-delay: 1s;
}

.tech-circle-3 {
    bottom: 20%;
    left: 20%;
    width: clamp(25px, 7vw, 40px);
    height: clamp(25px, 7vw, 40px);
    animation-delay: 2s;
}

@keyframes techCirclePulse {
    0%, 100% { 
        transform: scale(1);
        opacity: 0.3;
        box-shadow: 0 0 10px #00ffff;
    }
    50% { 
        transform: scale(1.2);
        opacity: 0.8;
        box-shadow: 0 0 20px #00ffff;
    }
}

/* 响应式设计 */
@media (max-width: 768px) {
    .fire-container {
        margin-bottom: 3rem;
    }
    
    .tech-elements {
        display: none; /* 移动端隐藏装饰元素以保持简洁 */
    }
    
    /* 移动端火焰柱调整 */
    .fire-column {
        width: 3% !important;
        min-width: 20px;
    }
    
    .fire-wall {
        padding: 0 1%;
    }
}

@media (max-width: 480px) {
    .main-content {
        padding: 1rem;
    }
    
    .fire-container {
        margin-bottom: 2rem;
    }
    
    /* 小屏幕火焰柱调整 */
    .fire-column {
        width: 2.5% !important;
        min-width: 15px;
    }
    
    .fire-wall {
        padding: 0 0.5%;
    }
}

/* 横屏优化 */
@media (orientation: landscape) and (max-height: 600px) {
    .fire-container {
        margin-bottom: 2rem;
    }
    
    .title-text {
        font-size: clamp(2rem, 6vw, 3rem);
    }
}

/* 火舌分裂动画 */
@keyframes flameSplit {
    0% {
        clip-path: polygon(50% 0%, 60% 20%, 70% 40%, 65% 60%, 50% 80%, 35% 60%, 30% 40%, 40% 20%);
        transform: translateX(-50%) scale(1);
    }
    25% {
        clip-path: polygon(30% 0%, 50% 25%, 70% 45%, 80% 65%, 70% 85%, 50% 65%, 30% 45%, 40% 25%);
        transform: translateX(-50%) scale(1.1);
    }
    50% {
        clip-path: polygon(70% 0%, 50% 20%, 30% 40%, 20% 60%, 30% 80%, 50% 60%, 70% 40%, 60% 20%);
        transform: translateX(-50%) scale(1.2);
    }
    75% {
        clip-path: polygon(40% 0%, 60% 15%, 80% 35%, 75% 55%, 50% 75%, 25% 55%, 20% 35%, 35% 15%);
        transform: translateX(-50%) scale(1.1);
    }
    100% {
        clip-path: polygon(50% 0%, 60% 20%, 70% 40%, 65% 60%, 50% 80%, 35% 60%, 30% 40%, 40% 20%);
        transform: translateX(-50%) scale(1);
    }
}