/* ============================================================
   Duner — 全局公共样式 (style.css)
   ------------------------------------------------------------
   作用：供所有子页面（思考复盘 / 作品展示 / 思考探索 /
         隐私政策 / 服务条款 / 联系方式）共用的基础样式。
   包含：
     1. 全局重置（reset）
     2. 顶部导航栏 .site-nav
     3. 底部页脚 .site-footer
     4. 二维码弹窗 .modal（仅联系方式页使用）

   注意：各页面的主体布局（如预览框网格、作品展示、文档正文）
   均在各自页面的 <style> 内联块中定义，便于独立修改。
   ============================================================ */

/* ===== 页面切换平滑过渡（View Transitions，现代浏览器自动交叉淡入淡出） ===== */
@view-transition {
  navigation: auto;
}
::view-transition-old(root) {
  animation: 140ms ease both vt-fade-out;
}
::view-transition-new(root) {
  animation: 300ms ease both vt-fade-in;
}
@keyframes vt-fade-out { to { opacity: 0; } }
@keyframes vt-fade-in { from { opacity: 0; } to { opacity: 1; } }

/* ===== 1. 全局重置 ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: 'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-weight: 400;
  color: #fff;
  background: #0b0b0b;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

/* 键盘用户可见焦点：Tab 切换时能清楚知道当前落点。 */
a:focus-visible,
button:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.82);
  outline-offset: 3px;
}

/* ===== 2. 顶部导航栏（固定顶部、透明渐变遮罩） ===== */
.site-nav {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 40;                       /* 盖在内容上方 */
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 24px;
  color: #fff;
  /* 顶部轻微暗色渐变，保证在亮色照片背景上文字可读 */
  background: linear-gradient(to bottom, rgba(0,0,0,0.45), rgba(0,0,0,0));
}
.site-nav .logo {
  font-size: 16px; font-weight: 500; letter-spacing: -0.01em;
}
.site-nav .nav-links {
  display: flex; gap: 22px;
  font-size: 14px; font-weight: 400;
}
.site-nav .nav-links a {
  opacity: 0.92;
  transition: opacity 200ms ease;
}
.site-nav .nav-links a:hover { opacity: 1; }
.site-nav .nav-links a.active { opacity: 1; }

/* ===== 3. 底部页脚（固定底部、含备案号与链接） ===== */
.site-footer {
  position: fixed; left: 0; right: 0; bottom: 0;
  z-index: 40;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 10px 20px;
  padding: 12px 24px;
  font-size: 12px; font-weight: 400; color: rgba(255,255,255,0.7);
  background: linear-gradient(to top, rgba(0,0,0,0.55), rgba(0,0,0,0));
}
.site-footer .meta { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline; }
.site-footer .filing { color: rgba(255,255,255,0.7); }
.site-footer .sep { color: rgba(255,255,255,0.3); margin: 0 2px; }
.site-footer .links { display: flex; gap: 14px; }
.site-footer .links a { transition: color 200ms ease; }
.site-footer .links a:hover { color: #fff; }

/* ===== 4. 二维码弹窗（仅联系方式页使用） ===== */
.modal {
  position: fixed; inset: 0; z-index: 100;
  display: none; align-items: center; justify-content: center;
  padding: 24px;
}
.modal.is-open { display: flex; }
.modal-backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.72);
}
.modal-card {
  position: relative;
  width: 100%; max-width: 320px;
  background: #161616;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 16px;
  padding: 30px 28px 26px;
  text-align: center;
}
.modal-card .qr-img {
  width: 200px; height: 200px;
  margin: 0 auto 18px;
  border-radius: 10px;
  background: #fff;
}
.modal-card .phone { font-size: 1.15rem; font-weight: 500; letter-spacing: 0.02em; }
.modal-card .hint { margin-top: 8px; font-size: 0.82rem; color: rgba(255,255,255,0.55); }
.modal-close {
  margin-top: 22px;
  font-size: 0.85rem;
  color: rgba(255,255,255,0.6);
  padding: 8px 20px;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 9999px;
  transition: color 200ms ease, border-color 200ms ease;
}
.modal-close:hover { color: #fff; border-color: rgba(255,255,255,0.4); }

/* ===== 5. 响应式 ===== */
@media (min-width: 640px) {
  .site-nav { padding: 18px 40px; }
  .site-footer { padding: 14px 40px; font-size: 13px; }
}

/* 小屏时让顶部导航自动换行，避免文字挤出屏幕。 */
@media (max-width: 520px) {
  .site-nav {
    align-items: flex-start;
    gap: 10px;
  }
  .site-nav .nav-links {
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px 14px;
  }
}

/* 尊重系统“减少动态效果”设置，降低动画带来的不适感。 */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

/* ===== 6. 刘海屏 / 圆角屏安全区 ===== */
@media (max-width: 639px) {
  .site-nav {
    padding-top: max(14px, env(safe-area-inset-top));
    padding-left: max(24px, env(safe-area-inset-left));
    padding-right: max(24px, env(safe-area-inset-right));
  }
  .site-footer {
    padding-bottom: max(12px, env(safe-area-inset-bottom));
    padding-left: max(24px, env(safe-area-inset-left));
    padding-right: max(24px, env(safe-area-inset-right));
  }
}
@media (min-width: 640px) {
  .site-nav {
    padding-top: max(18px, env(safe-area-inset-top));
    padding-left: max(40px, env(safe-area-inset-left));
    padding-right: max(40px, env(safe-area-inset-right));
  }
  .site-footer {
    padding-bottom: max(14px, env(safe-area-inset-bottom));
    padding-left: max(40px, env(safe-area-inset-left));
    padding-right: max(40px, env(safe-area-inset-right));
  }
}