/* ============================================================================
   PAGE: HOME / LANDING
   Description: 首页特定的区块样式
   Dependencies: design-tokens.css
   ============================================================================ */

/* ----------------------------------------------------------------------------
   SHARED SECTION STYLES
   ----------------------------------------------------------------------------
*/
.section-fullscreen {
  position: relative;
  width: 100%;
  min-height: 100vh;
  /* [FIX 1] 移除 overflow: hidden */
  /* 文字内容超出屏幕时必须允许滚动，不能切断 */
}

/* ----------------------------------------------------------------------------
   SECTION 1: HERO
   ----------------------------------------------------------------------------
*/
.section-hero {
  background-image: url('../../images/home/headpage.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  
  /* 如果希望 Hero 图片在滚动时有视差感，可以在桌面端开启 fixed */
  background-attachment: fixed;
  
  display: flex;
  justify-content: center;
  align-items: center;
  
  z-index: 1;
  
  /* [FIX 1] 仅在 Hero 区域(通常无长文) 锁定溢出，防止图片或标题动画撑开 */
  overflow: hidden;
}

/* ----------------------------------------------------------------------------
   SECTION 2: ABOUT
   ----------------------------------------------------------------------------
*/
.section-about {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  
  /* 视觉设置 */
  /* [关键] 这里的白色背景是 mix-blend-mode 生效的基础 */
  background-color: var(--color-bg-body);
  
  /* 如果这里没有背景图(background-image)，attachment fixed 其实没用 */
  /* 如果你打算以后加图，请保留；如果不加图，这几行可以删掉 */
  background-size: cover;
  background-attachment: fixed;
  
  padding: var(--space-lg) var(--space-md);
}

/* Element: Title */
.section-about__title {
  position: absolute;
  
  /* [智能定位] 完美避让菜单按钮 */
  top: var(--trigger-offset, 24px);
  right: calc(var(--trigger-size, 50px) + var(--trigger-offset, 24px) + var(--space-md));
  
  font-family: var(--font-heading);
  font-weight: var(--weight-black);
  font-size: var(--text-2xl);
  line-height: 1;
  text-transform: uppercase;
  color: var(--color-text-main);
    text-align: right;
  
  margin: 0;
  z-index: 10;
}

/* Element: Text */
.section-about__text {
  width: 100%;
  max-width: var(--container-sm);
  
  font-family: var(--font-body);
  font-weight: var(--weight-light);
  font-size: var(--text-lg);
  line-height: var(--leading-loose);
  text-align: center;
  text-transform: uppercase;
  color: var(--color-text-main);
  
  position: relative;
  z-index: 2;
}

/* ----------------------------------------------------------------------------
   RESPONSIVE OVERRIDES
   ----------------------------------------------------------------------------
*/
@media (max-width: 768px) {
  
  /* [FIX 2] iOS 滚动性能修复 */
  .section-hero,
  .section-about {
    background-attachment: scroll; /* 强制手机不使用视差，避免抖动 */
  }

  .section-about__title {
    /* 手机端流式布局 */
    position: static;
    margin-bottom: var(--space-lg);
    align-self: flex-start;
    right: auto;
  }
  
  .section-about__text {
    font-size: var(--text-base);
    /* [FIX 3] 避免 justify 造成的河流空隙，推荐 left */
    text-align: left;
  }
}