/* ============================================================
   cover.css —— 载入层 + 封面
   ============================================================
   【文件职责】
   本文件负责两个"首屏全屏层"：
   1) 载入层(.loader)：网站资源加载时显示的过渡层，含印章 + 进度条 + 提示文字。
   2) 封面(.cover)：用户进入网站看到的第一张大屏画面，含印章、学院眉头、
      四字主标题、朱砂横线、三行副标语、副说明、"入卷"按钮。

   【在项目中的角色】
   - 这两层在加载完成后会先后淡出，让位给后面的地图主舞台(.stage)。
   - 整套视觉以"印章盖下 / 卷轴展开 / 朱砂线生长"等动画呼应"古卷展开"主题。
   - 在面板/地图样式之前加载，是用户最先看到的部分。

   【阅读提示】
   - .loader / .cover 都是 position:fixed 全屏覆盖（inset:0 = 铺满视口）。
   - @keyframes 定义动画的关键帧（从什么状态到什么状态），用 animation 调用。
   - ::before / ::after 是"伪元素"，可以插出装饰层（如按钮的金边光晕）。
   ============================================================ */

/* ===== 载入层 ===== */
/* 载入层根容器：全屏铺满、最顶层(z-index:100)、宣纸底色，
   用 flex 居中其内部三个元素（印章/进度条/提示文字）。 */
.loader {
  position: fixed;                       /* 固定定位：相对视口，不随滚动 */
  inset: 0;                              /* 铺满整个屏幕 */
  z-index: var(--z-loader);              /* 层级 100：盖在所有东西之上 */
  display: flex;                         /* 弹性布局 */
  flex-direction: column;                /* 子元素纵向排列 */
  align-items: center;                   /* 水平居中 */
  justify-content: center;               /* 垂直居中 */
  gap: var(--sp-5);                      /* 子元素之间留 24px 间距 */
  background: var(--paper);              /* 宣纸底色 */
  transition: opacity var(--t-mid) var(--ease-out); /* 透明度淡出过渡 */
}
/* 加载完成后 JS 会移除 body 的 is-loading 类，触发本规则：
   载入层整体变透明 + 不响应点击，让它"淡出消失"。 */
body:not(.is-loading) .loader {
  opacity: 0;                            /* 完全透明 */
  pointer-events: none;                  /* 鼠标事件穿透到下层 */
}
/* 载入层印章：朱砂方框 + 楷体字 + 双层金边光晕，循环呼吸动画。
   background 用 radial-gradient 在左上角(30% 30%)加一抹红光，
   模拟印章按下去时墨色不均的效果。 */
.loader__seal {
  width: 88px; height: 88px;
  display: grid;                          /* 网格布局 */
  place-items: center;                    /* 子元素水平+垂直双居中 */
  border: 2px solid var(--cinnabar);      /* 朱砂色实线边框 */
  border-radius: var(--r-md);             /* 轻微圆角 */
  color: var(--cinnabar);                 /* 文字颜色朱砂 */
  font-family: var(--font-kai);           /* 楷体 */
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1;
  text-align: center;
  animation: seal-pulse 2.4s var(--ease-in-out) infinite; /* 调用下方动画，2.4 秒一周期，无限循环 */
  background:
    radial-gradient(circle at 30% 30%, rgba(196, 69, 58, 0.10), transparent 60%), /* 左上角一抹红 */
    var(--paper);
  box-shadow:
    inset 0 0 0 4px var(--paper),         /* 内描边：4px 宣纸色（留白） */
    inset 0 0 0 5px var(--cinnabar-a25),  /* 内描边：5px 朱砂 25%（薄红圈） */
    0 0 24px var(--cinnabar-a25);         /* 外阴影：24px 朱砂光晕 */
}
/* 印章呼吸动画：在原始大小(100%)和轻微放大(104%)之间循环，
   同时外光晕从 18px 变到 30px，模拟印章"呼吸"的红光。 */
@keyframes seal-pulse {
  0%, 100% { transform: scale(1); box-shadow: inset 0 0 0 4px var(--paper), inset 0 0 0 5px var(--cinnabar-a25), 0 0 18px var(--cinnabar-a25); }
  50%      { transform: scale(1.04); box-shadow: inset 0 0 0 4px var(--paper), inset 0 0 0 5px var(--cinnabar-a25), 0 0 30px var(--cinnabar-a25); }
}

