/* ============================================================
   首页专属样式 (home.css)
   仅承载首页与共享 style.css 的差异：
   - 首屏透明的固定导航 + 滚出后切奶油底
   - 全屏沉浸式 hero（星空背景 + 打字机）
   - hero 专属排版 / 滚动提示 / 卡片淡入
   style.css 提供共享 token / 卡片 / 按钮；本文件只覆盖首页差异。
   ============================================================ */

/* ---- 首屏透明导航（覆盖 style.css 的内页实心奶油） ---- */
.top-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  background: transparent;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  border-bottom: 1px solid transparent;
  transition: background 0.35s ease, border-color 0.35s ease, -webkit-backdrop-filter 0.35s ease, backdrop-filter 0.35s ease;
}
.top-nav.scrolled {
  background: rgba(250, 249, 245, 0.92);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border-bottom-color: var(--hairline);
}
/* 首屏：导航文字为奶油色；滚动后切回深色（由 .scrolled 控制） */
.brand, .brand .name, .nav-links a, .signin {
  color: var(--cream, #f5ead2);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.4);
  transition: color 0.35s ease;
}
.top-nav.scrolled .brand,
.top-nav.scrolled .brand .name,
.top-nav.scrolled .nav-links a,
.top-nav.scrolled .signin {
  color: var(--ink);
  text-shadow: none;
}
.brand .name { font-weight: 500; letter-spacing: -0.01em; }

/* ---- Hero：全屏沉浸式星空 + 打字机 ---- */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
  background-color: #0a0c18;
  background-image: var(--hero-image, url("/static/img/hero-bg.jpg"));
  background-size: cover; background-position: center;
  background-attachment: fixed; background-repeat: no-repeat;
  padding: 110px 24px 96px;
  overflow: hidden;
}
.hero-content { position: relative; z-index: 2; max-width: 900px; }
.hero-title {
  font-size: clamp(16px, 5vw, 30px);
  font-weight: 500;
  line-height: 1.35; letter-spacing: 0.01em;
  color: var(--cream, #f5ead2);
  white-space: nowrap;
  min-height: 1.35em;
  text-shadow: 0 2px 30px rgba(0, 0, 0, 0.65), 0 1px 4px rgba(0, 0, 0, 0.5);
}
/* 打字机光标 */
.hero-title .caret {
  display: inline-block;
  width: 3px; height: 0.9em; margin-left: 8px;
  background: var(--cream, #f5ead2);
  vertical-align: -0.08em;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
  animation: home-blink 1s steps(1) infinite;
}
@keyframes home-blink { 50% { opacity: 0; } }

/* 滚动提示 */
.scroll-cue {
  position: absolute; bottom: 34px; left: 50%;
  transform: translateX(-50%); z-index: 2;
  color: var(--cream, #f5ead2); opacity: 0.9;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
  animation: home-bounce 2.2s ease-in-out infinite;
}
.scroll-cue .scroll-arrow { width: 34px; height: 34px; display: block; }
@keyframes home-bounce {
  0%, 100% { transform: translate(-50%, 0); }
  50%      { transform: translate(-50%, 12px); }
}

/* ---- 文章区 ---- */
.home-posts { padding: 96px 0; }
.home-posts-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; margin-bottom: 48px;
}
.home-posts-head h2 {
  font-size: clamp(24px, 3vw, 32px); font-weight: 500;
  line-height: 1.1; letter-spacing: -0.02em; color: var(--ink);
}

/* 卡片进入视口淡入（渐进增强，无 JS 时直接可见） */
.post-card { opacity: 1; }
.post-card.fade-in { opacity: 0; transform: translateY(16px); transition: opacity .5s ease, transform .5s ease; }
.post-card.fade-in.visible { opacity: 1; transform: translateY(0); }

/* ---- 首页文章区铺满 90vw，与列表页一致 ---- */
.home-posts .container { max-width: 95vw; }

/* ---- 首页正文下移，避开固定的透明导航 ---- */
main { padding-top: 0; }

/* ---- 响应式 ---- */
@media (max-width: 768px) {
  .hero { background-attachment: scroll; }
  .hero-title { white-space: normal; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-title .caret, .scroll-cue { animation: none; }
  .post-card.fade-in { opacity: 1; transform: none; }
}