/* 追加：中式文化元素动效 */

/* 青铜回纹动态效果 */
.bronze-pattern {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
  opacity: 0.03;
  pointer-events: none;
}

.bronze-pattern::before {
  content: '';
  position: absolute;
  width: 200%;
  height: 200%;
  background-image: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 10px,
    #C41230 10px,
    #C41230 12px
  );
  animation: bronzeFlow 30s linear infinite;
}

@keyframes bronzeFlow {
  from { transform: translate(0, 0); }
  to { transform: translate(-50%, -50%); }
}

/* 祥云动画 */
.cloud-decoration {
  position: absolute;
  opacity: 0.05;
  font-size: 120px;
  animation: cloudDrift 20s ease-in-out infinite;
  pointer-events: none;
}

.cloud-decoration.left {
  left: -20px;
  top: 50%;
}

.cloud-decoration.right {
  right: -20px;
  top: 50%;
  animation-delay: -10s;
}

@keyframes cloudDrift {
  0%, 100% { transform: translateY(0) translateX(0); }
  25% { transform: translateY(-10px) translateX(5px); }
  50% { transform: translateY(0) translateX(0); }
  75% { transform: translateY(10px) translateX(-5px); }
}

/* 水墨晕染效果 */
.ink-wash {
  position: absolute;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(196, 18, 48, 0.08) 0%,
    rgba(196, 18, 48, 0.03) 40%,
    transparent 70%
  );
  animation: inkSpread 8s ease-in-out infinite;
  pointer-events: none;
}

@keyframes inkSpread {
  0%, 100% { transform: scale(1); opacity: 0.5; }
  50% { transform: scale(1.3); opacity: 0.8; }
}

/* 山脉剪影 */
.mountain-silhouette {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 200px;
  background: linear-gradient(
    to top,
    rgba(196, 18, 48, 0.05) 0%,
    transparent 100%
  );
  clip-path: polygon(
    0% 100%,
    10% 60%,
    20% 80%,
    30% 40%,
    40% 70%,
    50% 30%,
    60% 65%,
    70% 45%,
    80% 75%,
    90% 50%,
    100% 100%
  );
  pointer-events: none;
}

/* 黄河水波纹 */
.river-wave {
  position: absolute;
  bottom: 0;
  width: 200%;
  height: 60px;
  background: repeating-linear-gradient(
    90deg,
    transparent,
    transparent 40px,
    rgba(212, 175, 55, 0.03) 40px,
    rgba(212, 175, 55, 0.03) 80px
  );
  animation: waveFlow 10s linear infinite;
  pointer-events: none;
}

@keyframes waveFlow {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* 竹叶摆动 */
.bamboo-leaf {
  position: absolute;
  width: 30px;
  height: 60px;
  background: linear-gradient(
    to top,
    rgba(82, 196, 26, 0.1),
    transparent
  );
  border-radius: 0 50% 50% 0;
  transform-origin: bottom center;
  animation: leafSway 4s ease-in-out infinite;
  pointer-events: none;
}

@keyframes leafSway {
  0%, 100% { transform: rotate(-5deg); }
  50% { transform: rotate(5deg); }
}

/* 卡片悬停鎏金光效 */
.card-hover-glow {
  position: relative;
  overflow: hidden;
}

.card-hover-glow::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    45deg,
    transparent 40%,
    rgba(212, 175, 55, 0.1) 50%,
    transparent 60%
  );
  transform: translateX(-100%);
  transition: transform 0.6s;
}

.card-hover-glow:hover::after {
  transform: translateX(100%);
}

/* 加载动画 - 中式回环 */
.loading-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid #E8E0D5;
  border-top-color: #C41230;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* 移动端适配 */
@media (max-width: 768px) {
  .cloud-decoration,
  .ink-wash,
  .bamboo-leaf,
  .bronze-pattern {
    display: none !important;
  }
  
  .hero h1 {
    font-size: 28px !important;
    letter-spacing: 4px !important;
  }
  
  .features-grid,
  .pricing-grid {
    grid-template-columns: 1fr !important;
  }
  
  .stats-bar-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  
  .footer-grid {
    grid-template-columns: 1fr !important;
  }
}

/* 低性能设备降级 */
.animations-disabled .hero-particle,
.animations-disabled .cloud-decoration,
.animations-disabled .ink-wash,
.animations-disabled .bamboo-leaf,
.animations-disabled .bronze-pattern {
  display: none !important;
}

.animations-disabled * {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
}