/* 小红书营销服务区块动态背景效果 */
.xhs-marketing-services-section {
    position: relative;
    background: linear-gradient(135deg, #fff2f4 0%, #ffffff 100%);
    overflow: hidden;
    z-index: 1;
}

/* 动态波浪背景 */
.xhs-marketing-services-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(circle at 20% 30%, rgba(254, 44, 85, 0.05) 0%, rgba(254, 44, 85, 0) 50%),
        radial-gradient(circle at 80% 60%, rgba(254, 44, 85, 0.08) 0%, rgba(254, 44, 85, 0) 60%);
    z-index: -1;
}

/* 添加动态粒子效果 */
.xhs-dynamic-particles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    overflow: hidden;
}

.xhs-particle {
    position: absolute;
    background: linear-gradient(135deg, rgba(254, 44, 85, 0.5) 0%, rgba(255, 127, 156, 0.5) 100%);
    border-radius: 50%;
    filter: blur(3px);
    opacity: 0.1;
    animation: float 15s infinite ease-in-out;
}

.xhs-particle:nth-child(1) {
    width: 180px;
    height: 180px;
    top: 10%;
    left: 5%;
    animation-delay: 0s;
    animation-duration: 20s;
}

.xhs-particle:nth-child(2) {
    width: 150px;
    height: 150px;
    top: 60%;
    right: 10%;
    animation-delay: 3s;
    animation-duration: 22s;
}

.xhs-particle:nth-child(3) {
    width: 200px;
    height: 200px;
    bottom: 5%;
    left: 15%;
    animation-delay: 5s;
    animation-duration: 18s;
}

.xhs-particle:nth-child(4) {
    width: 120px;
    height: 120px;
    top: 30%;
    right: 25%;
    animation-delay: 7s;
    animation-duration: 25s;
}

.xhs-particle:nth-child(5) {
    width: 90px;
    height: 90px;
    top: 40%;
    left: 40%;
    animation-delay: 10s;
    animation-duration: 30s;
}

/* 悬浮动画 */
@keyframes float {
    0% {
        transform: translate(0, 0) rotate(0deg) scale(1);
    }
    25% {
        transform: translate(10px, 15px) rotate(5deg) scale(1.05);
    }
    50% {
        transform: translate(5px, -10px) rotate(10deg) scale(1.1);
    }
    75% {
        transform: translate(-15px, 5px) rotate(5deg) scale(1.05);
    }
    100% {
        transform: translate(0, 0) rotate(0deg) scale(1);
    }
}

/* 闪光效果 */
.xhs-shimmer {
    position: absolute;
    width: 150%;
    height: 150%;
    top: -25%;
    left: -25%;
    background: linear-gradient(
        to right,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.05) 25%,
        rgba(255, 255, 255, 0.1) 35%,
        rgba(255, 255, 255, 0.05) 45%,
        rgba(255, 255, 255, 0) 70%
    );
    transform: rotate(30deg);
    animation: shimmer 8s infinite linear;
    z-index: -1;
}

@keyframes shimmer {
    0% {
        transform: rotate(30deg) translateX(-100%);
    }
    100% {
        transform: rotate(30deg) translateX(100%);
    }
}

/* 响应式调整 */
@media (max-width: 768px) {
    .xhs-particle {
        opacity: 0.08;
    }
    
    .xhs-particle:nth-child(1) {
        width: 120px;
        height: 120px;
    }
    
    .xhs-particle:nth-child(2) {
        width: 100px;
        height: 100px;
    }
    
    .xhs-particle:nth-child(3) {
        width: 140px;
        height: 140px;
    }
    
    .xhs-particle:nth-child(4) {
        width: 80px;
        height: 80px;
    }
    
    .xhs-particle:nth-child(5) {
        width: 60px;
        height: 60px;
    }
}