/* ============================================
   首页透明横幅样式 - 与about页面一致，只设置CSS变量
   ============================================ */

/* ============================================
   PC端样式 (min-width: 769px)
   ============================================ */
@media (min-width: 769px) {
  /* 首页顶部横幅 - 默认透明背景 */
  body.page-home .top-bar,
  .page-home .top-bar {
    background: transparent;
    border-bottom: none;
    box-shadow: none;
    backdrop-filter: none;
  }

  /* 首页滚动后变白色背景 */
  body.page-home .top-bar.scrolled,
  .page-home .top-bar.scrolled {
    background: rgba(255, 255, 255, 0.95);
    border-bottom: 1px solid var(--border-color, #E2E8F0);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(10px);
  }

  /* 导航栏透明背景（PC端） */
  body.page-home .navbar,
  .page-home .navbar {
    background: transparent;
  }
  
  /* 移动端下拉菜单 - 始终白色背景 */
  body.page-home .navbar.active,
  .page-home .navbar.active {
    background: white;
  }

  /* ============================================
     定义CSS变量 - 与about页面完全一致
     ============================================ */

  /* 透明状态 */
  body.page-home .top-bar:not(.scrolled),
  .page-home .top-bar:not(.scrolled) {
    --header-bg: transparent;
    --header-border: rgba(255, 255, 255, 0.5);
    --header-text: white;
    --header-accent: var(--accent-yellow);
    --header-year: white;
    --header-meta: white;
    --header-btn-bg: rgba(0, 0, 0, 0.3);
    --header-nav-line: white;
    --logo-filter: brightness(0) invert(1);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  /* 白底状态 */
  body.page-home .top-bar.scrolled,
  .page-home .top-bar.scrolled {
    --header-bg: rgba(255, 255, 255, 0.98);
    --header-border: var(--border-color);
    --header-text: var(--text-dark);
    --header-accent: var(--primary-blue);
    --header-year: var(--primary-blue);
    --header-meta: var(--text-gray);
    --header-btn-bg: var(--primary-blue);
    --header-nav-line: var(--primary-blue);
    --logo-filter: none;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  }

  /* ============================================
     应用变量 - 与about页面完全一致
     ============================================ */

  /* 应用变量 - 顶部横幅基础样式 */
  body.page-home .top-bar,
  .page-home .top-bar {
    position: fixed;
    z-index: 1002;
    background: var(--header-bg, rgba(255, 255, 255, 0.95));
    border-bottom: 1px solid var(--header-border, var(--border-color));
    transition: background 0.3s ease, border-color 0.3s ease;
  }

  /* 应用变量 - 文字颜色 */
  body.page-home .top-bar .top-info-title,
  body.page-home .top-bar .top-info-item,
  body.page-home .top-bar .nav-menu a,
  body.page-home .top-bar .mobile-menu-btn,
  .page-home .top-bar .top-info-title,
  .page-home .top-bar .top-info-item,
  .page-home .top-bar .nav-menu a,
  .page-home .top-bar .mobile-menu-btn {
    color: var(--header-text, var(--text-dark));
    transition: color 0.3s ease;
  }

  /* 应用变量 - 返回首页按钮 */
  body.page-home .top-bar .btn-back-home,
  .page-home .top-bar .btn-back-home {
    color: var(--header-text, var(--primary-blue));
    border-color: var(--header-text, var(--primary-blue));
  }

  body.page-home .top-bar .btn-back-home:hover,
  .page-home .top-bar .btn-back-home:hover {
    background: var(--header-btn-bg, var(--primary-blue));
    color: var(--header-text, white);
    border-color: var(--header-text, var(--primary-blue));
    transform: translateY(-2px);
  }

  /* 应用变量 - 年份 */
  body.page-home .top-bar .top-year,
  .page-home .top-bar .top-year {
    color: var(--header-year, var(--primary-blue));
  }

  /* 应用变量 - 时间地点 */
  body.page-home .top-bar .top-info-meta,
  .page-home .top-bar .top-info-meta {
    color: var(--header-meta, var(--text-gray));
  }

  /* 应用变量 - 图标 */
  body.page-home .top-bar .top-info-item i,
  .page-home .top-bar .top-info-item i {
    color: var(--header-accent, var(--primary-blue));
  }

  /* 应用变量 - 导航下划线（普通状态和active状态都要覆盖） */
  /* 透明状态下 - 白色下划线 */
  body.page-home .top-bar:not(.scrolled) .navbar .nav-menu a::after,
  body.page-home .top-bar:not(.scrolled) .navbar .nav-menu a.active::after,
  .page-home .top-bar:not(.scrolled) .navbar .nav-menu a::after,
  .page-home .top-bar:not(.scrolled) .navbar .nav-menu a.active::after {
    background: white !important;
  }
  
  /* 白底状态下 - 蓝色下划线 */
  body.page-home .top-bar.scrolled .navbar .nav-menu a::after,
  body.page-home .top-bar.scrolled .navbar .nav-menu a.active::after,
  .page-home .top-bar.scrolled .navbar .nav-menu a::after,
  .page-home .top-bar.scrolled .navbar .nav-menu a.active::after {
    background: var(--primary-blue) !important;
  }
  
  /* 普通状态的下划线保持过渡效果 */
  body.page-home .top-bar .nav-menu a::after,
  .page-home .top-bar .nav-menu a::after {
    transition: width 0.3s ease;
  }
  
  /* active状态的下划线无过渡效果 */
  body.page-home .top-bar .nav-menu a.active::after,
  .page-home .top-bar .nav-menu a.active::after {
    transition: none;
    -webkit-transition: none;
  }

  /* 应用变量 - Logo滤镜 */
  @media (max-width: 768px) {
    body.page-home .top-bar .top-logo img,
    .page-home .top-bar .top-logo img {
      filter: var(--logo-filter, none);
    }

    /* 透明状态下手机端特殊处理 */
    body.page-home .top-bar:not(.scrolled) .mobile-menu-btn,
    .page-home .top-bar:not(.scrolled) .mobile-menu-btn {
      background: rgba(0,0,0,0.2);
    }

    body.page-home .top-bar.scrolled .mobile-menu-btn,
    .page-home .top-bar.scrolled .mobile-menu-btn {
      background: var(--primary-blue);
    }
  }
}

/* ============================================
   移动端样式 (max-width: 768px)
   ============================================ */
@media (max-width: 768px) {
  /* 首页顶部横幅 - 默认透明背景 */
  body.page-home .top-bar,
  .page-home .top-bar {
    background: transparent;
    border-bottom: none;
    box-shadow: none;
    backdrop-filter: none;
    animation: none;
    opacity: 1;
    visibility: visible;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }

  /* 首页滚动后变白色背景 */
  body.page-home .top-bar.scrolled,
  .page-home .top-bar.scrolled {
    background: rgba(255, 255, 255, 0.95);
    border-bottom: 1px solid var(--border-color, #E2E8F0);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(10px);
  }

  /* 导航栏透明背景（PC端导航条） */
  body.page-home .navbar,
  .page-home .navbar {
    background: transparent;
  }
  
  /* 移动端下拉菜单 - 始终白色背景 */
  body.page-home .navbar.active,
  .page-home .navbar.active {
    background: white;
  }

  /* ============================================
     定义CSS变量 - 与about页面完全一致（移动端）
     ============================================ */

  /* 透明状态 */
  body.page-home .top-bar:not(.scrolled),
  .page-home .top-bar:not(.scrolled) {
    --header-bg: transparent;
    --header-border: rgba(255, 255, 255, 0.5);
    --header-text: white;
    --header-accent: var(--accent-yellow);
    --header-year: white;
    --header-meta: white;
    --header-btn-bg: rgba(0, 0, 0, 0.3);
    --header-nav-line: white;
    --logo-filter: brightness(0) invert(1);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  /* 白底状态 */
  body.page-home .top-bar.scrolled,
  .page-home .top-bar.scrolled {
    --header-bg: rgba(255, 255, 255, 0.98);
    --header-border: var(--border-color);
    --header-text: var(--text-dark);
    --header-accent: var(--primary-blue);
    --header-year: var(--primary-blue);
    --header-meta: var(--text-gray);
    --header-btn-bg: var(--primary-blue);
    --header-nav-line: var(--primary-blue);
    --logo-filter: none;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  }

  /* ============================================
     应用变量 - 与about页面完全一致（移动端）
     ============================================ */

  /* 应用变量 - 顶部横幅基础样式 */
  body.page-home .top-bar,
  .page-home .top-bar {
    position: fixed;
    z-index: 1002;
    background: var(--header-bg, rgba(255, 255, 255, 0.95));
    border-bottom: 1px solid var(--header-border, var(--border-color));
    transition: background 0.3s ease, border-color 0.3s ease;
  }

  /* 应用变量 - 文字颜色 */
  body.page-home .top-bar .top-info-title,
  body.page-home .top-bar .top-info-item,
  body.page-home .top-bar .nav-menu a,
  body.page-home .top-bar .mobile-menu-btn,
  .page-home .top-bar .top-info-title,
  .page-home .top-bar .top-info-item,
  .page-home .top-bar .nav-menu a,
  .page-home .top-bar .mobile-menu-btn {
    color: var(--header-text, var(--text-dark));
    transition: color 0.3s ease;
  }

  /* 移动端下拉菜单中的链接 - 深色文字 */
  body.page-home .navbar.active .nav-menu a,
  .page-home .navbar.active .nav-menu a {
    color: var(--primary-blue, #0062AE);
  }

  /* 应用变量 - 返回首页按钮 */
  body.page-home .top-bar .btn-back-home,
  .page-home .top-bar .btn-back-home {
    color: var(--header-text, var(--primary-blue));
    border-color: var(--header-text, var(--primary-blue));
  }

  body.page-home .top-bar .btn-back-home:hover,
  .page-home .top-bar .btn-back-home:hover {
    background: var(--header-btn-bg, var(--primary-blue));
    color: var(--header-text, white);
    border-color: var(--header-text, var(--primary-blue));
    transform: translateY(-2px);
  }

  /* 应用变量 - 年份 */
  body.page-home .top-bar .top-year,
  .page-home .top-bar .top-year {
    color: var(--header-year, var(--primary-blue));
  }

  /* 应用变量 - 时间地点 */
  body.page-home .top-bar .top-info-meta,
  .page-home .top-bar .top-info-meta {
    color: var(--header-meta, var(--text-gray));
  }

  /* 应用变量 - 图标 */
  body.page-home .top-bar .top-info-item i,
  .page-home .top-bar .top-info-item i {
    color: var(--header-accent, var(--primary-blue));
  }

  /* 应用变量 - 导航下划线（普通状态和active状态都要覆盖） */
  /* 透明状态下 - 白色下划线 */
  body.page-home .top-bar:not(.scrolled) .navbar .nav-menu a::after,
  body.page-home .top-bar:not(.scrolled) .navbar .nav-menu a.active::after,
  .page-home .top-bar:not(.scrolled) .navbar .nav-menu a::after,
  .page-home .top-bar:not(.scrolled) .navbar .nav-menu a.active::after {
    background: white !important;
  }
  
  /* 白底状态下 - 蓝色下划线 */
  body.page-home .top-bar.scrolled .navbar .nav-menu a::after,
  body.page-home .top-bar.scrolled .navbar .nav-menu a.active::after,
  .page-home .top-bar.scrolled .navbar .nav-menu a::after,
  .page-home .top-bar.scrolled .navbar .nav-menu a.active::after {
    background: var(--primary-blue) !important;
  }
  
  /* 普通状态的下划线保持过渡效果 */
  body.page-home .top-bar .nav-menu a::after,
  .page-home .top-bar .nav-menu a::after {
    transition: width 0.3s ease;
  }
  
  /* active状态的下划线无过渡效果 */
  body.page-home .top-bar .nav-menu a.active::after,
  .page-home .top-bar .nav-menu a.active::after {
    transition: none;
    -webkit-transition: none;
  }

  /* 移动端下拉菜单中的下划线 - 始终蓝色 */
  body.page-home .navbar.active .nav-menu a::after,
  .page-home .navbar.active .nav-menu a::after,
  body.page-home .navbar.active .nav-menu a.active::after,
  .page-home .navbar.active .nav-menu a.active::after {
    background: var(--primary-blue, #0062AE);
  }

  /* 应用变量 - Logo滤镜 */
  body.page-home .top-bar .top-logo img,
  .page-home .top-bar .top-logo img {
    filter: var(--logo-filter, none);
  }

  /* 透明状态下手机端特殊处理 */
  body.page-home .top-bar:not(.scrolled) .mobile-menu-btn,
  .page-home .top-bar:not(.scrolled) .mobile-menu-btn {
    background: rgba(0,0,0,0.2);
  }

  body.page-home .top-bar.scrolled .mobile-menu-btn,
  .page-home .top-bar.scrolled .mobile-menu-btn {
    background: var(--primary-blue);
  }

  /* 移动端下拉菜单文字颜色 - 确保在白色背景上显示深色文字 */
  body.page-home .mobile-nav-menu,
  .page-home .mobile-nav-menu {
    background: rgba(255, 255, 255, 0.98);
  }

  body.page-home .mobile-nav-menu a,
  .page-home .mobile-nav-menu a {
    color: var(--text-dark, #1A202C);
  }

  body.page-home .mobile-nav-menu a:hover,
  .page-home .mobile-nav-menu a:hover {
    color: var(--primary-blue, #0062AE);
  }
}