/* ============================================
   生动形象的板块动画 - 复制到 index.html 的 </style> 之前
============================================ */

/* 卡片渐入动画 */
@keyframes slideUpFadeIn {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

/* 数字跳动动画 */
@keyframes numberPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

/* 呼吸灯动画 */
@keyframes breathe {
    0%, 100% { opacity: 0.6; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.05); }
}

/* 脉冲波纹动画 */
@keyframes ripple {
    0% { transform: scale(1); opacity: 0.8; }
    100% { transform: scale(1.5); opacity: 0; }
}

/* 闪光划过动画 */
@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

/* 弹跳动画 */
@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

/* 渐变边框动画 */
@keyframes borderGlow {
    0%, 100% { border-color: rgba(99, 102, 241, 0.3); box-shadow: 0 0 10px rgba(99, 102, 241, 0.2); }
    50% { border-color: rgba(34, 197, 94, 0.5); box-shadow: 0 0 20px rgba(34, 197, 94, 0.3); }
}

/* 旋转渐入动画 */
@keyframes rotateScaleIn {
    from { opacity: 0; transform: rotate(-10deg) scale(0.9); }
    to { opacity: 1; transform: rotate(0deg) scale(1); }
}

/* Hero区域增强 */
.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 30% 50%, rgba(99, 102, 241, 0.1) 0%, transparent 50%),
                radial-gradient(circle at 70% 80%, rgba(236, 72, 153, 0.1) 0%, transparent 50%);
    animation: breathe 4s ease-in-out infinite;
    pointer-events: none;
}

.hero-badge { animation: slideUpFadeIn 0.8s ease-out, breathe 3s ease-in-out infinite 0.8s; }
.hero-platform-badge { animation: slideUpFadeIn 0.8s ease-out 0.2s both, shimmer 3s ease-in-out infinite; }
.hero h1 { animation: slideUpFadeIn 0.8s ease-out 0.4s both; }
.hero-highlight { animation: slideUpFadeIn 0.8s ease-out 0.6s both, numberPulse 2s ease-in-out infinite 1.5s; }
.hero-description { animation: slideUpFadeIn 0.8s ease-out 0.8s both; }
.hero-stats { animation: slideUpFadeIn 0.8s ease-out 1s both; }
.hero-cta { animation: slideUpFadeIn 0.8s ease-out 1.2s both; }
.hero-image-wrapper { animation: slideUpFadeIn 0.8s ease-out 1.4s both; }

/* 功能介绍卡片 */
.feature-card { opacity: 0; animation: slideUpFadeIn 0.6s ease-out forwards; }
.feature-card:nth-child(1) { animation-delay: 0.1s; }
.feature-card:nth-child(2) { animation-delay: 0.2s; }
.feature-card:nth-child(3) { animation-delay: 0.3s; }
.feature-card:nth-child(4) { animation-delay: 0.4s; }
.feature-card:hover { animation: borderGlow 2s ease-in-out infinite; }

/* AI托管功能卡片 */
.feature-box { opacity: 0; animation: rotateScaleIn 0.7s ease-out forwards; }
.feature-box:nth-child(1) { animation-delay: 0.1s; }
.feature-box:nth-child(2) { animation-delay: 0.2s; }
.feature-box:nth-child(3) { animation-delay: 0.3s; }
.feature-box:nth-child(4) { animation-delay: 0.4s; }
.feature-box:nth-child(5) { animation-delay: 0.5s; }
.feature-box:nth-child(6) { animation-delay: 0.6s; }
.feature-box:nth-child(7) { animation-delay: 0.7s; }
.feature-box:nth-child(8) { animation-delay: 0.8s; }
.feature-box:hover { animation: borderGlow 1.5s ease-in-out infinite; }

/* 指标卡片 */
.metric-card { opacity: 0; animation: slideUpFadeIn 0.5s ease-out forwards; position: relative; overflow: hidden; }
.metric-card:nth-child(1) { animation-delay: 0.1s; }
.metric-card:nth-child(2) { animation-delay: 0.2s; }
.metric-card:nth-child(3) { animation-delay: 0.3s; }
.metric-card:nth-child(4) { animation-delay: 0.4s; }
.metric-card:nth-child(5) { animation-delay: 0.5s; }
.metric-card:nth-child(6) { animation-delay: 0.6s; }
.metric-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(99, 102, 241, 0.1), transparent);
    animation: shimmer 3s ease-in-out infinite;
    background-size: 200% 100%;
}
.metric-card:hover { animation: borderGlow 2s ease-in-out infinite, bounce 1s ease-in-out infinite; }

