/* ===== 自定义样式 ===== */

/* 首屏大标题 */
#site-title {
  font-size: 3.2rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.45);
}

#site-subtitle {
  letter-spacing: 0.1em;
  opacity: 0.92;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.5);
}

/* 桌面端：文字靠左，把右侧让给人物 */
@media screen and (min-width: 769px) {
  #page-header.full_page #site-info {
    padding-left: 9vw;
    padding-right: 48vw;
  }

  #page-header.full_page #site-title,
  #page-header.full_page #site-subtitle {
    text-align: left;
  }
}

/* 手机端：换成竖版人物图，文字上移 */
@media screen and (max-width: 768px) {
  #page-header.full_page {
    background-image: url("/img/banner-mobile.jpg") !important;
    background-size: cover;
    background-position: center bottom;
    background-attachment: scroll;
  }

  #page-header.full_page #site-info {
    top: 17%;
  }

  /* 手机首屏不显示社交图标，避免压在人物脸上（侧边栏已有） */
  #page-header.full_page #site_social_icons {
    display: none !important;
  }

  #page-header.full_page #site-title {
    font-size: 1.9rem;
  }

  #page-header.full_page #site-subtitle {
    font-size: 0.95rem;
  }
}

/* 首屏底部波浪分隔 */
#page-header {
  position: relative;
}

#page-header::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: 54px;
  background-color: var(--global-bg, #fff);
  -webkit-mask: url("/img/wave.svg") no-repeat center / 100% 100%;
  mask: url("/img/wave.svg") no-repeat center / 100% 100%;
  pointer-events: none;
  z-index: 3;
}

/* 首页文章卡片圆角与悬停 */
#recent-posts .recent-post-item {
  border-radius: 14px;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

#recent-posts .recent-post-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.14);
}

/* 导航栏毛玻璃 */
#page-header.nav-fixed #nav {
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* 手机端标题字号 */
@media screen and (max-width: 768px) {
  #site-title {
    font-size: 2.1rem;
  }
}

/* ===== 导航栏点击动效 ===== */
#nav a,
#nav .site-page,
#nav #search-button,
#nav #toggle-menu {
  transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.2s ease,
    background-color 0.2s ease;
  will-change: transform;
  transform-origin: center;
}

#nav a:active,
#nav .site-page:active,
#nav #search-button:active,
#nav #toggle-menu:active {
  transform: scale(1.16);
}

@keyframes navPulse {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.18); }
  100% { transform: scale(1); }
}

.nav-pulse {
  animation: navPulse 0.34s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ===== 导航栏：液态玻璃（Apple Liquid Glass 风格）===== */
#page-header #nav,
#page-header.nav-fixed #nav {
  background: linear-gradient(
      165deg,
      rgba(60, 78, 118, 0.42) 0%,
      rgba(22, 30, 52, 0.58) 45%,
      rgba(12, 18, 32, 0.66) 100%
    ) !important;
  -webkit-backdrop-filter: blur(26px) saturate(180%) brightness(1.05);
  backdrop-filter: blur(26px) saturate(180%) brightness(1.05);
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 -1px 0 rgba(255, 255, 255, 0.06),
    0 8px 32px rgba(3, 7, 18, 0.32);
  transition: background 0.4s ease, box-shadow 0.4s ease;
}

/* 顶部高光，制造"玻璃反光" */
#page-header #nav::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 50%;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.16) 0%,
    rgba(255, 255, 255, 0.04) 60%,
    rgba(255, 255, 255, 0) 100%
  );
}

/* 玻璃上的文字统一为白色，保证对比度 */
#page-header #nav .site-name,
#page-header #nav a,
#page-header #nav .site-page,
#page-header #nav .site-page i,
#page-header #nav #toggle-menu .site-page i {
  color: #f2f6ff !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

#page-header #nav .site-page:hover,
#page-header #nav a:hover .site-name {
  color: #ffffff !important;
}

/* 暗色模式下略微加深，保持玻璃感 */
[data-theme="dark"] #page-header #nav,
[data-theme="dark"] #page-header.nav-fixed #nav {
  background: linear-gradient(
      165deg,
      rgba(38, 48, 76, 0.55) 0%,
      rgba(14, 20, 36, 0.72) 60%,
      rgba(8, 12, 22, 0.80) 100%
    ) !important;
  border-bottom-color: rgba(255, 255, 255, 0.10);
}

/* 高光层不遮住文字 */
#page-header #nav > * {
  position: relative;
  z-index: 1;
}