/* ============================================================================
   黄微的个人站 · 共享样式 style.css
   ---------------------------------------------------------------------------
   【这个文件是什么】
   全站 5 个页面（index / about / projects / awards / contact）共用的样式。
   每段上方都有「============ 中文标题 ============」的分区注释，配合顶部
   目录可快速跳转。

   【最常用的改动在哪里】
   · 全站配色（红/绿/字色/底色）  → 改下面 :root 里的 CSS 变量
   · 首页背景图 / 白色遮罩浓度    → 搜「全页苹果背景」
   · 四个文件夹的花色 / 标签色    → 搜「文件夹导航」
   · 音乐播放器（一颗苹果）样式   → 搜「音乐卡」
   · 获奖页奖状墙                 → 搜「奖项」
   · 导航栏                       → 搜「导航」
   · 光标样式                     → 搜「Ghost Cursor」（画布由 app.js 绘制）
   · 页面转场（奶白磨砂淡入淡出） → 搜「页面转场」
   ============================================================================ */
:root{
  /* ---- 品牌色 ---- */
  --red:#e5484d;          /* 主红色：按钮、强调文字、播放键 */
  --red-deep:#c2333a;     /* 深红：hover */
  --red-wash:#fff1f1;     /* 浅红底：标签、徽章背景 */
  --green:#77b255;        /* 叶绿：苹果叶子、次强调 */
  --green-wash:#f2f8ee;   /* 浅绿底 */
  --yellow:#fcd133;       /* 点缀黄 */
  /* ---- 文字色（由深到浅） ---- */
  --ink:#0f0e17;          /* 正文标题 */
  --ink-2:#3d3b4a;        /* 次要文字 */
  --ink-3:#7a7789;        /* 说明文字 */
  /* ---- 底色 / 线条 ---- */
  --cream:#fffbf7;        /* 全局奶油底 */
  --paper:#ffffff;        /* 卡片白 */
  --line:#ece7e1;         /* 卡片边框 */
  --line-2:#e0d9d1;       /* 深一点的线（波点用） */
  /* ---- 圆角 ---- */
  --r-lg:24px; --r-md:16px; --r-sm:10px;
  /* ---- 阴影 ---- */
  --sh-1:0 1px 2px rgba(15,14,23,.04), 0 4px 14px rgba(15,14,23,.05);  /* 轻 */
  --sh-2:0 2px 6px rgba(15,14,23,.06), 0 14px 34px rgba(15,14,23,.09); /* 重 */
  --sh-red:0 10px 26px rgba(229,72,77,.24);                            /* 红按钮 */
  /* ---- 深绿（备用，文件夹旧配色，现仅少量引用） ---- */
  --forest:#3f6b4a;
  --forest-deep:#2c5137;
  --forest-wash:#eef5ef;
  --sh-green:0 10px 26px rgba(44,81,55,.26);
  /* ---- 布局 / 动效曲线 ---- */
  --wrap:1080px;                            /* 内容最大宽度 */
  --ease:cubic-bezier(.22,.61,.36,1);       /* 常规缓动 */
  --spring:cubic-bezier(.34,1.56,.64,1);    /* 回弹缓动（文件夹翻开等） */
  --font:"PingFang SC","HarmonyOS Sans SC","Microsoft YaHei UI","Microsoft YaHei",system-ui,-apple-system,"Segoe UI",sans-serif;
}

/* ---- 基础重置 ---- */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--font);
  background:var(--cream);
  color:var(--ink);
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  min-height:100vh;
}
/* 波点纸底：全站最底层花纹（body 上挂 photo-bg 类时被照片背景覆盖） */
body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:radial-gradient(var(--line-2) 1.4px, transparent 1.4px);
  background-size:26px 26px; opacity:.5;
}
img{max-width:100%; display:block}
.wrap{width:min(100% - 44px, var(--wrap)); margin-inline:auto; position:relative; z-index:1}

/* ============ Ghost Cursor（幽灵光标） ============
   只是一个全屏透明画布，红色灵光由 app.js 第 1 段用 canvas 逐帧绘制。
   光标大小 / 拖尾长短在 app.js 顶部的 GC 对象里改，这里只管显隐。 */
#ghostCursor{
  position:fixed; inset:0; z-index:500; width:100vw; height:100vh;
  pointer-events:none; opacity:0; transition:opacity .3s ease;
}
body.has-pointer #ghostCursor{opacity:1}
body.has-pointer, body.has-pointer *{cursor:none!important} /* 隐藏系统鼠标（触屏设备不加 has-pointer） */

/* ============ 页面转场 ============
   每个页面都有一个 #veil 全屏磨砂层（HTML 里 <div id="veil">）：
   · 点击站内链接 → JS 给 body 加 .leaving → veil .2s 淡入盖住页面 → 跳转
   · 新页面加载 → body 默认带 .boot（veil 盖着）→ JS 加 .out → .26s 淡出
   想更快/更慢就改这两个秒数（app.js 里也有对应的 230ms 跳转延时）。 */