/* AI功能卡片 */
.ai-feature-card { opacity: 0; animation: rotateScaleIn 0.6s ease-out forwards; }
.ai-feature-card:nth-child(1) { animation-delay: 0.1s; }
.ai-feature-card:nth-child(2) { animation-delay: 0.2s; }
.ai-feature-card:nth-child(3) { animation-delay: 0.3s; }
.ai-feature-card:nth-child(4) { animation-delay: 0.4s; }
.ai-feature-card:hover { animation: borderGlow 1.5s ease-in-out infinite; }

/* 营销自动化卡片 */
.marketing-card { opacity: 0; animation: slideUpFadeIn 0.6s ease-out forwards; position: relative; }
.marketing-card:nth-child(1) { animation-delay: 0.1s; }
.marketing-card:nth-child(2) { animation-delay: 0.2s; }
.marketing-card:nth-child(3) { animation-delay: 0.3s; }
.marketing-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 16px;
    border: 2px solid transparent;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.3), rgba(236, 72, 153, 0.3)) border-box;
    -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: destination-out;
    mask-composite: exclude;
    animation: borderGlow 3s ease-in-out infinite;
    pointer-events: none;
    opacity: 0;
}
.marketing-card:hover::after { opacity: 1; }
.marketing-card:hover { animation: bounce 1s ease-in-out infinite; }

/* 客户运营卡片 */
.operation-card { opacity: 0; animation: slideUpFadeIn 0.6s ease-out forwards; }
.operation-card:nth-child(1) { animation-delay: 0.1s; }
.operation-card:nth-child(2) { animation-delay: 0.2s; }
.operation-card:nth-child(3) { animation-delay: 0.3s; }
.operation-card:nth-child(4) { animation-delay: 0.4s; }
.operation-card:hover { animation: borderGlow 1.5s ease-in-out infinite; }

/* 价格卡片 */
.pricing-card { opacity: 0; animation: slideUpFadeIn 0.6s ease-out forwards; position: relative; }
.pricing-card:nth-child(1) { animation-delay: 0.1s; }
.pricing-card:nth-child(2) { animation-delay: 0.2s; }
.pricing-card:nth-child(3) { animation-delay: 0.3s; }
.pricing-card.featured { animation: slideUpFadeIn 0.6s ease-out forwards, borderGlow 2s ease-in-out infinite; }
.pricing-card:hover { 
    box-shadow: 0 0 30px rgba(99, 102, 241, 0.3);
    transform: translateY(-8px);
}

/* CTA区域 */
.cta { position: relative; overflow: hidden; }
.cta::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(34, 197, 94, 0.1) 0%, transparent 50%),
                radial-gradient(circle at 80% 20%, rgba(99, 102, 241, 0.1) 0%, transparent 40%);
    animation: breathe 10s ease-in-out infinite;
    pointer-events: none;
}

/* Live指示器 */
.live-dot { width: 8px; height: 8px; background: #22c55e; border-radius: 50%; position: relative; }
.live-dot::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    background: #22c55e;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    animation: ripple 2s ease-out infinite;
}

/* 统计数字动画 */
.stat-number { animation: numberPulse 2s ease-in-out infinite; }

/* 渐变文字动画 */
.gradient-text {
    background: linear-gradient(270deg, #22c55e, #06b6d4, #6366f1, #ec4899, #22c55e);
    background-size: 400% 400%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradientFlow 8s ease infinite;
}

/* 图片hover放大效果 - 排除Hero区域的图片 */
/* 首先移除容器的overflow限制 */
section:not(.hero) .feature-box,
section:not(.hero) .feature-box-image,
section:not(.hero) .marketing-card,
section:not(.hero) .operation-card {
    overflow: visible;
}

/* 图片基础样式 - 默认层级为auto */
section:not(.hero) img,
.feature-box-image img,
.marketing-card img,
.operation-card img {
    transition: transform 0.3s ease, z-index 0.3s ease;
    position: relative;
    z-index: auto;
}

/* hover时放大到1.5倍并提升层级到9999 */
section:not(.hero) img:hover,
.feature-box-image img:hover,
.marketing-card img:hover,
.operation-card img:hover {
    transform: scale(1.5);
    z-index: 9999;
    box-shadow: 0 0 30px rgba(99, 102, 241, 0.5);
}