/* style.css - 最终定稿版 (配合您敲定的 HTML) */

/* --- 全局样式 --- */
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: #f0f4f8; /* 统一的页面背景色 */
  color: #333;
  min-height: 100vh;
  height: auto;
  overflow-y: auto;
  position: relative; /* body 相对定位，为 .app-container 内的绝对定位元素提供上下文 */
}

.app-container {
  position: relative; /* app-container 相对定位，为 .language-toggle-button 提供上下文 */
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: visible;
}

/* --- Header 区域 --- */
.app-header {
  width: 100%;
  max-width: 100%;
  background: linear-gradient(to bottom, #dee8f1, #e0eaf2); /* Header 背景渐变 */
  padding: 60px 40px 40px 40px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center; /* 内容居中 */
  justify-content: center;
  text-align: center;
  position: relative; /* 移除 position: relative，因为按钮已移出 Header */
  z-index: 10;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05); /* 柔和的底部阴影 */
}

.project-title {
  font-size: 5.0em;
  color: #1a2a6c;
  margin-bottom: 25px;
  letter-spacing: 1.5px;
  opacity: 0;
  transform: translateY(-40px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
  text-shadow: 0 5px 15px rgba(26, 42, 108, 0.25);
  font-weight: 800;
}

.feature-intro {
  font-size: 2.2em;
  color: #3a4d6c;
  margin-bottom: 50px;
  opacity: 0;
  transform: translateY(-40px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
  font-weight: 400;
}

/* --- 语言切换按钮 - 角标风格 (配合 HTML 结构) --- */
#language-toggle-button { /* 使用 ID 选择器，因为它在 HTML 中是唯一的 */
  position: absolute;
  top: 40px;
  right: 40px;
  width: auto; /* 宽度自适应内容 */
  padding: 8px 16px; /* 紧凑的内边距 */
  font-size: 1.1em; /* 调整字体大小 */
  line-height: 1.4; /* 调整行高 */
  background: rgba(255, 255, 255, 0.8); /* 更淡的半透明背景 */
  color: #3a4d6c; /* 文字颜色 */
  border: 1px solid rgba(173, 201, 230, 0.6); /* 淡蓝色描边 */
  border-radius: 8px; /* 圆角 */
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
  z-index: 20; /* 确保在 Header 和其他内容之上 */
  opacity: 0;
  transform: translateY(-40px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out, box-shadow 0.3s ease, border-color 0.3s ease;
  box-shadow: 0 4px 12px rgba(173, 201, 230, 0.3); /* 淡阴影 */
}

#language-toggle-button:hover {
  background: rgba(255, 255, 255, 0.95); /* 悬停时背景更明显 */
  border-color: #50a3f0; /* 悬停时边框变蓝 */
  transform: translateY(-40px) scale(1.05); /* 轻微放大 */
  box-shadow: 0 6px 18px rgba(80, 163, 240, 0.4); /* 悬停时阴影 */
}

/* --- 时间轴主内容区域 --- */
.main-content-wrapper {
  width: 100%;
  max-width: 100%;
  background-color: #ffffff; /* Main content 背景色 */
  padding: 0 20px; /* 左右留白 */
  box-sizing: border-box;
  flex-grow: 1;
  overflow: visible;
}

.main-content {
  position: relative;
  width: 100%;
  max-width: 960px; /* 时间轴内容最大宽度 */
  margin: 0 auto; /* 内容居中 */
  overflow: visible;
  padding-top: 0;
  /* padding-bottom 由 JS 动态设置 */
}

/* --- 中线样式 --- */
.center-line {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  background: linear-gradient(to bottom, #4a90e2, #3498db, #2980b9, transparent);
  z-index: 1;
}

.center-line::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%) scale(0);
  width: 18px;
  height: 18px;
  background: linear-gradient(135deg, #50a3f0, #3a90e2);
  border-radius: 50%;
  z-index: 2;
  box-shadow: 0 0 20px rgba(80, 163, 240, 0.8), 0 0 10px rgba(58, 144, 226, 0.7);
  opacity: 0;
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

/* --- 功能节点样式 --- */
.feature-item {
  position: absolute;
  width: 45%;
  padding: 30px;
  box-sizing: border-box;
  z-index: 3;
  opacity: 0;
  transform: scale(0.95);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.feature-item.left {
  left: 0;
  padding-right: 45px;
  text-align: left;
}

.feature-item.left::before {
  content: '';
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  height: 4px;
  background: linear-gradient(to right, #50a3f0, #3a90e2);
  z-index: -1;
  box-sizing: border-box;
  right: -45px;
  width: 45px;
}

.feature-item.right {
  right: 0;
  padding-left: 45px;
  text-align: left;
}

.feature-item.right::before {
  content: '';
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  height: 4px;
  background: linear-gradient(to left, #50a3f0, #3a90e2);
  z-index: -1;
  box-sizing: border-box;
  left: -45px;
  width: 45px;
}

.content-box {
  background-color: rgba(255, 255, 255, 0.95);
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12), 0 4px 15px rgba(0, 0, 0, 0.1);
  padding: 30px;
  width: 100%;
  box-sizing: border-box;
  transition: all 0.4s ease-out;
}

.feature-title {
  font-size: 1.5em;
  font-weight: 600;
  margin-bottom: 12px;
  color: #1a2a6c;
}

.feature-description {
  font-size: 1.05em;
  line-height: 1.8;
  color: #3a4d6c;
}

/* --- 响应式设计 --- */
@media (max-width: 1100px) {
  .app-header {
    padding: 80px 30px 50px 30px;
  }
  .project-title {
    font-size: 4.0em;
  }
  .feature-intro {
    font-size: 2.0em;
  }
  #language-toggle-button {
    top: 30px;
    right: 30px;
    padding: 8px 14px; /* 响应式调整 padding */
    font-size: 1.1em;
  }
  .main-content-wrapper {
      padding: 0 15px;
  }
  .main-content {
      max-width: 95%;
  }
}

@media (max-width: 768px) {
  body {
      height: auto;
      overflow-y: auto;
  }
  .app-container {
      min-height: auto;
      height: auto;
      padding: 0; /* 移动端不留左右边框 */
  }
  .app-header {
    margin-bottom: 60px;
    padding: 50px 15px 30px 15px; /* 移动端 header 内边距 */
    background: linear-gradient(to bottom, #50a3f0, #3a90e2); /* 保持 Header 背景色 */
    box-shadow: none;
  }
  .project-title {
      font-size: 3.2em; /* 减小标题字体 */
      margin-bottom: 15px;
      transform: translateY(-30px);
  }
  .feature-intro {
      font-size: 1.8em; /* 减小副标题字体 */
      margin-bottom: 40px;
      transform: translateY(-30px);
  }

  #language-toggle-button {
    position: fixed; /* 保持 fixed 以便在滚动时可见 */
    top: 20px;
    right: 15px;
    padding: 6px 12px; /* 移动端更紧凑 */
    font-size: 1em;
    transform: translateY(-30px); /* 保持初始动画状态 */
    box-shadow: none;
    z-index: 25; /* 移动端 z-index 略高 */
  }
  #language-toggle-button:hover {
      transform: translateY(-30px) scale(1);
  }

  .main-content-wrapper {
      padding: 0; /* 移动端不留左右边框 */
  }
  .main-content {
      max-width: 100%; /* 移动端内容宽度占满 */
  }

  .center-line::before {
     top: 0;
  }

  .feature-item {
    width: 100%;
    position: relative; /* 移动端改为相对定位，堆叠显示 */
    left: 0; right: 0; margin: 0 auto;
    margin-bottom: 40px;
    text-align: center;
    max-width: 450px;
    padding: 20px;
    transform: none !important;
  }
  .feature-item.left,
  .feature-item.right {
     padding: 20px;
     transform: none !important;
  }

  .content-box {
    padding: 20px;
  }
  .feature-title {
      font-size: 1.3em;
  }
   .feature-description {
      font-size: 1.0em;
  }

  /* 隐藏移动端连接线 */
  .feature-item::before {
    display: none;
  }
}


.demo-btn { border: 0; background: transparent; color: #2563eb; text-decoration: underline; cursor: pointer; }
.demo-btn:hover { opacity: .85; }