/* 进度条轨道：220px 宽 2px 高的细条，宣纸暗色底色 */
.loader__bar {
  width: 220px; height: 2px;
  background: var(--paper-3);
  border-radius: 1px;
  overflow: hidden;                       /* 溢出隐藏：让填充条不超出轨道 */
}
/* 进度条填充：<i> 标签初始宽度 0，通过动画拉到 100%。
   填充色用 linear-gradient 从朱砂过渡到描金，模拟"朱砂流到金"的视觉效果。 */
.loader__bar i {
  display: block;
  height: 100%;
  width: 0%;                              /* 初始 0%，由动画驱动 */
  background: linear-gradient(90deg, var(--cinnabar), var(--gold));
  animation: loader-fill 2.6s var(--ease-in-out) forwards; /* forwards: 动画结束后保持最后一帧 */
}
/* 进度填充动画：0% → 78% → 100%，中段故意慢下来模拟"加载接近完成" */
@keyframes loader-fill {
  0%   { width: 0%; }
  60%  { width: 78%; }
  100% { width: 100%; }
}

/* 载入层底部小字提示：弱化文字色 + 楷体 + 大字距，呼应古书版心 */
.loader__tip {
  color: var(--ink-3);
  font-size: var(--fs-sm);
  letter-spacing: 0.3em;                  /* 0.3em 大字距，呼吸感 */
  font-family: var(--font-kai);
}

/* ===== 封面 ===== */
/* 封面根容器：全屏覆盖，比载入层低、比地图高的层级(90)，
   用居中网格放置所有内容；背景是椭圆径向渐变（中间亮、四周暗），
   营造"卷轴中心被光照亮"的感觉。 */
.cover {
  position: fixed;
  inset: 0;
  z-index: var(--z-cover);                /* 层级 90 */
  display: grid;
  place-items: center;                    /* 内容水平+垂直居中 */
  background:
    radial-gradient(ellipse at 50% 38%, rgba(248, 240, 220, 1) 0%, var(--paper) 55%, var(--paper-2) 100%); /* 中心略亮的椭圆光 */
  transition: opacity var(--t-epic) var(--ease-silk),
              transform var(--t-epic) var(--ease-silk),
              filter var(--t-epic) var(--ease-silk);  /* 离场过渡：透明度/位移/模糊同步 */
  overflow: hidden;
}
/* 离场状态：JS 给封面加 .is-leaving 触发——
   整体变透明 + 向上飘移 3% + 轻微放大 + 模糊 6px，营造"画卷虚化远去"的离场效果。 */
.cover.is-leaving {
  opacity: 0;
  transform: translateY(-3%) scale(1.01);
  filter: blur(6px);
  pointer-events: none;                   /* 不再拦截点击 */
}
/* HTML hidden 属性兜底：如果 JS 直接给元素加 hidden 属性，强制完全隐藏 */
.cover[hidden] { display: none !important; }

/* 水墨装饰层：覆盖整张封面，用于承载 SVG 水墨纹理或装饰图案。
   pointer-events:none 让它不拦截下方按钮的点击。 */
.cover__ink {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  opacity: 0.55;
  mix-blend-mode: multiply;               /* 正片叠底：融入背景 */
}

/* 封面"画框"：限制内容最大宽度为 720px 或 92vw（取较小者），
   让封面在大屏不会被拉得太宽，在小屏也能留出边距。
   内部用纵向 flex，让所有子元素（印章/眉头/标题/线/按钮）垂直排列。 */
.cover__frame {
  position: relative;
  z-index: 2;                             /* 比水墨装饰层(默认 0/1)高 */
  width: min(720px, 92vw);                /* min() 取较小值，自适应屏幕 */
  padding: var(--sp-7) var(--sp-6);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-5);                       /* 各元素之间 24px 间距 */
}

/* 封面印章（核心视觉元素之一）：朱砂双线框 + 楷体大字，
   用 box-shadow 叠出两层"留白圈+红晕圈"模拟印章按下的层次。
   初始 opacity:0、放大旋转，由下方 seal-stamp 动画从大到小"盖下来"。 */
