/* 动态背景元素 - 高斯模糊圆形 */
.animated-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

.bg-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.15;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

/* 第一个圆形 - 微信绿色 */
.blob-1 {
    width: 400px;
    height: 400px;
    background: linear-gradient(135deg, #05C160 0%, #04D96D 100%);
    top: 10%;
    left: 15%;
    animation: float-1 8s infinite;
}

/* 第二个圆形 - 蓝色 */
.blob-2 {
    width: 350px;
    height: 350px;
    background: linear-gradient(135deg, #0058bc 0%, #0070eb 100%);
    top: 60%;
    right: 10%;
    animation: float-2 10s infinite;
}

/* 第三个圆形 - 紫色 */
.blob-3 {
    width: 300px;
    height: 300px;
    background: linear-gradient(135deg, #9333ea 0%, #c084fc 100%);
    bottom: 15%;
    left: 25%;
    animation: float-3 12s infinite;
}

/* 第四个圆形 - 青色 */
.blob-4 {
    width: 280px;
    height: 280px;
    background: linear-gradient(135deg, #06b6d4 0%, #22d3ee 100%);
    top: 30%;
    right: 30%;
    animation: float-4 9s infinite;
}

/* 第五个圆形 - 粉色 */
.blob-5 {
    width: 320px;
    height: 320px;
    background: linear-gradient(135deg, #ec4899 0%, #f472b6 100%);
    top: 70%;
    left: 50%;
    animation: float-5 11s infinite;
}

/* 浮动动画 */
@keyframes float-1 {
    0%, 100% {
        transform: translate(0, 0) scale(1);
    }
    50% {
        transform: translate(30px, -50px) scale(1.1);
    }
}

@keyframes float-2 {
    0%, 100% {
        transform: translate(0, 0) scale(1);
    }
    50% {
        transform: translate(-40px, 60px) scale(0.9);
    }
}

@keyframes float-3 {
    0%, 100% {
        transform: translate(0, 0) scale(1);
    }
    50% {
        transform: translate(50px, -40px) scale(1.15);
    }
}

@keyframes float-4 {
    0%, 100% {
        transform: translate(0, 0) scale(1);
    }
    50% {
        transform: translate(-30px, -70px) scale(0.95);
    }
}

@keyframes float-5 {
    0%, 100% {
        transform: translate(0, 0) scale(1);
    }
    50% {
        transform: translate(40px, 50px) scale(1.05);
    }
}

/* 确保主内容在背景之上 */
header,
main {
    position: relative;
    z-index: 1;
}

/* 响应式调整 - 移动端减少模糊效果 */
@media (max-width: 768px) {
    .bg-blob {
        filter: blur(60px);
        opacity: 0.1;
    }
    
    .blob-1 {
        width: 300px;
        height: 300px;
    }
    
    .blob-2 {
        width: 250px;
        height: 250px;
    }
    
    .blob-3 {
        width: 220px;
        height: 220px;
    }
    
    .blob-4 {
        width: 200px;
        height: 200px;
    }
    
    .blob-5 {
        width: 240px;
        height: 240px;
    }
}

/* 暗色模式支持 */
@media (prefers-color-scheme: dark) {
    .bg-blob {
        opacity: 0.08;
    }
}

/* 模态框动画 */
@keyframes scale-in {
    0% {
        opacity: 0;
        transform: scale(0.9);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.animate-scale-in {
    animation: scale-in 0.3s ease-out;
}

/* 客服按钮脉冲效果 */
@keyframes pulse-ring {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    100% {
        transform: scale(1.5);
        opacity: 0;
    }
}

#customerServiceBtn::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: var(--wechat-green);
    animation: pulse-ring 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    z-index: -1;
}