/* ============================================================
   Riebeck 瑞拜克 — 全局设计系统
   缩放体系：html 字号 = min(100vw/80, 100vh/45)，
   1280×720 视口下 1rem = 16px，设计稿 px ÷ 16 = rem
   ============================================================ */
:root {
  --blue-panel: rgba(21, 96, 130, .85);   /* 磨砂玻璃面板（导航/底部栏/卡片） */
  --overlay: rgba(5, 39, 54, .5);         /* 背景照片上的暗色遮罩 */
  --blue-deep: #1e3a5f;                   /* 深蓝强调色 */
  --white: #fff;
  --text-dim: rgba(255, 255, 255, .65);
  --radius-lg: 1.5rem;
  --radius-md: .75rem;
  --shadow: 0 6px 18px rgba(0, 0, 0, .25);
  --font-body: 'Inter', 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  --font-logo: 'Berlin Sans FB Demi', 'Trebuchet MS', sans-serif;
  --nav-h: 5rem;                          /* 导航高 80px */
  --footer-h: 5.25rem;                    /* 底部栏高 84px */
  --anim-step: 800ms cubic-bezier(.33, 1, .68, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { font-size: min(100vw / 80, 100vh / 45); }
body {
  font-family: var(--font-body);
  color: var(--white);
  line-height: 1.7;
  min-height: 100vh;
  background: var(--blue-deep);
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { font-family: inherit; color: inherit; background: none; border: none; }

/* hidden 属性优先于任何 display 声明 */
[hidden] { display: none !important; }

/* —— 背景图 + 遮罩（fixed，滚动时不重绘） —— */
.page-bg {
  position: fixed; inset: 0; z-index: -1;
  background-size: cover; background-position: center;
}
.page-bg::after {
  content: ''; position: absolute; inset: 0;
  background: var(--overlay);
}
.page-bg.no-overlay::after { display: none; }

/* —— Hover 轻抬：所有可点击元素 —— */
.lift {
  transition: transform .25s ease, box-shadow .25s ease, translate .25s ease;
  cursor: pointer;
}
.lift:hover { translate: 0 -4px; box-shadow: var(--shadow); }

/* ============================================================
   导航栏（默认玻璃条；首页第 1 屏透明，由 home.js 切换 .glassed）
   ============================================================ */
#site-nav {
  position: fixed; top: 0; left: 0; right: 0; height: var(--nav-h);
  z-index: 100;
  display: flex; align-items: center;
  padding: 0 2.19rem 0 1.56rem;           /* 右 35px / 左 25px */
  background: var(--blue-panel);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transition: background .4s ease;
}
.page-home #site-nav,
.page-home #site-nav:not(.glassed) {
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
#site-nav.glassed {
  background: var(--blue-panel);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
#site-nav .logo {
  font-family: var(--font-logo);
  font-size: 1.5rem;
  letter-spacing: .02em;
  padding: .4rem .55rem;
  border-radius: .5rem;
  transition: translate .25s ease, background .25s ease;
}
#site-nav .logo:hover { translate: 0 -2px; background: rgba(255, 255, 255, .1); }
.nav-divider {
  width: 2px; height: 2rem;
  background: rgba(255, 255, 255, .4);
  border-radius: 1px;
  margin: 0 1rem 0 .7rem;
}
/* 导航项目容器：桌面展开为直接子元素；移动端（mobile.css）变为下拉面板 */
.nav-items { display: contents; }
/* 下拉菜单内滚动区（文章/我的/友链/搜索）：桌面同样展开为直接子元素 */
.nav-scroll { display: contents; }
/* 汉堡菜单按钮：仅移动端显示 */
.nav-burger { display: none; }
#site-nav .tab {
  font-size: 1.5rem;
  font-weight: 600;
  padding: .35rem .5rem;
  border-radius: .5rem;
  transition: translate .25s ease, background .25s ease;
}
#site-nav .tab:hover { translate: 0 -2px; background: rgba(255, 255, 255, .12); }
#site-nav .tab.active { background: rgba(255, 255, 255, .15); }