.cover__seal {
  width: 96px; height: 96px;
  display: grid;
  place-items: center;
  border: 3px double var(--cinnabar);     /* 双线边框：两道朱砂 */
  border-radius: var(--r-md);
  color: var(--cinnabar);
  font-family: var(--font-kai);
  font-size: 1.7rem;
  font-weight: 700;
  line-height: 1.1;
  text-align: center;
  letter-spacing: 0.08em;
  background:
    radial-gradient(circle at 35% 30%, rgba(196, 69, 58, 0.12), transparent 65%), /* 左上角一抹红 */
    var(--paper);
  box-shadow:
    0 0 0 6px var(--paper),               /* 外圈 6px 宣纸白边 */
    0 0 0 7px var(--cinnabar-a25),        /* 再外一圈 7px 朱砂薄红 */
    var(--shadow-md);                     /* 加中档阴影 */
  opacity: 0;                             /* 初始透明 */
  transform: scale(1.18) rotate(-4deg);   /* 初始放大 18% + 微微左旋 */
  animation: seal-stamp 900ms var(--ease-silk) 200ms forwards; /* 200ms 后开始盖印 */
}
/* 印章盖下动画：从"放大+倾斜" → "略微缩小" → "正常"，模拟印章按下去的弹性。
   60% 时略微缩小到 0.97 制造"过冲"效果，最后回到 1。 */
@keyframes seal-stamp {
  0%   { opacity: 0; transform: scale(1.18) rotate(-4deg); }
  60%  { opacity: 1; transform: scale(0.97) rotate(-1deg); }
  100% { opacity: 1; transform: scale(1) rotate(0deg); }
}

/* 学院眉头：标题上方的说明小字，楷体 + 弱化文字色 + 超大字距，
   呼应古书"眉头"的版式感。初始透明，延迟 400ms 淡入上移。 */
.cover__eyebrow {
  font-family: var(--font-kai);
  font-size: var(--fs-sm);
  color: var(--ink-3);
  letter-spacing: 0.4em;                  /* 字距 40%：松散呼吸感 */
  padding-left: 0.4em;                    /* 因为字距大，整体右偏一点视觉补偿 */
  opacity: 0;
  animation: fade-up var(--t-slow) var(--ease-silk) 400ms forwards;
}

/* 主标题：用 CSS Grid 排成 2 列 × 2 行的网格（四字成两行）。
   字号 --fs-hero 是全站最大字号（clamp 流式），宋体粗体配淡朱砂投影。 */
.cover__title {
  display: grid;
  grid-template-columns: repeat(2, auto); /* 2 列，宽度按内容自适应 */
  justify-content: center;                /* 网格整体水平居中 */
  align-items: baseline;                  /* 各行基线对齐，字底齐平 */
  column-gap: clamp(1.2em, 4vw, 3em);     /* 列间距流式 */
  row-gap: var(--sp-2);                   /* 行间距 8px */
  font-family: var(--font-serif);
  font-size: var(--fs-hero);              /* 全站最大字号 */
  font-weight: 700;
  line-height: 1.28;
  letter-spacing: 0.12em;
  color: var(--ink);
  text-shadow: 0 1px 0 rgba(168, 52, 42, 0.12); /* 1px 朱砂投影，让字"浮"起 */
}
/* 标题每一行：用 clip-path 裁切，从"被裁掉 100%"慢慢变为"完全不裁"，
   实现"从上往下揭开"的卷轴效果。每行延迟递增 180ms，形成连续节奏。 */
.cover__title-line {
  display: block;
  white-space: nowrap;                    /* 不换行，保证整行一起揭开 */
  clip-path: inset(0 0 100% 0);           /* 初始：从底部裁掉 100%（完全隐藏） */
  animation: title-reveal 1.2s var(--ease-silk) forwards;
}
/* 四行依次延迟揭开，间隔 180ms */
.cover__title-line:nth-child(1) { animation-delay: 600ms; }
.cover__title-line:nth-child(2) { animation-delay: 780ms; }
.cover__title-line:nth-child(3) { animation-delay: 960ms; }
.cover__title-line:nth-child(4) { animation-delay: 1140ms; }
/* 揭开动画：底部裁切从 100% 减到 0%（完全显示） */
@keyframes title-reveal {
  to { clip-path: inset(0 0 0 0); }
}

