/* 导入可变字体 */
@import url('https://fonts.googleapis.com/css2?family=Roboto+Flex:opsz,wght@8..144,100..1000&display=swap');

/* 可变字体接近特效基础样式 */
.variable-proximity {
  font-family: 'Roboto Flex', sans-serif !important;
  font-variation-settings: 'wght' 400, 'opsz' 9;
  transition: font-variation-settings 0.1s ease-out;
  cursor: default;
  user-select: none;
  display: inline;
}

/* 字母容器 */
.variable-proximity-letter {
  display: inline-block;
  font-family: inherit !important;
  font-variation-settings: inherit;
  transition: font-variation-settings 0.05s ease-out;
  will-change: font-variation-settings;
}

/* 单词容器 */
.variable-proximity-word {
  display: inline-block;
  white-space: nowrap;
}

/* 空格 */
.variable-proximity-space {
  display: inline-block;
  width: 0.25em;
}

/* 屏幕阅读器专用隐藏文本 */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* 我们的故事版块特定样式 - 保持原来的样式 */
.about-intro .variable-proximity {
  font-size: inherit;
  line-height: inherit;
  color: inherit;
  background: inherit;
  -webkit-text-fill-color: inherit;
}

/* 标题的可变字体特效 - 保持原来的颜色和样式 */
.story-title.variable-proximity {
  font-size: 2.5rem;
  font-weight: inherit;
  color: var(--dark-color);
  margin-bottom: 2rem;
  display: block;
  text-align: left;
  /* 移除渐变色彩，使用原来的深色 */
  background: none;
  -webkit-background-clip: unset;
  -webkit-text-fill-color: unset;
  background-clip: unset;
  text-shadow: none;
}

/* 段落的可变字体特效 - 保持原来的颜色和样式 */
.story-paragraph.variable-proximity {
  font-size: inherit;
  line-height: 1.8;
  color: var(--text-color);
  margin-bottom: 1.5rem;
  opacity: 1;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .story-title.variable-proximity {
    font-size: 2rem;
  }
  
  .story-paragraph.variable-proximity {
    font-size: 1rem;
    line-height: 1.6;
  }
}

@media (max-width: 480px) {
  .story-title.variable-proximity {
    font-size: 1.8rem;
  }
  
  .story-paragraph.variable-proximity {
    font-size: 0.95rem;
  }
}

/* 性能优化 */
@media (prefers-reduced-motion: reduce) {
  .variable-proximity,
  .variable-proximity-letter {
    transition: none;
  }
}

/* 触摸设备优化 */
@media (hover: none) and (pointer: coarse) {
  .variable-proximity {
    font-variation-settings: 'wght' 500, 'opsz' 12;
  }
}