/*
 * 开发者：姚佳良/YAO JIALIANG/STEVE YAO
 * 源代码及网站内所有功能和商标版权归开发者个人所有。
 */

/* 
 * 生产环境CSS修复 - 确保云端环境样式正确显示
 * 修复CSS变量丢失和压缩问题
 */

/* 防止单词中间换行 - 全局文本处理规则 - 生产环境强制应用 */
* {
  word-break: keep-all !important;
  overflow-wrap: normal !important;
  white-space: normal !important;
}

/* 确保长文本仍能正常换行（在单词边界） - 生产环境强制应用 */
p, div, span, h1, h2, h3, h4, h5, h6, a, button, label, li {
  word-break: keep-all !important;
  overflow-wrap: break-word !important;
  hyphens: none !important;
  -webkit-hyphens: none !important;
  -moz-hyphens: none !important;
  -ms-hyphens: none !important;
}

/* 响应式显示控制 - 移动端和桌面端元素显示 - 最高优先级 */
.mobile-only {
  display: none !important;
}

.desktop-only {
  display: block !important;
}

@media (max-width: 768px) {
  .mobile-only {
    display: block !important;
  }
  
  .desktop-only {
    display: none !important;
  }
  
  /* 确保移动端Header正确显示 */
  header.mobile-only {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
  }
  
  /* 隐藏桌面端Header和相关内容 */
  header.desktop-only,
  .desktop-header-container {
    display: none !important;
  }
}

@media (min-width: 769px) {
  /* 隐藏移动端Header */
  header.mobile-only {
    display: none !important;
  }
  
  /* 确保桌面端Header正确显示 */
  header.desktop-only {
    display: flex !important;
    justify-content: center !important;
  }
}

/* 强制定义所有CSS变量，防止在生产环境被压缩掉 */
:root {
  --hero-title-size-desktop: 2.5rem !important;
  --hero-subtitle-size-desktop: 1.05rem !important;
  --hero-title-size-mobile: 1.8rem !important;
  --hero-subtitle-size-mobile: 0.95rem !important;
  --hero-text-color: #fff !important;
  --hero-subtitle-color: #fcefff !important;
  --hero-line-height-title: 1.35 !important;
  --hero-line-height-subtitle: 1.75 !important;
  --hero-mobile-line-height-subtitle: 1.6 !important;
  --container-width: 1140px !important;
  --container-padding: 1rem !important;
  --container-side-margin: auto !important;
}

/* Hero背景色流体乱流动画 - 多层流动效果 */
@keyframes fluidFlow1 {
  0% { 
    background-position: 0% 30%, 70% 70%, 20% 80%, 90% 20%; 
  }
  25% { 
    background-position: 30% 10%, 80% 80%, 10% 60%, 70% 40%; 
  }
  50% { 
    background-position: 60% 40%, 40% 90%, 80% 20%, 30% 70%; 
  }
  75% { 
    background-position: 90% 70%, 10% 30%, 60% 90%, 80% 10%; 
  }
  100% { 
    background-position: 0% 30%, 70% 70%, 20% 80%, 90% 20%; 
  }
}

@keyframes fluidFlow2 {
  0% { 
    background-position: 100% 60%, 30% 10%, 80% 90%, 10% 40%; 
  }
  30% { 
    background-position: 70% 80%, 60% 30%, 40% 70%, 90% 10%; 
  }
  60% { 
    background-position: 20% 20%, 90% 60%, 10% 30%, 50% 90%; 
  }
  100% { 
    background-position: 100% 60%, 30% 10%, 80% 90%, 10% 40%; 
  }
}

@keyframes fluidFlow3 {
  0% { 
    background-position: 50% 90%, 20% 20%, 90% 50%, 40% 60%; 
  }
  40% { 
    background-position: 10% 40%, 80% 70%, 30% 10%, 70% 90%; 
  }
  80% { 
    background-position: 80% 10%, 40% 90%, 70% 30%, 10% 70%; 
  }
  100% { 
    background-position: 50% 90%, 20% 20%, 90% 50%, 40% 60%; 
  }
}

/* 旧版本简单动画保留作为后备 */
@keyframes heroBGMove {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}

/* 修复生产环境中可能被压缩的关键样式 */
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif !important;
  background: #0f0f0f !important;
  color: #f5f5f5 !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  overflow-x: hidden !important;
}