/* 朱砂横线：分隔标题与副标语的装饰线。
   初始宽度 0，由动画拉长到 420px（或小屏 70% 视口宽）。
   渐变两端透明，中间朱砂，形成"两头淡、中间浓"的笔锋效果。 */
.cover__rule {
  width: 0; height: 1px;                  /* 初始宽度 0，由动画驱动 */
  background: linear-gradient(90deg, transparent, var(--cinnabar) 20%, var(--cinnabar) 80%, transparent);
  animation: rule-grow 1.4s var(--ease-silk) 1.1s forwards; /* 1.1s 后开始生长 */
}
/* 线条生长：宽度从 0 拉到 min(420px, 70vw) */
@keyframes rule-grow {
  to { width: min(420px, 70vw); }
}

/* 三行副标语容器：纵向 flex，每行间隔 8px */
.cover__lines {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin-top: var(--sp-2);
}
/* 每一行副标语：楷体 + 大字距 + 次级墨色，
   初始下移 8px 并透明，由 fade-up 动画依次浮上来。
   三行错峰延迟 1500/1750/2000ms，制造"一句接一句"的吟诵节奏。 */
.cover__lines li {
  font-family: var(--font-kai);
  font-size: var(--fs-h3);
  color: var(--ink-2);
  letter-spacing: 0.18em;
  opacity: 0;
  transform: translateY(8px);             /* 初始下移 8px */
  animation: fade-up var(--t-slow) var(--ease-silk) forwards;
}
.cover__lines li:nth-child(1) { animation-delay: 1500ms; }
.cover__lines li:nth-child(2) { animation-delay: 1750ms; }
.cover__lines li:nth-child(3) { animation-delay: 2000ms; }

/* 通用"浮上来"动画：透明+下移 → 完全显示+复位
   供眉头/副标语/副说明/按钮复用。 */
@keyframes fade-up {
  to { opacity: 1; transform: translateY(0); }
}

/* 副说明段落：限制最大宽度 32em（约 32 个中文字宽），避免大屏一行太长难读。
   延迟 2300ms 最后浮上来。 */
.cover__sub {
  max-width: 32em;                        /* 限制一行宽度，便于阅读 */
  margin-top: var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--ink-3);
  letter-spacing: 0.05em;
  line-height: 1.7;
  opacity: 0;
  animation: fade-up var(--t-slow) var(--ease-silk) 2300ms forwards;
}

/* 入卷按钮：封面核心交互元素。
   - 外观：朱砂边框 + 透明底 + 楷体大字 + 超大字距(0.5em)
   - 交互：鼠标悬停时 ::before 从左向右铺满朱砂，文字反白成宣纸色；
           ::after 同步出现描金光圈，呼应"金光浮现"。
   - 入场：延迟 2600ms 最后浮上来。
   - isolation:isolate 创建独立层叠上下文，让 z-index:-1/-2 的伪元素
     被压在按钮文字下面但不会跑到按钮外面去。 */
.cover__enter {
  margin-top: var(--sp-6);
  position: relative;                     /* 给伪元素做定位参照 */
  padding: var(--sp-3) var(--sp-7);
  font-family: var(--font-kai);
  font-size: var(--fs-h3);
  letter-spacing: 0.5em;                  /* 超大字距，呼吸感 */
  padding-left: calc(var(--sp-7) + 0.5em);/* 因为字距大，左边补一点 padding 视觉对齐 */
  color: var(--cinnabar);
  border: 1px solid var(--cinnabar);      /* 朱砂细边框 */
  border-radius: var(--r-sm);
  background: transparent;
  overflow: hidden;                       /* 隐藏伪元素溢出（铺色时不出框） */
  isolation: isolate;                     /* 独立层叠上下文，防止伪元素跑出 */
  opacity: 0;
  transform: translateY(10px);
  animation: fade-up var(--t-slow) var(--ease-silk) 2600ms forwards; /* 最后浮上来 */
  transition: color var(--t-mid) var(--ease-out),
              box-shadow var(--t-mid) var(--ease-out);
}
/* 按钮伪元素 ::before：朱砂填充层，初始 scaleX(0)=横向压扁到看不见。
   悬停时 scaleX(1) 横向铺满，配合 transform-origin:left 实现从左到右铺色。 */