.nav-search { margin-left: auto; display: flex; align-items: center; gap: .5rem; }
.nav-search img { width: 1.4rem; height: 1.4rem; opacity: .85; flex-shrink: 0; cursor: pointer; }
.nav-search input {
  width: 10.5rem;
  background: transparent; border: none; outline: none;
  border-bottom: 2px solid rgba(255, 255, 255, .6);
  color: var(--white);
  font-family: inherit; font-size: 1.25rem;
  padding: .1rem .2rem;
}
.nav-search input::placeholder { color: rgba(255, 255, 255, .75); }
#lang-btn {
  margin-left: 1.1rem;
  width: 2.375rem; height: 2.375rem;
  border: 2px solid rgba(255, 255, 255, .85);
  border-radius: .5rem;
  font-size: 1.125rem; font-weight: 600;
  line-height: 1;
  display: flex; align-items: center; justify-content: center;
}

/* ============================================================
   底部栏（仅在浏览到页面底部时由 JS 添加 .show 滑入）
   ============================================================ */
.site-footer {
  position: fixed; bottom: 0; left: 0; right: 0; height: var(--footer-h);
  z-index: 90;
  background: var(--blue-panel);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: .15rem;
  font-size: 1.17rem;                    /* 14pt */
  color: var(--white);
  transform: translateY(105%);
  transition: transform .45s ease;
}
.site-footer.show { transform: none; }
.site-footer .copyright { color: var(--text-dim); }
.site-footer .powered { font-weight: 600; }

/* —— 磨砂"+"模块（首页友链第 6 个 / 我的页相册第 8 个 共用） —— */
.add-overlay {
  position: absolute; inset: 0;
  /* 半透明磨砂：与全站玻璃同色系的深蓝半透明 + 虚化，不引入白色亮度 */
  background: rgba(21, 96, 130, .3);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  display: flex; align-items: center; justify-content: center;
  border-radius: inherit;
}
/* 加号：单个 SVG 形状（整体一体）；白色描边 + round 连接让边缘柔和带圆角 */
.add-plus {
  width: 5.5rem; height: 5.5rem;
  display: flex;
}
.add-plus svg {
  width: 100%; height: 100%;
  display: block;
  filter: drop-shadow(0 2px 12px rgba(0, 0, 0, .35));
}

/* —— 停止线 ──●── —— */
.stop-line {
  display: flex; align-items: center; justify-content: center;
  gap: .75rem;
  margin: 2.5rem auto;
}
.stop-line span { width: 10.5rem; height: 2px; background: rgba(255, 255, 255, .6); }
.stop-line i { width: .5rem; height: .5rem; background: var(--white); border-radius: 50%; }

/* —— 首页闪烁 V 形箭头（可点击：切到下一屏） —— */
.chevron {
  position: absolute; left: 50%; bottom: 1.5rem;
  transform: translateX(-50%);
  width: 3rem; height: 1.7rem;
  cursor: pointer;
  animation: chevronPulse 1.8s ease-in-out infinite;
}
.chevron:hover { filter: drop-shadow(0 0 8px rgba(255, 255, 255, .8)); }
.chevron.hidden { display: none; }
@keyframes chevronPulse {
  0%, 100% { opacity: 1; translate: 0 0; }
  50% { opacity: .25; translate: 0 4px; }
}

/* —— 左下角浮动按钮（所有页面）：上=回顶部，下=返回上一级 ——
   固定在用户视角内；下方按钮在底部栏弹出位置上 0.5rem，
   两按钮间距同为 0.5rem，与左边线距离 1rem；下滑约一屏后由 JS 淡入（.show） */
.fab {
  position: fixed; left: 1rem;
  bottom: calc(var(--footer-h) + 0.5rem);
  z-index: 95;
  display: flex; flex-direction: column; gap: 0.5rem;
  opacity: 0; pointer-events: none;
  transition: opacity .35s ease;
}
.fab.show { opacity: 1; pointer-events: auto; }
.fab-btn {
  width: 2.75rem; height: 2.75rem;
  background: var(--blue-panel);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-radius: .8rem;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
  display: flex; align-items: center; justify-content: center;
}
.fab-btn svg { width: 1.6rem; height: 1.6rem; opacity: .75; }

/* —— 页面内容通用（普通滚动页） —— */
.page-content {
  width: 75.9rem;                        /* 与设计稿内容区一致 (1253-39)/16 */
  max-width: 96vw;
  margin: 0 auto;
  padding-top: calc(var(--nav-h) + 2rem);
  padding-bottom: calc(var(--footer-h) + 3rem);  /* 给底部栏留位 */
}