#veil{
  position:fixed; inset:0; z-index:900; pointer-events:none; opacity:0;
  background:rgba(255,251,247,.55);
  backdrop-filter:blur(16px) saturate(1.1);
  -webkit-backdrop-filter:blur(16px) saturate(1.1);
}
body.boot #veil{opacity:1}
body.boot #veil.out{animation:veilOut .26s ease both}
@keyframes veilOut{from{opacity:1} to{opacity:0}}
body.leaving #veil{animation:veilIn .2s ease forwards}
@keyframes veilIn{from{opacity:0} to{opacity:1}}
/* 页面加载时内容上抬淡入一次（一次性的，不是转场） */
main{animation:pagein .6s var(--ease) both}
@keyframes pagein{from{opacity:0; transform:translateY(18px)} to{opacity:1; transform:none}}

/* ============ 导航（全站顶部吸顶栏） ============
   深色玻璃风格，与首页两个黑玻璃面板统一。
   · 背景深浅 → background 的 rgba 第四个数（0~1，越小越透）
   · 当前页 pill → .nav-links a.here */
nav{
  position:sticky; top:0; z-index:100;
  background:rgba(22,19,17,.60);                 /* 深色玻璃底（全站统一） */
  backdrop-filter:blur(14px) saturate(1.2);
  -webkit-backdrop-filter:blur(14px) saturate(1.2);
  border-bottom:1px solid rgba(255,255,255,.14);
}
.nav-in{
  width:min(100% - 44px, var(--wrap)); margin-inline:auto;
  height:66px; display:flex; align-items:center; justify-content:space-between;
}
.brand{display:flex; align-items:center; gap:9px; font-weight:800; font-size:16.5px; color:#fff; text-decoration:none}
.brand svg{width:22px; height:22px; display:block; transition:transform .4s var(--ease)}
.brand:hover svg{transform:rotate(-12deg) scale(1.08)} /* 苹果 logo 悬停摇头 */
.nav-links{display:flex; gap:4px}
.nav-links a{
  position:relative; padding:8px 14px; border-radius:999px; font-size:14.5px; font-weight:600;
  color:rgba(255,255,255,.78); text-decoration:none; transition:color .25s, background .25s;
}
.nav-links a:hover{color:#fff; background:rgba(255,255,255,.12)}
.nav-links a.here{color:#fff; background:rgba(255,255,255,.16)}
.nav-links a.here::after{  /* 当前页下方的小红点 */
  content:""; position:absolute; left:50%; bottom:2px; translate:-50% 0;
  width:5px; height:5px; border-radius:50%; background:var(--red);
}

/* ============ 通用板块头（4 个子页顶部：小标签 + 大标题 + 副标题） ============ */
.page-head{padding:72px 0 8px}
.crumb{
  display:inline-flex; align-items:center; gap:7px;
  font-size:12.5px; font-weight:800; letter-spacing:.14em; color:var(--red); text-transform:uppercase;
  margin-bottom:14px;
}
.crumb i{width:5px; height:5px; border-radius:50%; background:var(--red); display:block}
h1.title{font-size:clamp(32px,5vw,52px); font-weight:900; letter-spacing:-.03em; line-height:1.16}
h1.title em{font-style:normal; color:var(--red)}   /* 标题里的红色强调词 */
.sub{margin-top:14px; color:var(--ink-3); font-size:16px; max-width:34em}
/* 子页副标题强制一行（字号随屏宽自动缩放，最小 11px） */
.page-head .sub{max-width:none; white-space:nowrap; font-size:clamp(11px,1.15vw,16px)}

/* ============ hero（主页第一屏）：左音乐卡 + 右文字 ============
   背景不再是这里的 .hero，而是下面「全页苹果背景」的照片。
   这段只负责两栏布局与标题字。 */
.hero{position:relative; padding:80px 0 36px}
.hero-grid{display:grid; grid-template-columns:1.02fr .98fr; gap:56px; align-items:center; position:relative; z-index:1}
.hero-text h1{margin-top:0; font-size:clamp(38px,5.4vw,58px); font-weight:900; letter-spacing:-.035em; line-height:1.12}
.hero-text .name{color:var(--red); position:relative; display:inline-block}
/* 名字下面的黄色手写高亮（一次性刷出来的横条） */
.hero-text .name::after{
  content:""; position:absolute; left:-1%; right:-1%; bottom:5px; height:.22em;
  background:var(--yellow); opacity:.5; border-radius:3px; z-index:-1;
  transform:scaleX(0); transform-origin:left; animation:swipe .8s var(--ease) .35s forwards;
}
@keyframes swipe{to{transform:scaleX(1)}}
/* 副标题：白 pill + 轻模糊，压在照片上保证可读 */
.hero-sub{
  margin-top:16px; font-size:16px; color:var(--ink-2); font-weight:600;
  background:rgba(255,255,255,.66); display:inline-block;
  padding:8px 16px; border-radius:999px; border:1px solid var(--line);
  backdrop-filter:blur(4px);
}

/* ---- 通用按钮（白底 / 红底两种，当前主要在子页） ---- */
.cta{margin-top:30px; display:flex; gap:12px; flex-wrap:wrap}
.btn{
  display:inline-flex; align-items:center; gap:9px;
  padding:13px 25px; border-radius:999px; font-size:15px; font-weight:700;
  text-decoration:none; border:1.5px solid var(--line-2); color:var(--ink);
  background:var(--paper); cursor:pointer; font-family:inherit;
  transition:transform .28s var(--ease), box-shadow .28s var(--ease), border-color .28s, background .28s;
}
.btn:hover{transform:translateY(-3px); box-shadow:var(--sh-2); border-color:var(--ink)}
.btn.primary{background:var(--red); border-color:var(--red); color:#fff; box-shadow:var(--sh-red)}
.btn.primary:hover{background:var(--red-deep); border-color:var(--red-deep)}
.btn svg{width:17px; height:17px; flex:none}

/* ============ 文件夹导航（主页核心交互） ============
   四个文件夹 = 四个子页入口。结构（由内到外）：
   .f-back  文件夹后板（花卉底图）
   .f-paper 抽出的白纸（图标+说明，悬停时向上抽出）
   .f-front 文件夹封面（花卉底图，悬停时沿顶边翻开 rotateX）
   .f-tab   侧标签（纯色 pill）
   换花色：改对应 .folder 四个类里的 --ftab(标签色) --fc(底色) --fimg(花卉图)。
   换花艺图：直接替换 assets/img/flower-*.jpg 四张文件即可。 */
.folder-zone{padding:8px 0 80px} /* 第一屏与面板之间的间距：改第一个数 */
.folder-zone .wrap{  /* 面板：深色玻璃圆角大卡 */
  background:rgba(22,19,17,.60);
  backdrop-filter:blur(14px) saturate(1.2);
  -webkit-backdrop-filter:blur(14px) saturate(1.2);
  border:1px solid rgba(255,255,255,.20);
  border-radius:32px; padding:34px 34px 40px;
  box-shadow:0 24px 60px rgba(25,28,32,.22);
}
@media (max-width:620px){ .folder-zone .wrap{padding:24px 20px 30px} }
.zone-title{display:flex; align-items:baseline; gap:14px; margin-bottom:34px}
.zone-title h2{font-size:clamp(22px,3vw,30px); font-weight:900; letter-spacing:-.02em; color:#fff}
.zone-title span{  /* 「四个文件夹，装着不同的我」暗玻璃胶囊 */
  color:#f5f0ea; font-size:13.5px; font-weight:700;
  background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.22);
  padding:5px 13px; border-radius:999px;
}
.folders{display:grid; grid-template-columns:repeat(4,1fr); gap:18px}
.folder{
  position:relative; display:block; text-decoration:none; color:var(--ink);
  perspective:900px; height:210px;
  transition:transform .4s var(--spring);
}
/* —— 四个文件夹各自的配色（粉=关于我 绿=项目 紫=获奖 蓝=联系） —— */
.folder{
  --ftab:#c96e8c; --fc:#e5acc0; --fimg:url("img/flower-pink.jpg");
  --fsh:rgba(201,110,140,.30);
}
.folder.f-green{
  --ftab:#4e7d57; --fc:#a7c8ab; --fimg:url("img/flower-green.jpg");
  --fsh:rgba(78,125,87,.30);
}
.folder.f-lavender{
  --ftab:#8f77c4; --fc:#bfabe4; --fimg:url("img/flower-lavender.jpg");
  --fsh:rgba(143,119,196,.32);
}
.folder.f-blue{
  --ftab:#5b8ac5; --fc:#a3c1e6; --fimg:url("img/flower-blue.jpg");
  --fsh:rgba(91,138,197,.32);
}
.f-tab{  /* 侧标签（纯色 pill，盖在最上层） */
  position:relative; z-index:4; display:inline-flex; align-items:center; gap:7px;
  background:var(--ftab); color:#fff; font-weight:800; font-size:14px;
  padding:7px 16px; border-radius:10px 10px 0 0; margin-left:16px;
  box-shadow:0 -2px 10px var(--fsh);
}
.f-tab svg{width:15px; height:15px}
.f-back{  /* 后板：花卉图 + 两层奶油罩（罩越厚花色越朦胧） */
  position:absolute; left:0; right:0; top:26px; bottom:0; z-index:1;
  background-image:
    linear-gradient(160deg, rgba(255,251,247,.30), rgba(255,251,247,.06) 46%),
    linear-gradient(160deg, rgba(255,251,247,.58), var(--fc) 100%),
    var(--fimg);
  background-size:auto, auto, cover;
  background-position:center, center, center 30%;
  border-radius:0 var(--r-md) var(--r-md) var(--r-md);
  box-shadow:0 16px 34px var(--fsh);
}
.f-paper{  /* 抽出的白纸：悬停上移 30px（与封面翻开的角度配合） */
  position:absolute; left:14px; right:14px; top:36px; bottom:12px; z-index:2;
  background:var(--paper); border-radius:var(--r-sm);
  padding:16px 16px 0; overflow:hidden;
  transition:transform .45s var(--spring);
}
.f-paper .f-ico{font-size:26px; line-height:1}
.f-paper b{display:block; margin-top:8px; font-size:15.5px; font-weight:800}
.f-paper p{margin-top:4px; font-size:12.5px; color:var(--ink-3); line-height:1.6}
.f-paper .dots{  /* 白纸上的小波点装饰块 */
  margin-top:10px; height:52px; border-radius:8px;
  background-image:radial-gradient(var(--line-2) 1.6px, transparent 1.6px);
  background-size:14px 14px;
}
.f-front{  /* 封面：花卉图 + 奶油罩，悬停沿顶边翻开 */
  position:absolute; left:0; right:0; top:46px; bottom:0; z-index:3;
  border-radius:0 var(--r-md) var(--r-md) var(--r-md);
  transform-origin:top;
  transition:transform .5s var(--spring);
  background-image:
    linear-gradient(180deg, rgba(255,251,247,.55), rgba(255,251,247,.10) 48%),
    linear-gradient(180deg, rgba(255,251,247,.34), var(--fc) 100%),
    var(--fimg);
  background-size:auto, auto, cover;
  background-position:center, center, center 62%;
}
/* 悬停三件套：封面翻开 + 白纸抽出 + 整个文件夹上浮 */
.folder:hover .f-front{transform:rotateX(-38deg)}
.folder:hover .f-paper{transform:translateY(-30px)}
.folder:hover{transform:translateY(-8px)}

/* ============ 子页通用卡 ============ */
.section{padding:56px 0}
.card{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:30px; box-shadow:var(--sh-1);
}
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:18px}

/* ---- holo card（项目卡）：3D 倾斜 + 锥形流光，JS 第 5 段驱动 --ha 角度 ---- */
.holo{position:relative; transform-style:preserve-3d; will-change:transform; overflow:hidden}
.holo::before{
  content:""; position:absolute; inset:-40%; z-index:0; pointer-events:none;
  background:conic-gradient(from var(--ha,0deg),
    rgba(229,72,77,.10), rgba(252,209,51,.12), rgba(119,178,85,.10),
    rgba(72,165,228,.10), rgba(229,72,77,.10));
  opacity:0; transition:opacity .45s;
  animation:spin 8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
.holo:hover::before{opacity:1}
.holo > *{position:relative; z-index:1}

/* ---- 项目卡内部（项目页） ---- */
.proj-head{display:flex; justify-content:space-between; gap:20px; align-items:flex-start; flex-wrap:wrap; margin-bottom:20px}
.proj-title{font-size:20px; font-weight:900; display:flex; align-items:center; gap:10px}
.proj-title svg{width:21px; height:21px; flex:none}
.proj-role{font-size:14px; color:var(--ink-3); margin-top:7px; font-weight:600}
.proj-role b{color:var(--ink-2)}
.chip-year{font-size:12.5px; font-weight:800; color:var(--red); background:var(--red-wash); border-radius:999px; padding:5px 13px; white-space:nowrap}
.proj-body{display:grid; grid-template-columns:1.35fr .65fr; gap:32px}
.bullets{display:grid; gap:13px}
.bullets li{list-style:none; display:flex; gap:12px; font-size:14.8px; color:var(--ink-2)}
.bullets li svg{width:16px; height:16px; flex:none; margin-top:5px}
.bullets b{color:var(--ink)}
.metrics{border-left:1px solid var(--line); padding-left:26px; display:grid; gap:15px; align-content:start}
.metric b{display:block; font-size:22px; font-weight:900; letter-spacing:-.03em; color:var(--red); line-height:1.15}
.metric span{font-size:12.5px; color:var(--ink-3); font-weight:600}
.tags{display:flex; flex-wrap:wrap; gap:7px; margin-top:22px; padding-top:20px; border-top:1px solid var(--line)}
.tag-i{
  font-size:12.5px; font-weight:700; padding:5px 12px; border-radius:999px;
  background:var(--cream); border:1px solid var(--line); color:var(--ink-2);
  transition:background .25s, color .25s, border-color .25s;
}
.tag-i:hover{background:var(--red); border-color:var(--red); color:#fff}

/* ============ 兴趣切换滑块（关于我页：画画/旅行/志愿） ============
   三个按钮 + 红色滑块 es-thumb 平移，JS 第 6 段驱动。 */
.eslider-wrap{max-width:520px; margin:26px auto 0}
.eslider{
  position:relative; display:grid; grid-template-columns:repeat(3,1fr);
  background:var(--paper); border:1px solid var(--line); border-radius:999px;
  padding:5px; box-shadow:var(--sh-1);
}
.es-thumb{  /* 红色滑动块，translateX(i*100%) 移动 */
  position:absolute; top:5px; bottom:5px; left:5px; z-index:0;
  width:calc((100% - 10px)/3);
  background:var(--red); border-radius:999px; box-shadow:var(--sh-red);
  transition:transform .55s var(--spring);
}
.eslider button{
  position:relative; z-index:1; border:0; background:none; cursor:pointer;
  font-family:inherit; font-size:15px; font-weight:800; color:var(--ink-2);
  padding:11px 0; border-radius:999px; transition:color .3s;
}
.eslider button.on{color:#fff}
.es-panels{position:relative; margin-top:26px; min-height:300px}
.es-panel{  /* 三个面板叠放，.on 的浮上来 */
  position:absolute; inset:0;
  opacity:0; transform:translateY(14px) scale(.99); pointer-events:none;
  transition:opacity .4s var(--ease), transform .4s var(--ease);
}
.es-panel.on{opacity:1; transform:none; pointer-events:auto; position:relative}
.es-photo{
  border-radius:var(--r-md); overflow:hidden; border:1px solid var(--line);
  box-shadow:var(--sh-1); aspect-ratio:16/9;
}
.es-photo img{width:100%; height:100%; object-fit:cover}
.es-text{margin-top:16px; font-size:15px; color:var(--ink-2)}
.es-text b{color:var(--ink)}
.quote{
  margin-top:14px; padding:14px 18px; border-left:3px solid var(--red);
  background:var(--red-wash); border-radius:0 var(--r-sm) var(--r-sm) 0;
  font-size:14px; color:var(--red-deep); font-weight:600;
}

/* ---- 志愿条目（关于我页） ---- */
.v-item{display:flex; gap:14px; align-items:flex-start; padding:13px 0; border-bottom:1px dashed var(--line)}
.v-item:last-child{border-bottom:0}
.v-item svg{width:20px; height:20px; flex:none; margin-top:4px}
.v-item b{font-size:15px; display:block}
.v-item span{font-size:13.5px; color:var(--ink-3)}

/* ============ 奖项（获奖页） ============
   左右两栏同高（高 min(720px,84vh)）：
   左  awards      8 张奖项卡，行高均分（grid-auto-rows:1fr）
   右  cert-col    奖状墙：22 张奖状双列排，滚动由 app.js 的 buildCertCol
                   用 Web Animations 来回滚动（不复制、不重复），悬停暂停。
   奖状图在 assets/img/cert/cert01-22.jpg，增删后改 awards.html 里的列表。 */
.awards{display:grid; gap:12px; grid-auto-rows:1fr; align-content:stretch}
.awards>*{min-height:0}
.award{
  display:flex; gap:14px; align-items:center; height:100%;
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r-md);
  padding:13px 19px; box-shadow:var(--sh-1);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.award:hover{transform:translateY(-3px); box-shadow:var(--sh-2)}
.award svg{width:26px; height:26px; flex:none}
.award .lv{display:inline-block; font-size:11px; font-weight:800; padding:1px 9px; border-radius:999px; margin-bottom:4px}
.lv.n{background:var(--red-wash); color:var(--red-deep)}   /* 国家级徽章 */
.lv.p{background:var(--green-wash); color:#4d7a34}         /* 省级/校级徽章 */
.lv.y{background:#fff8dd; color:#8a6d00}                   /* 奖学金徽章 */
.award .nm{font-size:14.5px; font-weight:700; line-height:1.55}
/* —— 右侧奖状墙 —— */
.cert-col{  /* 白底圆角展示框，上下边缘渐隐（mask） */
  position:relative; height:100%; overflow:hidden;
  border-radius:var(--r-lg); border:1px solid var(--line); background:var(--paper);
  box-shadow:var(--sh-1);
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 5%,#000 95%,transparent 100%);
          mask-image:linear-gradient(180deg,transparent 0,#000 5%,#000 95%,transparent 100%);
}
.cert-track{display:grid; grid-template-columns:1fr 1fr; gap:13px; padding:0 13px; will-change:transform}
.cert-col:hover .cert-track, .cert-col:focus-within .cert-track{animation-play-state:paused}
/* 单张奖状：白色衬卡 + 微旋转（偶右奇左），悬停转正放大并浮出名称 */
.cert{
  position:relative; flex:0 0 auto; margin:0; background:#fff; border:1px solid var(--line);
  border-radius:10px; padding:7px; box-shadow:var(--sh-1);
  transition:transform .35s var(--spring), box-shadow .35s var(--ease);
}
.cert:nth-child(even){transform:rotate(.9deg)}
.cert:nth-child(odd){transform:rotate(-.9deg)}
.cert:hover{transform:rotate(0) scale(1.05); box-shadow:var(--sh-2); z-index:2}
/* contain：整张奖状完整放进白卡正中（留白是刻意的衬边效果） */
.cert img{
  display:block; width:100%; height:172px; object-fit:contain; object-position:center;
  background:#fff; border-radius:6px;
}
.cert span{  /* 名称标签：平时隐藏，悬停浮出 */
  position:absolute; left:12px; bottom:12px; right:12px;
  display:block; padding:5px 9px; font-size:11px; font-weight:700; line-height:1.45;
  color:#fff; background:rgba(24,20,18,.72); border-radius:8px;
  opacity:0; transform:translateY(6px); transition:opacity .25s, transform .3s var(--ease);
  pointer-events:none;
}
.cert:hover span{opacity:1; transform:none}
.awards-split{display:grid; grid-template-columns:1.08fr 1fr; gap:20px; align-items:stretch; height:min(720px,84vh)}
.awards-split>*{min-height:0}

/* ============ 联系（联系页四个联系卡） ============ */
.links{display:flex; flex-wrap:wrap; gap:12px; justify-content:center}
.link{
  display:flex; align-items:center; gap:11px; text-decoration:none;
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r-md);
  padding:14px 20px; color:var(--ink); font-weight:700; font-size:14.5px; cursor:pointer; font-family:inherit;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s;
}
.link:hover{transform:translateY(-4px); box-shadow:var(--sh-2); border-color:var(--red)}
.link svg{width:20px; height:20px; flex:none; overflow:visible}   /* overflow:visible 防止描边被裁 */
.link span{color:var(--ink-3); font-weight:600; font-size:12.5px; display:block; line-height:1.3}
.link b{font-weight:800; font-size:14px; display:block; line-height:1.35}

/* ============ 页脚（极简，只有一行字 + 小苹果） ============ */
footer{padding:34px 0 40px; text-align:center; color:var(--ink-3); font-size:13px; position:relative; z-index:1}
footer svg{width:16px; height:16px; vertical-align:-3px; margin:0 4px}
.ft-min svg{width:20px; height:20px; opacity:.75}

/* ============ 数字统计 / 入场 reveal / 复制提示 toast ============
   .rv 元素滚入视口时由 JS 第 3 段加 .in 淡入上浮。
   [data-count] 数字由 JS 第 4 段滚动计数。 */
.stat-row{display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-top:38px}
.stat{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r-md);
  padding:16px 15px; transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s;
}
.stat:hover{transform:translateY(-4px); box-shadow:var(--sh-2); border-color:var(--red)}
.stat b{display:block; font-size:clamp(20px,2.6vw,25px); font-weight:900; letter-spacing:-.03em; color:var(--red); line-height:1.2}
.stat span{font-size:12.5px; color:var(--ink-3); font-weight:600}

.rv{opacity:0; transform:translateY(26px); transition:opacity .75s var(--ease), transform .75s var(--ease)}
.rv.in{opacity:1; transform:none}

#toast{  /* 底部小黑条提示（复制成功等） */
  position:fixed; left:50%; bottom:34px; translate:-50% 0; z-index:400;
  background:var(--ink); color:#fff; padding:11px 22px; border-radius:999px;
  font-size:14px; font-weight:700; box-shadow:var(--sh-2);
  opacity:0; transform:translateY(12px); pointer-events:none; transition:opacity .3s, transform .3s;
}
#toast.on{opacity:1; transform:none}

/* ============ 响应式（960px / 620px 两档断点） ============ */
@media (max-width:960px){
  .hero-grid,.proj-body{grid-template-columns:1fr}
  .folders{grid-template-columns:repeat(2,1fr)}
  /* 获奖页改上下堆叠，奖状墙回单列 */
  .awards-split{grid-template-columns:1fr; height:auto}
  .awards{grid-auto-rows:auto}
  .award{height:auto}
  .cert-col{min-height:380px; max-height:540px; height:auto}
  .cert-track{grid-template-columns:1fr}
  .hero-visual{order:-1}
  .metrics{border-left:none; border-top:1px solid var(--line); padding-left:0; padding-top:22px; grid-template-columns:repeat(2,1fr); display:grid}
  .vol3grid{grid-template-columns:1fr}
  .vol3grid .gal-item img{height:230px}
}
@media (max-width:620px){
  .folders{grid-template-columns:1fr}
  .folder{height:190px}
  .grid-2{grid-template-columns:1fr}
  .stat-row{grid-template-columns:repeat(2,1fr)}
  .nav-links a{padding:8px 9px; font-size:13.5px}
  .links{flex-direction:column}
  .card{padding:22px}
  /* 画廊小屏缩小卡片 */
  .gal-item{width:230px}
  .gal-item img{width:230px; height:180px}
}
/* 系统开了「减少动态效果」时：关掉一切动画（JS 里有同样的开关） */
@media (prefers-reduced-motion:reduce){
  *{animation:none!important; transition-duration:.01ms!important}
  .rv{opacity:1; transform:none}
}

/* ============================================================================
   首页专属：全页照片背景 / 音乐卡 / 横向画廊 / 灯箱
   （只有 index.html 的 body 挂了 photo-bg 类，以下背景仅首页生效）
   ============================================================================ */

/* 全页苹果背景：白色罩（数字越大照片越白）+ 照片。
   想换背景图：替换 assets/img/apple-splash.jpg。
   想调清晰度：改三个 rgba 的第四个数。 */
body.photo-bg::before{
  background-image:
    linear-gradient(180deg, rgba(255,251,247,.26) 0%, rgba(255,251,247,.12) 40%, rgba(255,251,247,.04) 74%, rgba(255,251,247,.56) 100%),
    linear-gradient(90deg, rgba(255,251,247,.20) 0%, rgba(255,251,247,0) 46%),
    url("img/apple-splash.jpg");
  background-size:auto, auto, cover;
  background-position:center, center, center top;  /* center top：保住照片上方的叶子 */
  opacity:1;
}

/* 子页星星绿背景：4 个子页的 body 挂了 star-bg 类。
   星星图本身很淡，但仍加一层奶油罩保证文字可读（数字越大越白）。 */
body.star-bg::before{
  background-image:
    linear-gradient(180deg, rgba(255,251,247,.58) 0%, rgba(255,251,247,.48) 45%, rgba(255,251,247,.66) 100%),
    url("img/star-green.jpg");
  background-size:auto, cover;
  background-position:center, center;
  opacity:1;
}

/* ============ 音乐卡：《一颗苹果》五月天播放器 ============
   深色玻璃卡：专辑图 + 曲名歌手 + 进度条 + 时间 + ±15s + 音量条。
   逻辑全在 app.js 第 8 段（播放/暂停/拖动/键盘）。这里只管长相。 */
.music-card{
  display:flex; gap:20px; align-items:center;
  background:rgba(22,19,17,.60);                    /* 深色玻璃，与导航/文件夹面板统一 */
  backdrop-filter:blur(14px) saturate(1.2);
  -webkit-backdrop-filter:blur(14px) saturate(1.2);
  border:1px solid rgba(255,255,255,.20);
  border-radius:28px; padding:18px;
  box-shadow:0 24px 60px rgba(25,28,32,.22);
}
.mc-art{  /* 左：专辑方图 */
  width:150px; height:150px; object-fit:cover; flex:none; display:block;
  border-radius:16px; box-shadow:0 10px 26px rgba(25,28,32,.20);
  transition:box-shadow .4s var(--ease);
}
.music-card.playing .mc-art{box-shadow:0 0 0 3px rgba(229,72,77,.38), 0 10px 26px rgba(25,28,32,.20)} /* 播放时红圈 */
.mc-body{flex:1; min-width:0; display:flex; flex-direction:column}
.mc-title{color:#fff; font-size:21px; font-weight:800; letter-spacing:.01em; line-height:1.3}
.mc-artist{color:rgba(255,255,255,.58); font-size:14.5px; font-weight:600; margin-top:3px}
/* —— 进度条 —— */
.mc-seek{margin-top:16px; touch-action:none}
.mc-bar{position:relative; height:5px; border-radius:999px; background:rgba(255,255,255,.20)}
.mc-fill{position:absolute; left:0; top:0; bottom:0; width:0; border-radius:999px; background:linear-gradient(90deg,#e5484d,#f4736b)}
.mc-knob{  /* 圆点：平时藏，悬停/拖动时出现 */
  position:absolute; top:50%; left:0; width:12px; height:12px; border-radius:50%;
  background:#fff; border:2px solid var(--red);
  transform:translate(-50%,-50%) scale(0); transition:transform .18s var(--ease);
  box-shadow:0 1px 4px rgba(25,28,32,.25);
}
.mc-seek:hover .mc-knob, .mc-seek:focus-visible .mc-knob, .mc-seek.drag .mc-knob{transform:translate(-50%,-50%) scale(1)}
.mc-times{  /* 左当前时间 / 右剩余时间 */
  display:flex; justify-content:space-between; margin-top:7px;
  font-size:12.5px; font-weight:700; color:rgba(255,255,255,.62); font-variant-numeric:tabular-nums;
}
/* —— 控制排：后退 / 播放 / 前进 / 音量 —— */
.mc-ctl{display:flex; align-items:center; gap:8px; margin-top:12px}
.mc-skip{  /* ±15s 小方钮 */
  width:38px; height:38px; border:0; border-radius:12px; background:transparent;
  color:rgba(255,255,255,.82); display:grid; place-items:center; cursor:pointer; transition:background .2s, color .2s;
}
.mc-skip:hover{background:rgba(255,255,255,.12); color:#fff}
.mc-skip svg{width:21px; height:21px}   /* 控制图标大小 ← 改这里 */
.mc-play{  /* 红色大播放键 */
  height:50px; min-width:72px; border:0; border-radius:16px; background:var(--red); color:#fff;
  display:grid; place-items:center; cursor:pointer;
  transition:transform .3s var(--spring), background .2s;
  box-shadow:0 8px 18px rgba(229,72,77,.32);
}
.mc-play:hover{background:#d43d43; transform:scale(1.06)}
.mc-play:active{transform:scale(.97)}
.mc-play svg{width:24px; height:24px}
.mc-vol{display:flex; align-items:center; gap:9px; margin-left:auto; color:rgba(255,255,255,.55)}
.mc-vic{border:0; background:none; color:inherit; width:26px; height:26px; padding:0; display:grid; place-items:center; cursor:pointer; transition:color .2s}
.mc-vic:hover{color:#fff}
.mc-vic svg{width:20px; height:20px}
.mc-volbar{position:relative; width:96px; height:5px; border-radius:999px; background:rgba(255,255,255,.20); touch-action:none}
.mc-volfill{position:absolute; left:0; top:0; bottom:0; border-radius:999px; background:#e5484d; width:85%}
.mc-vknob{
  position:absolute; top:50%; left:0; width:11px; height:11px; border-radius:50%;
  background:#fff; border:2px solid var(--red);
  transform:translate(-50%,-50%) scale(0); transition:transform .18s var(--ease);
  box-shadow:0 1px 4px rgba(25,28,32,.25);
}
.mc-volbar:hover .mc-vknob, .mc-volbar.drag .mc-vknob{transform:translate(-50%,-50%) scale(1)}
.mc-src{font-size:12px; font-weight:700; color:rgba(255,255,255,.45); text-decoration:none; margin-top:10px; align-self:flex-start; transition:color .2s}
.mc-src:hover{color:#fff}
@media (max-width:960px){ .mc-art{width:120px; height:120px} }
@media (max-width:480px){
  .music-card{gap:14px; padding:14px}
  .mc-art{width:96px; height:96px}
  .mc-volbar{width:60px}
}

/* ============ 横向画廊（关于我页：画画 7 张 / 旅行 8 张） ============
   JS（buildMarquees）把图片复制成两份做无缝循环，悬停暂停。
   速度在 app.js 里调（w / 46 = 每秒像素）。 */
.gal{
  position:relative; overflow:hidden; padding:4px 0 10px;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%);
}
.gal-track{display:flex; width:max-content; animation:galRun linear infinite; will-change:transform}
.gal:hover .gal-track, .gal:focus-within .gal-track{animation-play-state:paused}
.gal-group{display:flex; gap:14px; padding-right:14px}
@keyframes galRun{from{transform:translate3d(0,0,0)} to{transform:translate3d(-50%,0,0)}}
.gal-item{
  flex:0 0 auto; width:300px; scroll-snap-align:start;
  border-radius:var(--r-md); overflow:hidden; border:1px solid var(--line);
  box-shadow:var(--sh-1); background:var(--paper);
}
.gal-item img{width:300px; height:230px; object-fit:cover; display:block; transition:transform .6s var(--ease)}
.gal-item:hover img{transform:scale(1.06)}
/* 志愿三图：不滚动，静态三列 */
.vol3grid{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
.vol3grid .gal-item{width:auto}
.vol3grid .gal-item img{height:200px}

/* ============ 灯箱（点击画廊/任意 .gal-item 放大查看） ============
   结构由 app.js 第 10 段动态创建，Esc 或点空白关闭。 */
#lb{
  position:fixed; inset:0; z-index:600; display:none; place-items:center; padding:44px;
  background:rgba(22,17,13,.84); backdrop-filter:blur(8px) saturate(1.1);
}
#lb.on{display:grid; animation:lbfade .25s ease both}
@keyframes lbfade{from{opacity:0} to{opacity:1}}
#lb img{max-width:min(92vw,1080px); max-height:84vh; border-radius:14px; box-shadow:0 30px 80px rgba(0,0,0,.45); animation:lbin .4s var(--ease) both}
@keyframes lbin{from{opacity:0; transform:scale(.94)} to{opacity:1; transform:none}}
#lb .lb-x{
  position:absolute; top:22px; right:24px; width:44px; height:44px; border-radius:50%;
  border:1px solid rgba(255,255,255,.28); background:rgba(255,255,255,.12); color:#fff;
  font-size:22px; line-height:1; cursor:pointer; display:grid; place-items:center;
  transition:background .25s, transform .25s var(--spring);
}
#lb .lb-x:hover{background:rgba(255,255,255,.24); transform:rotate(90deg)}
#lb .lb-cap{position:absolute; left:0; right:0; bottom:18px; text-align:center; color:rgba(255,255,255,.72); font-size:12.5px; letter-spacing:.08em}

/* ============ 迷你播放器（4 个子页右下角，JS 注入） ============
   首页大播放器 ↔ 子页迷你播放器靠 localStorage 接力（app.js 第 8 段），
   换页后自动从上次进度接着放。长相与首页深色玻璃卡统一。 */
.mini-music{
  position:fixed; right:22px; bottom:22px; z-index:420;
  display:flex; align-items:center; gap:12px; max-width:calc(100vw - 44px);
  background:rgba(22,19,17,.66);                    /* 与首页音乐卡同款深色玻璃 */
  backdrop-filter:blur(14px) saturate(1.2);
  -webkit-backdrop-filter:blur(14px) saturate(1.2);
  border:1px solid rgba(255,255,255,.20);
  border-radius:18px; padding:10px 12px 10px 10px;
  box-shadow:0 18px 44px rgba(25,28,32,.30);
  /* 默认藏到右下角外，加 .on 后滑入 */
  opacity:0; transform:translateY(16px) scale(.96); pointer-events:none;
  transition:opacity .5s var(--ease), transform .5s var(--ease);
}
.mini-music.on{opacity:1; transform:none; pointer-events:auto}
.mm-art{width:52px; height:52px; object-fit:cover; border-radius:12px; flex:none; display:block;
  box-shadow:0 6px 16px rgba(25,28,32,.24); transition:box-shadow .35s var(--ease)}
.mini-music.playing .mm-art{box-shadow:0 0 0 2px rgba(229,72,77,.45), 0 6px 16px rgba(25,28,32,.24)} /* 播放时红圈 */
.mm-body{min-width:0; display:flex; flex-direction:column}
.mm-top{display:flex; align-items:baseline; gap:7px; white-space:nowrap}
.mm-title{color:#fff; font-size:13.5px; font-weight:800; letter-spacing:.01em}
.mm-artist{color:rgba(255,255,255,.55); font-size:11.5px; font-weight:600}
.mm-seek{margin-top:7px; width:150px; touch-action:none; cursor:pointer}
.mm-bar{position:relative; height:4px; border-radius:999px; background:rgba(255,255,255,.22)}
.mm-fill{position:absolute; left:0; top:0; bottom:0; width:0; border-radius:999px;
  background:linear-gradient(90deg,#e5484d,#f4736b)}
.mm-play{width:38px; height:38px; border:0; border-radius:12px; flex:none;
  background:var(--red); color:#fff; display:grid; place-items:center; cursor:pointer;
  transition:transform .3s var(--spring), background .2s;
  box-shadow:0 6px 14px rgba(229,72,77,.32)}
.mm-play:hover{background:#d43d43; transform:scale(1.06)}
.mm-play:active{transform:scale(.96)}
.mm-play svg{width:19px; height:19px}
/* 浏览器拦截自动播放时的提示：播放键一圈呼吸光，吸引点一下 */
.mini-music.need-tap .mm-play{animation:mmPulse 1.6s var(--ease) infinite}
@keyframes mmPulse{0%,100%{box-shadow:0 6px 14px rgba(229,72,77,.32), 0 0 0 0 rgba(229,72,77,.38)}
  55%{box-shadow:0 6px 14px rgba(229,72,77,.32), 0 0 0 9px rgba(229,72,77,0)}}
@media (max-width:640px){ .mini-music{right:14px; bottom:14px} .mm-seek{width:104px} }