.cover__enter::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;                            /* 压在按钮文字下 */
  background: var(--cinnabar);
  transform: scaleX(0);                   /* 横向压扁到 0 */
  transform-origin: left center;          /* 锚点在左：从左向右展开 */
  transition: transform var(--t-mid) var(--ease-silk);
}
/* 按钮伪元素 ::after：描金光环层，悬停时浮现，平时不可见。
   inset:-2px 让它比按钮本身大 2px，作为光环围绕按钮。 */
.cover__enter::after {
  content: "";
  position: absolute;
  inset: -2px;                            /* 比按钮大 2px */
  z-index: -2;
  border-radius: inherit;
  box-shadow: 0 0 0 0 var(--gold-a30);    /* 初始 0 光圈 */
  transition: box-shadow var(--t-mid) var(--ease-out);
}
/* 悬停 / 键盘聚焦时：文字反白 + 描金阴影 */
.cover__enter:hover,
.cover__enter:focus-visible {
  color: var(--paper);
  box-shadow: var(--shadow-gold);
}
/* 悬停时 ::before 横向铺满，背景变朱砂 */
.cover__enter:hover::before,
.cover__enter:focus-visible::before {
  transform: scaleX(1);
}
/* 悬停时 ::after 出现金色光环 */
.cover__enter:hover::after,
.cover__enter:focus-visible::after {
  box-shadow: 0 0 0 2px var(--gold-a30), 0 8px 32px rgba(201, 162, 39, 0.25);
}

/* 按钮内的箭头图标：用 CSS border 拼出 V 形箭头（不用图标字体）。
   border-right + border-bottom + rotate(45deg) 拼出右下箭头；
   animation 让它轻微"呼吸"摆动，提示可点击。 */
.cover__enter-arrow {
  display: inline-block;
  width: 14px; height: 14px;
  margin-left: 0.8em;
  border-right: 2px solid currentColor;   /* currentColor = 当前文字色，自动跟随 */
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px); /* 旋转 45° 让 V 形朝右下 */
  animation: arrow-breath 2.4s var(--ease-in-out) infinite;
}
/* 箭头呼吸：在原位和右下方之间循环摆动 */
@keyframes arrow-breath {
  0%, 100% { transform: rotate(45deg) translate(0, -2px); }
  50%      { transform: rotate(45deg) translate(2px, 0); }
}

/* 暗角：封面四角的暗化层，用径向渐变让中心透明、四角变暗，
   模拟老照片或卷轴边缘的"晕影"效果，让视觉聚焦于中心。
   z-index:1 让它在水墨装饰层(默认)之上、画框(2)之下。 */
.cover__vignette {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(ellipse at center, transparent 50%, rgba(60, 50, 35, 0.10) 90%, rgba(40, 30, 20, 0.18) 100%);
}

/* ===== 响应式：小屏适配（< 768px，手机） =====
   缩小印章、收紧间距、字号降级，让封面在手机上也能完整显示。 */
@media (max-width: 767px) {
  .cover__seal { width: 72px; height: 72px; font-size: 1.3rem; }
  .cover__frame { padding: var(--sp-5) var(--sp-4); gap: var(--sp-4); }
  .cover__lines li { font-size: var(--fs-body); letter-spacing: 0.14em; }
  .cover__sub { font-size: var(--fs-xs); }
  .cover__enter { padding: var(--sp-3) var(--sp-6); font-size: var(--fs-body); }
}

/* 无障碍：用户系统勾选"减少动画"时，去掉复杂动画，
   标题改为简单淡入，印章和箭头不再循环动。 */
@media (prefers-reduced-motion: reduce) {
  .cover__title-line { clip-path: none; animation: fade-up var(--t-fast) forwards; }
  .cover__enter-arrow { animation: none; }
  .loader__seal { animation: none; }
}