/* 强制确保Hero区域样式在生产环境正确 */
.home-hero,
.contact-hero,
.ecommerce-hero,
.ai-hero,
.business-hero {
  position: relative !important;
  background: linear-gradient(120deg, #f5247d 0%, #a259c6 100%) !important;
  box-shadow: 0 8px 32px rgba(245, 36, 125, 0.13) !important;
  padding: 4rem 2rem !important;
  color: #fff !important;
  text-align: center !important;
  width: 100% !important;
  max-width: 1000px !important;
  margin: 1rem auto 2rem auto !important;
  border-radius: 32px !important;
  overflow: hidden !important;
  z-index: 1 !important;
}

/* 确保容器宽度在生产环境正确 */
.container,
.service-page > *,
.service-page section,
.service-page header,
.service-page main,
.section,
.contact-grid,
.contact-content,
.cta-section,
.service-details,
.service-features,
.cards {
  width: 100% !important;
  max-width: var(--container-width) !important;
  margin-left: var(--container-side-margin) !important;
  margin-right: var(--container-side-margin) !important;
  padding-left: var(--container-padding) !important;
  padding-right: var(--container-padding) !important;
}

/* 修复移动端响应式在生产环境的问题 */
@media (max-width: 768px) {
  .home-hero,
  .contact-hero,
  .ecommerce-hero,
  .ai-hero,
  .business-hero {
    padding: 2rem 1rem !important;
    margin: 1rem auto 2rem auto !important;
    max-width: 95% !important;
  }
  
  .container,
  .service-page > *,
  .contact-grid {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
}

/* 强制确保Header样式在生产环境正确 */
header.desktop-only {
  display: flex !important;
  justify-content: center !important;
  width: 100% !important;
  background: #111 !important;
  border-bottom: 1px solid #333 !important;
  padding: 0 !important;
}

/* 移动端Header特定样式 - 让内联样式完全控制 */

header > div, header > nav {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  width: 100% !important;
  max-width: 1140px !important;
  padding: 1.25rem 0 !important;
}

/* 特别针对桌面Header内层容器，确保无左右padding */
.desktop-header-container {
  padding: 0 !important;
}

/* 确保导航样式在生产环境正确 */
nav {
  flex: 1 !important;
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  gap: 1.5rem !important;
}

nav a {
  text-decoration: none !important;
  color: #f0f0f0 !important;
  font-weight: 500 !important;
}

/* 确保语言切换器样式在生产环境正确 */
.lang-switcher select {
  padding: 4px !important;
  border-radius: 4px !important;
  background: #222 !important;
  color: #fff !important;
  border: 1px solid #444 !important;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Noto Color Emoji', 'Apple Color Emoji', 'Segoe UI Emoji', sans-serif !important;
}

/* 统一间距标准 - 2rem等距设计 */
.service-features {
  gap: 2rem !important;
  margin-bottom: 2rem !important;
}

.cta-section {
  margin: 2rem auto !important;
}

/* 统一所有页面元素间距 */
.service-details {
  margin-bottom: 2rem !important;
}

/* 确保桌面端卡片网格间距统一 */
.desktop-grid {
  gap: 2rem !important;
  margin-bottom: 2rem !important;
}

/* 桌面端专用 - 2rem统一间距标准 */
@media (min-width: 769px) {
  /* Body和Header之间的距离 */
  main.desktop-only {
    margin-top: 0 !important;
  }
  
  /* Body和Footer之间的距离 */
  footer.desktop-only {
    margin-top: 0 !important;
  }
  
  /* 页面内主要标题的统一间距 */
  .desktop-only h2:not([style*="margin"]) {
    margin: 0 0 2rem 0 !important;
  }
  
  /* 服务页面主要内容区域的标题间距 */
  .desktop-only section h2,
  .desktop-only .service-content h2 {
    margin-top: 0 !important;
    margin-bottom: 2rem !important;
  }
  
  /* 确保桌面端服务特性section与Hero之间的间距 */
  .desktop-only .service-features {
    margin-top: 2rem !important;
  }
  
  /* 确保桌面端CTA section的上间距 */
  .desktop-only .cta-section,
  .desktop-only section[style*="linear-gradient"] {
    margin-top: 2rem !important;
  }
}

/* 流体乱流Hero样式 */
.fluid-hero {
  position: relative !important;
  overflow: hidden !important;
  background: 
    radial-gradient(circle at 30% 40%, rgba(245, 36, 125, 0.8) 0%, transparent 50%),
    radial-gradient(circle at 70% 80%, rgba(162, 89, 198, 0.9) 0%, transparent 50%),
    radial-gradient(circle at 90% 20%, rgba(245, 36, 125, 0.6) 0%, transparent 40%),
    radial-gradient(circle at 20% 90%, rgba(162, 89, 198, 0.7) 0%, transparent 50%),
    linear-gradient(120deg, #f5247d 0%, #a259c6 100%) !important;
  background-size: 80% 80%, 60% 60%, 90% 90%, 70% 70%, 100% 100% !important;
  animation: fluidFlow1 12s ease-in-out infinite !important;
}

.fluid-hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    radial-gradient(circle at 80% 60%, rgba(245, 36, 125, 0.6) 0%, transparent 40%),
    radial-gradient(circle at 20% 30%, rgba(162, 89, 198, 0.8) 0%, transparent 50%),
    radial-gradient(circle at 60% 90%, rgba(245, 36, 125, 0.7) 0%, transparent 45%),
    radial-gradient(circle at 40% 10%, rgba(162, 89, 198, 0.5) 0%, transparent 35%);
  background-size: 70% 70%, 85% 85%, 65% 65%, 95% 95%;
  animation: fluidFlow2 8s ease-in-out infinite reverse;
  z-index: 1;
}

.fluid-hero::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    radial-gradient(circle at 50% 70%, rgba(245, 36, 125, 0.4) 0%, transparent 30%),
    radial-gradient(circle at 90% 40%, rgba(162, 89, 198, 0.6) 0%, transparent 40%),
    radial-gradient(circle at 10% 80%, rgba(245, 36, 125, 0.5) 0%, transparent 35%);
  background-size: 100% 100%, 75% 75%, 85% 85%;
  animation: fluidFlow3 15s ease-in-out infinite;
  z-index: 2;
}

.fluid-hero > * {
  position: relative;
  z-index: 3;
}