/* 烟雾弥漫动画效果 */

/* 烟雾容器 */
.smoke-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 999;
    overflow: hidden;
}

/* 单个烟雾粒子 */
.smoke-particle {
    position: fixed;
    background: radial-gradient(circle, rgba(139, 0, 0, 0.4) 0%, rgba(139, 0, 0, 0.2) 50%, rgba(139, 0, 0, 0) 100%);
    border-radius: 50%;
    filter: blur(40px);
    opacity: 0;
    will-change: transform, opacity;
    z-index: 999;
}

/* 烟雾上升动画 */
@keyframes smokeRise {
    0% {
        transform: translateY(0) translateX(0) scale(0.5);
        opacity: 0;
    }
    15% {
        opacity: 0.2;
    }
    50% {
        opacity: 0.12;
    }
    100% {
        transform: translateY(-100vh) translateX(var(--drift, 0px)) scale(1.5);
        opacity: 0;
    }
}

/* 烟雾漂移动画 */
@keyframes smokeDrift {
    0% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(var(--drift-x, 50px));
    }
    100% {
        transform: translateX(0);
    }
}

/* 烟雾旋转动画 */
@keyframes smokeRotate {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* 烟雾脉动动画 */
@keyframes smokePulse {
    0%, 100% {
        filter: blur(40px) brightness(1);
    }
    50% {
        filter: blur(50px) brightness(1.2);
    }
}

/* 烟雾粒子动画应用 */
.smoke-particle.active {
    animation: smokeRise var(--duration, 8s) ease-out forwards,
              smokeDrift var(--drift-duration, 6s) ease-in-out infinite,
              smokePulse var(--pulse-duration, 4s) ease-in-out infinite;
}

/* 不同大小的烟雾粒子 */
.smoke-particle.size-small {
    width: 80px;
    height: 80px;
}

.smoke-particle.size-medium {
    width: 150px;
    height: 150px;
}

.smoke-particle.size-large {
    width: 250px;
    height: 250px;
}

/* 不同颜色的烟雾 */
.smoke-particle.color-dark {
    background: radial-gradient(circle, rgba(80, 0, 0, 0.5) 0%, rgba(80, 0, 0, 0.2) 50%, rgba(80, 0, 0, 0) 100%);
}

.smoke-particle.color-medium {
    background: radial-gradient(circle, rgba(139, 0, 0, 0.4) 0%, rgba(139, 0, 0, 0.2) 50%, rgba(139, 0, 0, 0) 100%);
}

.smoke-particle.color-light {
    background: radial-gradient(circle, rgba(200, 50, 50, 0.3) 0%, rgba(200, 50, 50, 0.1) 50%, rgba(200, 50, 50, 0) 100%);
}

/* 烟雾背景叠加效果 */
.smoke-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        radial-gradient(ellipse at 20% 50%, rgba(139, 0, 0, 0.1) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 50%, rgba(139, 0, 0, 0.08) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 0%, rgba(139, 0, 0, 0.05) 0%, transparent 60%);
    pointer-events: none;
    z-index: 999;
    animation: smokeOverlayPulse 6s ease-in-out infinite;
}

@keyframes smokeOverlayPulse {
    0%, 100% {
        opacity: 0.03;
    }
    50% {
        opacity: 0.08;
    }
}

/* 烟雾纹理效果 */
.smoke-texture {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><filter id="noise"><feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="4" result="noise" /></filter><rect width="100" height="100" fill="rgba(139,0,0,0.02)" filter="url(%23noise)" /></svg>');
    background-size: 100px 100px;
    pointer-events: none;
    z-index: 999;
    animation: smokeTextureShift 20s linear infinite;
}

@keyframes smokeTextureShift {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: 100px 100px;
    }
}

/* 烟雾光晕效果 */
.smoke-glow {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        radial-gradient(circle at 30% 30%, rgba(255, 100, 100, 0.05) 0%, transparent 40%),
        radial-gradient(circle at 70% 70%, rgba(255, 100, 100, 0.03) 0%, transparent 40%);
    pointer-events: none;
    z-index: 999;
    animation: smokeGlowPulse 8s ease-in-out infinite;
}

@keyframes smokeGlowPulse {
    0%, 100% {
        opacity: 0.05;
    }
    50% {
        opacity: 0.15;
    }
}

/* 响应式调整 */
@media (max-width: 768px) {
    .smoke-particle.size-large {
        width: 180px;
        height: 180px;
    }

    .smoke-particle.size-medium {
        width: 120px;
        height: 120px;
    }

    .smoke-particle.size-small {
        width: 60px;
        height: 60px;
    }
}

/* 性能优化 */
@media (prefers-reduced-motion: reduce) {
    .smoke-particle.active {
        animation: none;
        opacity: 0.1;
    }

    .smoke-overlay {
        animation: none;
        opacity: 0.2;
    }

    .smoke-texture {
        animation: none;
    }

    .smoke-glow {
        animation: none;
        opacity: 0.2;
    }
}