/* =========================================================
   成长与经历 · 开屏（第五轮：学苹果官网的字 + 一滑到底的丝滑转场）
   ---------------------------------------------------------
   字（学 apple.com.cn）：
   · 苹果设备直接用系统的「苹方」，其它设备（Windows、安卓、微信）用截出来的「思源黑体」，
     字形和苹方很接近，三个字体文件加起来约 17KB
   · 层级靠「大小 + 粗细 + 深浅」拉开：小号灰色眉标「了解」→ 超大粗标题 → 灰色正文、重点词加粗变深
   · 大标题字距略收紧、行距 1.1；正文行距 1.5；关闭系统的粗糙抗锯齿，字更细腻
   转场（定稿 A 整页下移，见 growth-cover.js）：开屏变成盖在页面上的一层，滑动时开屏和时间线一起移动（GPU 合成），
   页面本身不滚动，所以手机上也能跑满帧；手指拖动时画面跟手，松手按速度用弹簧曲线收尾
   ========================================================= */
@font-face { font-family: "SpSans"; src: url("../assets/fonts/sp-sans-regular.woff") format("woff"); font-weight: 400; font-display: swap; }
@font-face { font-family: "SpSans"; src: url(data:font/woff;base64,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) format("woff"); font-weight: 500; font-display: swap; }
@font-face { font-family: "SpSans"; src: url("../assets/fonts/sp-sans-bold.woff") format("woff"); font-weight: 700; font-display: swap; }

.sp {
  --sp-font: -apple-system, BlinkMacSystemFont, "PingFang SC", "SpSans", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --sp-ink: #1d1d1f;          /* 苹果官网的「黑」：不是纯黑 */
  --sp-body: #6e6e73;         /* 正文灰 */
  --sp-quiet: #86868b;        /* 眉标、提示的浅灰 */
  --sp-blue: var(--color-blue);
  position: relative;
  margin-top: calc(-1 * var(--header-h));
  font-family: var(--sp-font);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
.sp-stage {
  position: relative; overflow: hidden;
  height: 100vh; height: 100svh; min-height: 520px;
  padding: calc(var(--header-h) + 4px) 16px calc(88px + env(safe-area-inset-bottom, 0px));
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; color: var(--sp-ink);
  background: linear-gradient(180deg, #d6e6ff 0%, #ecf3ff 50%, #fff 100%);
}
.sp em { font-style: normal; }
.sp-head, .sp-introbox, .sp-hintbox { position: relative; z-index: 1; }

/* 眉标「了解」：小、中粗、灰（对应苹果的「升级大飞跃」） */
.sp-pre { position: relative; font-family: var(--sp-font); font-weight: 500; font-size: clamp(17px, 4.4vw, 24px); line-height: 1.2; color: var(--sp-quiet); letter-spacing: .02em; }
/* 大标题：粗、紧、大；「成长」「工作经历」保留旧网站的蓝 */
.sp-title { position: relative; font-family: var(--sp-font); font-weight: 700; font-size: clamp(30px, 9.2vw, 80px); line-height: 1.1; letter-spacing: -.015em; margin-top: .22em; white-space: nowrap; color: var(--sp-ink); }
.sp-title em { color: var(--sp-blue); }
/* 正文：灰色常规体，重点词加粗变深（苹果的强调方式），链接蓝色不加下划线 */
.sp-intro { position: relative; font-weight: 400; font-size: clamp(15px, 3.95vw, 21px); line-height: 1.5; color: var(--sp-body); }
.sp-intro .nw { display: inline-block; white-space: nowrap; }
.sp-intro em { font-weight: 700; color: var(--sp-ink); }
.sp-intro a { font-weight: 700; color: var(--sp-blue); text-decoration: none; }
.sp-intro a:hover { text-decoration: underline; text-underline-offset: .25em; }

/* 迷宫 */
.sp-slot { width: min(84vw, 560px); aspect-ratio: 624 / 241; margin-block: clamp(26px, 5.5vh, 64px) clamp(22px, 4.4vh, 52px); }
.sp-mover { width: 100%; }
.sp-mover.is-free { position: absolute; left: 50%; top: 0; z-index: 0; transform-origin: 50% 0; }
.sp-zoom { transform-origin: 50% 70%; }
.sp-zoom svg { display: block; width: 100%; height: auto; color: var(--sp-blue); }
.sp-zoom > svg:not(.core) path { fill: currentColor; }   /* 只给迷宫填色；其它板块的线条图标不填 */

/* 下滑提示 + 灰色箭头 */
.sp-hintbox { position: absolute; left: 0; right: 0; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); display: flex; justify-content: center; }
.sp-hint { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 14px; font-weight: 400; font-size: 15px; letter-spacing: .04em; color: var(--sp-quiet); white-space: nowrap; }
.sp-hint:focus-visible { outline: 2px solid var(--sp-blue); outline-offset: 2px; border-radius: 8px; }
.sp-arrow { width: 24px; height: 20px; overflow: visible; color: #a1a1a6; animation: sp-bounce 1.8s cubic-bezier(.45, 0, .55, 1) infinite; }
.sp-arrow path { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
@keyframes sp-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } }

/* 打字光标 */
.sp-caret { position: absolute; width: 2px; background: var(--sp-blue); border-radius: 1px; pointer-events: none; animation: sp-blink 1s steps(1) infinite; }
.sp-caret.is-typing { animation: none; }
@keyframes sp-blink { 50% { opacity: 0; } }
.sp .ch { opacity: 0; }
.sp .ch.on { opacity: 1; }

/* 打开时的入场：字往上浮出、迷宫轻轻放大（苹果式的长减速） */
@keyframes sp-up { from { opacity: 0; transform: translateY(16px); } }
@keyframes sp-zoomin { from { opacity: 0; transform: scale(.86); } }
.sp-zoom     { animation: sp-zoomin 1.9s cubic-bezier(.16, .8, .3, 1) .1s backwards; }
.sp-fade-pre { animation: sp-up .9s cubic-bezier(.2, .8, .2, 1) backwards; }
.sp-introbox.is-hidden, .sp-hintbox.is-hidden { opacity: 0; }
.sp-introbox.is-in, .sp-hintbox.is-in { animation: sp-up .9s cubic-bezier(.2, .8, .2, 1) backwards; }
html.js .sp:not(.is-ready) .sp-title, html.js .sp:not(.is-ready) .sp-intro { opacity: 0; animation: sp-show 0s 2.5s forwards; }
@keyframes sp-show { to { opacity: 1; } }

/* ---- 盖板模式（JS 开启）：开屏固定在屏幕上，盖住下面的时间线 ---- */
.sp-page { position: relative; z-index: 1; background: #fff; }
html.sp-cover .sp { position: fixed; inset: 0; z-index: 40; margin-top: 0; }
html.sp-cover .sp-stage { height: 100%; min-height: 0; }
html.sp-cover .sp.is-gone { visibility: hidden; pointer-events: none; }

/* 开屏在屏幕上时，藏起导航后面的白色渐隐层 */
.sp-top .site-header::before { opacity: 0; visibility: hidden; }

@media (prefers-reduced-motion: reduce) {
  .sp-zoom, .sp-arrow, .sp-caret { animation: none !important; }
}