/* 首页开场浮层的样式。
 *
 * 打开网站时先整屏显示一句，静置 3 秒后柔和揭开露出工具首页。
 *
 * 【配色】一律引用站点自己的设计变量（--bg / --ink / --muted / --brand），
 * 不另立一套深色。理由：浮层盖住的正是工具首页，若它自带纯黑，
 * 揭开瞬间整屏从黑跳到白，视觉上是一次突兀的硬切。
 * 取同一套变量后，浮层与首页是同一个底、同一套字色，揭开只是「句子退场」；
 * 顺带自动跟随 site.css 里的深色模式，系统切深色时两处一起变。
 * 每个 var() 都写了兜底值：万一 site.css 没加载，浮层仍是正常配色而不是空壳。
 *
 * 【结构】刻意分两层，为了做两次错开的淡出：
 *   .intro__veil  —— 底色幕布。它是「背景」，必须最后走，否则句子会像悬空消失
 *   .intro__stage —— 句子。先走，并微微上浮、散焦，读起来像「话说完、让位」
 * 若把两者合成一层，只能整屏同步淡化，观感就是「时间到、一刀切」。
 *
 * 变量统一 --i- 前缀，与站点样式零耦合。
 */

:root {
  /* 兜底值一律抄 site.css 的「纸与墨」档，不另起一套色。
     这些值平时不生效（site.css 先定义了 --bg / --ink / --muted），
     但只要哪天开场页被单独加载、或 site.css 没跟上，露出来的就是它们 ——
     冷色兜底会让开场那一下变成另一种网站。 */
  --i-bg: var(--bg, #faf7f2);
  --i-text: var(--ink, #241f1a);
  --i-muted: var(--muted, #6e655a);
  --i-brand: var(--brand, #b8462f);
  --i-ui: var(
    --font,
    system-ui,
    -apple-system,
    "Segoe UI",
    "Microsoft YaHei",
    sans-serif
  );
  --i-serif: "Source Han Serif SC", "Noto Serif SC", "Songti SC", "STSong",
    "SimSun", Georgia, "Times New Roman", serif;

  /* 退场时长，供 intro.js 对齐（改一处要改两处）：
     幕布延迟 + 幕布时长 = 150 + 620 = 770ms */
  --i-veil-delay: 0.15s;
  --i-veil-ms: 0.62s;
  --i-stage-ms: 0.5s;
}

.intro {
  position: fixed;
  inset: 0;
  /* 必须高于站点的 sticky 顶栏（40）与提示条（90），否则顶栏会浮在浮层上 */
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14vh 9vw;
  /* 衬线体是整个「读一句」的气质感所在：设成无衬线就退化成一句普通的提示文案 */
  font-family: var(--i-serif);
  color: var(--i-text);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

/* 底色幕布：站点底色 + 一团极淡的靛蓝色晕。
 * 与首页顶部那层色晕（site.css 的 body::before）是同一手法、同一个主色，
 * 所以揭开时色晕只是「从中间挪到顶部」，不会有色相跳变。 */
.intro__veil {
  position: absolute;
  inset: 0;
  background-color: var(--i-bg);
  background-image: radial-gradient(
      120% 85% at 50% 40%,
      color-mix(in srgb, var(--i-brand) 10%, transparent) 0%,
      transparent 62%
    ),
    radial-gradient(
      760px 300px at 50% 104%,
      color-mix(in srgb, var(--i-brand) 6%, transparent) 0%,
      transparent 70%
    );
  transition: opacity var(--i-veil-ms) cubic-bezier(0.33, 0, 0.2, 1)
    var(--i-veil-delay);
}

/* 句子层：relative 让它叠在幕布之上 */
.intro__stage {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: opacity var(--i-stage-ms) cubic-bezier(0.33, 0, 0.2, 1),
    transform var(--i-stage-ms) cubic-bezier(0.33, 0, 0.2, 1),
    filter var(--i-stage-ms) cubic-bezier(0.33, 0, 0.2, 1);
}

/* 一道短横线，取站点主色。
 * 作用不是装饰：它把句子锚在「同一套视觉体系」里，
 * 让人一眼看出这是工具站的开场，而不是另一个站点。 */
.intro__rule {
  width: 34px;
  height: 2px;
  margin: 0 0 34px;
  border-radius: 2px;
  background: color-mix(in srgb, var(--i-brand) 52%, transparent);
}

.intro__line {
  max-width: 34rem;
  margin: 0;
  font-size: clamp(1.3rem, 2.6vw + 0.7rem, 2.05rem);
  font-weight: 400;
  line-height: 1.78;
  letter-spacing: 0.055em;
  text-align: center;
  text-wrap: balance;
}

/* 长句降一档字号：整屏排版对长度很敏感，四五十字的句子照原字号会顶满屏 */
.intro__line.is-long {
  font-size: clamp(1.12rem, 2vw + 0.6rem, 1.68rem);
}

/* 出处：无衬线小字、压到最淡，它不该参与第一眼的注意力竞争。
 * 本地句子没有出处，此时元素带 hidden，整行不占位。 */
.intro__from {
  margin: 26px 0 0;
  max-width: 34rem;
  font-family: var(--i-ui);
  font-size: clamp(0.78rem, 0.5vw + 0.64rem, 0.9rem);
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0.07em;
  color: var(--i-muted);
  text-align: center;
}

.intro__from[hidden] {
  display: none;
}

/* ---------- 揭开 ---------- */

/* 句子先退：上浮 + 轻微散焦。散焦是关键，纯淡出会显得「没走完就没了」，
 * 加了模糊才像焦点从句子移开。 */
.intro.is-out .intro__stage {
  opacity: 0;
  transform: translateY(-14px);
  filter: blur(7px);
}

/* 幕布后走：延迟 0.15s，等句子先退开半步再散。
 * 因为幕布底色 = 首页底色，这层淡出几乎看不出来 —— 目的正是「无感」，
 * 真正的观感是句子散去、首页落定。 */
.intro.is-out .intro__veil {
  opacity: 0;
}

/* 首页内容的入场：与幕布淡出同步，让首页像「落定」而不是被硬揭开。
 *
 * 用 animation 而不是 transition 是刻意的：
 * 万一脚本出错、body 上的 intro-leaving 没被摘掉，动画也会自行跑完并停在
 * 终态（opacity 1），页面不会卡在不可见状态 —— 拿动画做「一次性入场」，
 * 比用类名控制初始隐藏要安全得多。
 */
@keyframes intro-site-in {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.994);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

body.intro-leaving #app {
  animation: intro-site-in 0.72s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

/* 开场期间锁住滚动：浮层是不透明的，背后还能滚会让人以为页面错乱 */
body.intro-open {
  overflow: hidden;
}

/* 系统开了「减少动态效果」就不做任何动效，直接摘掉，
 * 避免这类全屏动效给敏感的人带来不适。 */
@media (prefers-reduced-motion: reduce) {
  .intro__veil,
  .intro__stage {
    transition: none;
  }

  body.intro-leaving #app {
    animation: none;
  }
}