/* ============================================================
   base.css — 墨澜的文件夹 · 公共基础层
   主题变量 / 字体 / 纸张纹理 / 公共组件 / zoom 覆盖层
   所有页面（大厅 + 分隔页）共享
   ============================================================ */

:root {
  /* 奶白基底（调淡一档，更耐看） */
  --cream: #F8F4EC;
  --cream-2: #F3EDDE;
  --cream-3: #EEE5D1;
  --paper: #FDFBF3;
  --paper-back: #F7F2E4;
  --ink: #4A4238;
  --ink-2: #8B8172;
  --line: rgba(74, 66, 56, .13);

  /* 莫兰迪五色 */
  --rose: #C9A39C;   --rose-d: #A98278;
  --blue: #9DB0C0;   --blue-d: #7A91A4;
  --green: #A9BBA1;  --green-d: #879C7E;
  --purple: #B3A7BC; --purple-d: #93869E;
  --taupe: #C0B39E;  --taupe-d: #9E9077;

  --ease-book: cubic-bezier(.62, .04, .3, 1);
  --hand: 'Zhi Mang Xing', 'Ma Shan Zheng', 'Kaiti SC', 'KaiTi', cursive;
  --hand-title: 'Ma Shan Zheng', 'Kaiti SC', 'KaiTi', cursive;
  --hand-en: 'Caveat', cursive;

  /* 纸张噪点纹理（SVG 内联） */
  --paper-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 .29 0 0 0 0 .26 0 0 0 0 .22 0 0 0 .035 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

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

/* 全站禁止文字复制（后台编辑输入框除外）
   防误触/防选中干扰翻页；内容公开，防复制仅防误操作 */
body {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}
input, textarea, [contenteditable] {
  -webkit-user-select: text;
  -moz-user-select: text;
  user-select: text;
}
/* 图片不响应拖拽（长按不触发系统拖图） */
img, canvas, svg { -webkit-user-drag: none; user-drag: none; pointer-events: auto; }
img { -webkit-touch-callout: none; }

html { height: 100%; }

/* 全局隐藏滚动条（保持可滚动），避免滚动条出现/消失引起页面位移 */
html { scrollbar-width: none; -ms-overflow-style: none; }
::-webkit-scrollbar { width: 0; height: 0; background: transparent; }

body {
  background:
    radial-gradient(1200px 700px at 30% 18%, rgba(255, 255, 255, .55), transparent 60%),
    var(--cream);
  color: var(--ink);
  /* 正文字体全部用系统字体：不额外下载中文正文字体，首屏更快；
     手写体（标题/正文）见 fonts.css 的自托管子集 */
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Noto Sans SC', sans-serif;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

/* 角落花草装饰（极淡线稿，左上 + 右下） */
body::before, body::after {
  content: '';
  position: fixed;
  width: 240px; height: 240px;
  pointer-events: none;
  z-index: 0;
  opacity: .55;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240' fill='none'%3E%3Cg stroke-linecap='round'%3E%3Cpath d='M18 228 C 58 176, 74 118, 66 52' stroke='%23A9BBA1' stroke-opacity='.5' stroke-width='2.5'/%3E%3Cpath d='M66 52 q 8 -20 26 -24 q -6 22 -26 24 Z' stroke='%23A9BBA1' stroke-opacity='.5' stroke-width='2'/%3E%3Cpath d='M52 130 q -22 -6 -30 -26 q 24 -2 30 26 Z' stroke='%23A9BBA1' stroke-opacity='.45' stroke-width='2'/%3E%3Cpath d='M62 92 q 20 -12 40 -6 q -14 18 -40 6 Z' stroke='%23A9BBA1' stroke-opacity='.45' stroke-width='2'/%3E%3Cpath d='M40 186 q -24 -2 -34 -20 q 22 -6 34 20 Z' stroke='%23A9BBA1' stroke-opacity='.4' stroke-width='2'/%3E%3Ccircle cx='88' cy='42' r='7' stroke='%23C9A39C' stroke-opacity='.55' stroke-width='2'/%3E%3Ccircle cx='88' cy='42' r='2.4' fill='%23C9A39C' fill-opacity='.5' stroke='none'/%3E%3Ccircle cx='106' cy='62' r='4.5' stroke='%23C9A39C' stroke-opacity='.45' stroke-width='1.8'/%3E%3Ccircle cx='30' cy='96' r='3.5' stroke='%23B3A7BC' stroke-opacity='.5' stroke-width='1.6'/%3E%3Ccircle cx='120' cy='30' r='2.5' fill='%239DB0C0' fill-opacity='.45' stroke='none'/%3E%3C/g%3E%3C/svg%3E") no-repeat;
}
body::before { left: -14px; top: -10px; }
body::after { right: -14px; bottom: -10px; transform: rotate(180deg); }

@media (max-width: 760px) {
  body::before, body::after { width: 150px; height: 150px; background-size: 150px 150px; opacity: .45; }
}

.hand { font-family: var(--hand); }
.hand-title { font-family: var(--hand-title); font-weight: 400; }
.hand-en { font-family: var(--hand-en); }

button { font-family: inherit; background: none; border: none; cursor: pointer; color: inherit; }
a { color: inherit; }

::selection { background: rgba(201, 163, 156, .35); }
/* 禁选时的反馈保持安静：不显示选区 */
*::selection { background: transparent; }
input::selection, textarea::selection { background: rgba(201, 163, 156, .35); }

/* ---------- 和纸胶带 ---------- */
.washi {
  position: absolute;
  width: 96px; height: 24px;
  transform: rotate(-3deg);
  opacity: .75;
  border-radius: 2px;
  box-shadow: 0 1px 2px rgba(74, 66, 56, .12);
  z-index: 5;
}
.w-rose   { background: repeating-linear-gradient(45deg, var(--rose) 0 8px, #D8B8B1 8px 16px); }
.w-blue   { background: repeating-linear-gradient(45deg, var(--blue) 0 8px, #B4C4D1 8px 16px); }
.w-green  { background: repeating-linear-gradient(45deg, var(--green) 0 8px, #C0CDB9 8px 16px); }
.w-purple { background: repeating-linear-gradient(45deg, var(--purple) 0 8px, #C6BCCD 8px 16px); }
.w-taupe  { background: repeating-linear-gradient(45deg, var(--taupe) 0 8px, #D1C5B2 8px 16px); }

/* ---------- 虚线占位块 ---------- */
.empty-block {
  padding: 46px 20px;
  border: 2px dashed rgba(74, 66, 56, .22);
  border-radius: 12px;
  text-align: center;
}
.empty-tip { font-family: var(--hand); font-size: 24px; color: var(--ink-2); line-height: 1.9; }

/* ============================================================
   zoom 过渡覆盖层（放大进入 / 进入后揭开）
   ============================================================ */
.zoom-ghost {
  position: fixed;
  background:
    var(--paper-noise),
    var(--paper);
  border-radius: 6px 12px 12px 6px;
  box-shadow: 0 10px 40px rgba(74, 66, 56, .25);
  z-index: 400;
  display: flex; align-items: center; justify-content: center;
  transition: top .62s var(--ease-book), left .62s var(--ease-book),
              width .62s var(--ease-book), height .62s var(--ease-book),
              border-radius .62s var(--ease-book);
  will-change: top, left, width, height;
  overflow: hidden;
}
.zoom-ghost .zoom-ghost-label {
  font-family: var(--hand-title);
  font-size: 54px; color: var(--ink);
  letter-spacing: 6px;
  opacity: 0;
  transform: scale(.92);
  transition: opacity .35s ease .18s, transform .5s ease .15s;
  white-space: nowrap;
}
.zoom-ghost.zoom-grow .zoom-ghost-label { opacity: 1; transform: scale(1); }
.zoom-ghost .zoom-ghost-bar {
  position: absolute; top: 0; left: 0; right: 0;
  height: 10px;
}

/* 到达页覆盖层的主题色条 */
.zoom-enter-mask .zoom-enter-bar {
  position: absolute; top: 0; left: 0; right: 0;
  height: 10px;
}

/* 目标页的"揭开"覆盖层 */
.zoom-enter-mask {
  position: fixed; inset: 0;
  background:
    var(--paper-noise),
    var(--paper);
  z-index: 400;
  display: flex; align-items: center; justify-content: center;
  transition: opacity .55s ease .08s;
}
.zoom-enter-mask .zoom-enter-label {
  font-family: var(--hand-title);
  font-size: 60px; color: var(--ink);
  letter-spacing: 6px;
  transition: opacity .4s ease, transform .55s ease;
}
.zoom-enter-mask.zoom-reveal { opacity: 0; pointer-events: none; }
.zoom-enter-mask.zoom-reveal .zoom-enter-label { opacity: 0; transform: scale(1.08); }

/* 分隔页内容入场（配合 zoom-enter） */
.page-enter { opacity: 0; transform: scale(1.03) translateY(10px); }
.page-enter-ready { opacity: 1; transform: none; transition: opacity .5s ease .1s, transform .55s var(--ease-book) .1s; }

@media (prefers-reduced-motion: reduce) {
  .zoom-ghost, .zoom-ghost .zoom-ghost-label,
  .zoom-enter-mask, .zoom-enter-mask .zoom-enter-label,
  .page-enter, .page-enter-ready { transition: none !important; }
}

/* ============================================================
   跨页 View Transitions（渐进增强）
   Chromium 126+ / Safari 18.2+ 同源导航自动交叉淡化；
   不支持的浏览器（Firefox 等）自动降级为普通跳转。
   ============================================================ */
@view-transition { navigation: auto; }
::view-transition-old(root),
::view-transition-new(root) { animation-duration: .28s; }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
}

/* ============================================================
   GitHub 卡片（大厅项目页 + /projects 分隔页共用）
   ============================================================ */
.gh-profile {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px;
  background: rgba(255, 255, 255, .55);
  border: 1.5px dashed rgba(74, 66, 56, .22);
  border-radius: 12px;
  margin-bottom: 18px;
}
.gh-avatar {
  width: 58px; height: 58px;
  border-radius: 50%;
  border: 2.5px solid var(--paper);
  box-shadow: 0 2px 6px rgba(74, 66, 56, .2);
}
.gh-name { font-family: var(--hand-title); font-size: 27px; color: var(--ink); }
.gh-name span { font-family: var(--hand-en); font-size: 19px; color: var(--ink-2); margin-left: 6px; }
.gh-stats { font-size: 12.5px; color: var(--ink-2); margin-top: 3px; }
.gh-link { font-family: var(--hand-en); font-size: 18px; color: var(--blue-d); text-decoration: none; }
.gh-link:hover { text-decoration: underline; }

.gh-card {
  background: rgba(255, 255, 255, .55);
  border: 1px solid rgba(74, 66, 56, .12);
  border-left: 4px solid var(--blue);
  border-radius: 10px;
  padding: 12px 14px 10px;
  margin-bottom: 12px;
  transition: transform .18s ease, box-shadow .18s ease;
}
.gh-card:hover { transform: translateY(-2px); box-shadow: 0 6px 14px rgba(74, 66, 56, .13); }
.gh-card header { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.gh-repo-name { font-weight: 700; font-size: 15px; color: var(--blue-d); text-decoration: none; }
.gh-repo-name:hover { text-decoration: underline; }
.gh-badge {
  font-size: 10.5px; padding: 1px 7px;
  border: 1px solid rgba(74, 66, 56, .25);
  border-radius: 20px; color: var(--ink-2);
}
.gh-desc { font-size: 13px; color: #6B6255; line-height: 1.6; margin: 7px 0 9px; }
.gh-card footer { display: flex; align-items: center; flex-wrap: wrap; gap: 5px 14px; font-size: 12px; color: var(--ink-2); }
.gh-card footer time { white-space: nowrap; }
.gh-lang { display: inline-flex; align-items: center; gap: 5px; }
.gh-lang i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }

@media (max-width: 760px) {
  .gh-profile { padding: 12px; gap: 10px; }
  .gh-avatar { width: 48px; height: 48px; }
  .gh-name { font-size: 23px; }
}