/* ============================================================
   公共样式：深空宇宙主题（2026-10-17 用户拍板，参考 01-参考-抖音视频效果提炼.md）
   深蓝黑底 + 粉橙星球 + 樱花粉手写 + Anton 超粗英文大标题
   ============================================================ */

/* ---------- 本地字体（assets/fonts/） ---------- */
@font-face {
  font-family: 'Anton';                    /* 超粗英文大标题 */
  src: url('../assets/fonts/Anton-Regular-site.woff2') format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'LaBelleAurore';            /* 樱花粉英文手写点缀 */
  src: url('../assets/fonts/LaBelleAurore-Regular-site.woff2') format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'MaShanZheng';              /* 你的小故事/诗 用 */
  src: url('../assets/fonts/MaShanZheng-Regular-site.woff2') format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'LongCang';                 /* 她故事书的摘录 用（区分视角） */
  src: url('../assets/fonts/LongCang-Regular-site.woff2') format('woff2');
  font-display: swap;
}

/* ---------- 全局变量 ---------- */
:root {
  --space-0: #070B1F;         /* 最深的底 */
  --space-1: #0D1330;         /* 稍亮的底 */
  --ink: #EAEAF2;             /* 正文白 */
  --ink-light: rgba(234, 234, 242, .55);
  --neon: #F49AB6;            /* 樱花粉（手写点缀/按钮） */
  --coral: #F0957F;           /* 粉橙（星球/标题点缀） */
  --pink-soft: #E8798B;       /* 粉 */
  --glass: rgba(255, 255, 255, .06);
  --glass-border: rgba(255, 255, 255, .12);
  --line: rgba(255, 255, 255, .14);

  --font-title: 'Anton', 'Arial Black', sans-serif;
  --font-hand: 'LaBelleAurore', 'LongCang', cursive;
  --font-story: 'MaShanZheng', 'PingFang SC', 'Microsoft YaHei', cursive;
  --font-excerpt: 'LongCang', 'PingFang SC', 'Microsoft YaHei', cursive;
  --font-ui: 'PingFang SC', 'Microsoft YaHei', system-ui, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-ui);
  color: var(--ink);
  background: linear-gradient(170deg, var(--space-0) 0%, var(--space-1) 100%);
  min-height: 100vh;
}

img { max-width: 100%; }

/* ============================================================
   星空层：两层白点 + 闪烁动画（position:fixed 铺满，不挡点击）
   ============================================================ */
.stars {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    radial-gradient(1.5px 1.5px at 20px 30px, rgba(255,255,255,.9) 50%, transparent 51%),
    radial-gradient(1px 1px at 130px 80px, rgba(255,255,255,.6) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 70px 150px, rgba(255,255,255,.8) 50%, transparent 51%),
    radial-gradient(1px 1px at 180px 200px, rgba(255,255,255,.5) 50%, transparent 51%),
    radial-gradient(2px 2px at 40px 240px, rgba(255,255,255,.7) 50%, transparent 51%);
  background-size: 260px 260px, 220px 220px, 300px 300px, 240px 240px, 280px 280px;
  animation: twinkle 4s ease-in-out infinite alternate;
}
@keyframes twinkle {
  from { opacity: .55; }
  to   { opacity: 1; }
}

/* ============================================================
   巨型镂空装饰字（超宽溢出，作背景氛围）
   ============================================================ */
.outline-word {
  font-family: var(--font-title);
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, .14);
  white-space: nowrap;
  user-select: none;
  pointer-events: none;
  line-height: 1;
  letter-spacing: .04em;
}

/* ============================================================
   滚动淡入（配合 IntersectionObserver 加 .in）
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .8s ease, transform .8s ease;
}
.reveal.in {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================================
   拍立得照片框（白边框 + 微旋转 + 细微磨损噪点，深底上依然好看）
   ============================================================ */
.polaroid {
  background: #fff;
  padding: 10px 10px 34px;              /* 底部留白多，像拍立得 */
  border: 1px solid #efe6da;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .35);
  position: relative;
  display: inline-block;
}
.polaroid:nth-of-type(odd)  { transform: rotate(-2deg); }
.polaroid:nth-of-type(even) { transform: rotate(1.6deg); }

/* 细微磨损噪点：一层极淡的颗粒 */
.polaroid::after {
  content: '';
  position: absolute; inset: 0;
  pointer-events: none;
  opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* 照片本体；二期换成真照片后把 .photo 里的占位 div 换成 <img> */
.polaroid .photo {
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--space-1);
}
.polaroid .photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* 占位照片块（一期没有真照片时用）：深色条纹 */
.polaroid .photo.placeholder {
  display: flex; align-items: center; justify-content: center;
  color: rgba(255, 255, 255, .55); font-size: 13px;
  background:
    repeating-linear-gradient(45deg, #141b3d 0 12px, #0f1530 12px 24px);
}

/* 拍立得手写小字备注 */
.polaroid .caption {
  position: absolute; left: 0; right: 0; bottom: 6px;
  text-align: center;
  font-family: var(--font-story);
  font-size: 15px; color: #8a7a6a;
}

/* ============================================================
   顶部导航（三页共用：首页/故事/祝福互相切换，当前页高亮）
   ============================================================ */
.nav {
  position: fixed; top: 0; left: 0; right: 0;
  display: grid; grid-template-columns: 1fr auto 1fr;  /* 三栏：保证中间链接组永远居中 */
  align-items: center;
  padding: 18px clamp(20px, 4vw, 48px);
  z-index: 10;
}
.nav .logo {
  justify-self: start;   /* 左栏 */
  font-family: var(--font-title);
  font-size: 20px; letter-spacing: .12em;
  color: var(--ink);
}
.nav .links {
  justify-self: center;  /* 中栏：居中 */
  display: flex; gap: 6px;
  background: var(--glass);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-radius: 999px;
  padding: 6px;
}
.nav .open-btn { justify-self: end; }   /* 右栏（首页的翻开按钮） */
.nav .links a,
.nav .links button {
  background: none; border: none; cursor: pointer;
  color: var(--ink-light);
  font-size: 14px; font-family: var(--font-ui);
  padding: 7px 18px; border-radius: 999px;
  text-decoration: none;
  transition: color .2s ease, background .2s ease;
}
.nav .links a:hover,
.nav .links button:hover { color: var(--ink); background: var(--glass); }
.nav .links a.active { color: #0a0f24; background: var(--neon); }
@media (max-width: 900px) {
  .nav .links { display: none; }
}
/* 2026 公历日期对应固定农历生日，不作为每年公历生日。 */
.birthday-date-note{font-family:var(--font-ui);font-size:12px;line-height:1.8;color:#c6b4c5;letter-spacing:.04em;margin-top:12px}.hero .birthday-date-note{margin:10px 0 18px}.birthday-door .birthday-date-note{color:var(--neon)}