/* ==========================================================================
   00 · tokens.css — Candy Brutal（糖果粗野）
   ─────────────────────────────────────────────────────────────────────────
   基准：线上版本 (xishigame.com) 的结构与尺寸比例，一点没动。

   ⚠️ 比例约定 —— 与线上严格一致，勿动：
      正文 16px · 内容宽 1180px · 侧栏 296px · 顶栏 60px 胶囊
      容器圆角 20px · 小件 14/16px · 胶囊 999px · 圆钮 132px

   风格思路（奶油糖果 × 新粗野主义）：
      1. 底色：暖奶白 + 极淡糖果圆点纸屑（polka dots），像糖果包装纸
      2. 造型走新粗野主义三件套：
         · 深色硬描边  —— 统一 2.5px 实线 var(--ink)（暖梅色，比纯黑柔）
         · 实心硬影    —— Npx Npx 0（无模糊、无透明度），像贴纸一样"翘"起来
         · 纯色块填充  —— 糖果色以纯色块出现，色板取"奶油马卡龙"，
                          柔和不刺眼；高级感靠 ①奶白底 ②香槟金点缀
                          ③极细奶釉高光（--glaze）三件套撑住
      3. 每个板块有自己的糖果主色，只用在【填充】上；
         描边与阴影一律走 ink，保证"粗野"骨架统一
      4. 动效走位移：悬停向左上"抬起"（阴影变大），按压向右下"按下"（阴影归零）
   ========================================================================== */

:root {
  color-scheme: light;

  /* ---------- 糖果色板（奶油马卡龙，用于填充） ----------
     比上一版"硬糖色"更柔、更奶，贴近可爱系；
     但因为色块彼此饱和度接近、明度偏高，整体不会碎，
     高级感由奶白底 + 香槟金 + 奶釉高光来收。
     线条与阴影一律走 --ink，色板只负责"甜"。
  ------------------------------------------------------ */
  --candy-pink: #ff8fb1;        /* 草莓奶昔（主色） */
  --candy-pink-soft: #ffd3e0;
  --candy-pink-wash: #fff2f7;

  --candy-purple: #b39dff;      /* 葡萄糖霜（辅色） */
  --candy-purple-soft: #e1d7ff;
  --candy-purple-wash: #f7f3ff;

  --candy-yellow: #ffe066;      /* 柠檬奶油 */
  --candy-yellow-soft: #fff3b5;
  --candy-yellow-wash: #fffaeb;

  --candy-mint: #7fe3bd;        /* 薄荷牛奶 */
  --candy-mint-soft: #c6f6e4;
  --candy-mint-wash: #effcf6;

  --candy-blue: #8ecdf9;        /* 蓝莓苏打 */
  --candy-blue-soft: #cce9fc;
  --candy-blue-wash: #f2f9fe;

  --candy-orange: #ffbb8f;      /* 蜜桃奶油 */
  --candy-orange-soft: #ffddc3;
  --candy-orange-wash: #fff5ee;

  --candy-red: #ff9a9a;         /* 樱桃果冻 */
  --candy-red-soft: #ffd0d0;
  --candy-red-wash: #fff4f4;

  /* 高级感点缀：香槟金 + 珠光（只用在极少数"提气"的地方） */
  --champagne: #f0d59a;
  --champagne-deep: #c9a75f;
  --pearl: linear-gradient(115deg,
      #ffd3e0 0%, #e1d7ff 26%, #cce9fc 48%, #c6f6e4 70%, #fff3b5 100%);

  /* ---------- 语义色 ---------- */
  --bg: #fffaf7;
  --bg-warm: #fff5f0;
  --bg-cool: #f8f3ff;

  /* 糖果黑：所有描边 / 硬影统一用它
     （暖梅色 #3e2c4a —— 比纯黑柔和，压得住可爱色，又保住了"粗野"的硬） */
  --ink: #3e2c4a;
  --ink-2: rgba(62, 44, 74, 0.55);
  --ink-3: rgba(62, 44, 74, 0.2);

  --text: var(--ink);
  --text-soft: #6b5a78;
  /* 次级文字压到 4.5:1 以上，可爱系也不能牺牲可读性 */
  --muted: #7f6f8c;
  --faint: #bfb2ca;
  --on-dark: #ffffff;

  --accent: var(--candy-pink);
  --accent-2: var(--candy-purple);
  --accent-3: var(--candy-yellow);
  --accent-4: var(--candy-mint);

  --success: #3fae7d;
  --warning: #d29a34;
  --danger: #ef6270;

  /* ---------- 描边宽度 ---------- */
  --stroke-thin: 2px;
  --stroke: 2.5px;
  --stroke-thick: 3px;

  /* ---------- 奶釉高光（高级感的关键一笔） ----------
     极细的一道上缘高光，模拟奶油糖表面那层釉，
     不改变平面填充的新粗野主义感，但让面板"润"起来
  ------------------------------------------------ */
  --glaze: inset 0 2px 0 rgba(255, 255, 255, 0.85);
  --glaze-soft: inset 0 1px 0 rgba(255, 255, 255, 0.6);

  /* ---------- 面板（纯色块，不是玻璃也不是软糖） ----------
     --panel       奶白实面
     --panel-solid 纯白，用于顶栏 / 弹窗
     --panel-line  面板描边 = 糖果黑
  ------------------------------------------------ */
  --panel: #fffdfa;
  --panel-solid: #ffffff;
  --panel-flat: #fffdfa;
  --panel-line: var(--ink);
  --panel-tint: #fff8f5;
  /* 顶栏专用底：白里透一点粉，可爱感的第一眼 */
  --panel-top: #fff9fc;

  /* 兼容旧变量名（其余样式文件仍在引用，值已换成粗野质感） */
  --glass: var(--panel-flat);
  --glass-strong: var(--panel-solid);
  --glass-soft: var(--panel-flat);
  --glass-tint: var(--panel-tint);
  --glass-border: var(--panel-line);
  --glass-blur: none;
  --glass-blur-lg: none;

  /* ---------- 线条 ---------- */
  --line: var(--panel-line);
  --hairline: rgba(62, 44, 74, 0.13);
  --hairline-2: rgba(62, 44, 74, 0.22);
  --rule: var(--stroke-thin) solid var(--hairline);
  --rule-2: var(--stroke-thin) solid var(--hairline-2);

  /* ---------- 阴影：新粗野主义的实心硬影 + 奶釉高光 ----------
     无模糊、无透明度，像贴纸一样往右下"翘"起来；
     每档都带一道奶釉内高光（--glaze），让平面色块"润"而不糊
  ------------------------------------------------ */
  --hard-sm: 3px 3px 0 0 var(--ink), var(--glaze);
  --hard: 4px 4px 0 0 var(--ink), var(--glaze);
  --hard-lg: 6px 6px 0 0 var(--ink), var(--glaze);
  --hard-xl: 8px 8px 0 0 var(--ink), var(--glaze);
  --hard-hover: 7px 7px 0 0 var(--ink), var(--glaze);
  --hard-none: 0 0 0 0 var(--ink), var(--glaze-soft);

  /* 兼容旧变量名（旧样式引用的 --shadow* 全部映射到硬影） */
  --shadow: var(--hard-sm);
  --shadow-md: var(--hard);
  --shadow-hover: var(--hard);
  --shadow-lift: var(--hard-lg);
  --shadow-inset: none;

  /* 兼容旧变量名：糖块"厚底" → 统一硬影 */
  --candy-edge: var(--hard);
  --candy-edge-hover: var(--hard-hover);

  /* 兼容旧变量名：彩色光晕在新粗野主义里不用，置空 */
  --glow-pink: none;
  --glow-purple: none;
  --glow-yellow: none;
  --glow-mint: none;
  --glow-blue: none;
  --glow-orange: none;
  --glow-red: none;

  /* ---------- 圆角（线上比例） ---------- */
  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 14px;
  --r-lg: 16px;
  --r-xl: 20px;      /* 容器标准圆角，与线上一致 */
  --r-2xl: 28px;
  --r-pill: 999px;

  /* ---------- 位移：抬起 / 按下 ---------- */
  --lift: translate(-2px, -2px);
  --lift-lg: translate(-4px, -4px);
  --press: translate(2px, 2px);
  --press-flat: translate(0, 0);

  /* ---------- 字体 ---------- */
  /* 正文：系统黑体优先 —— 零加载成本、中文可读性最好 */
  --font: "PingFang SC", "MiSans", "HarmonyOS Sans SC", "Microsoft YaHei", "Hiragino Sans GB", "Noto Sans SC", sans-serif;
  /* 展示字体：站酷快乐体（自托管 · 见 css/base/fonts.css）
     圆润手写感、笔画收尾带弧度 —— 用于标题 / 按钮 / 圆钮 / 徽章 / 导航 */
  --font-title: "ZCOOL KuaiLe", "PingFang SC", "Microsoft YaHei", sans-serif;
  /* 拉丁 / 数字：Fredoka（圆头几何体，与快乐体同骨架） */
  --font-num: "Fredoka", "ZCOOL KuaiLe", "PingFang SC", sans-serif;
  --font-mono: "SFMono-Regular", Consolas, "Courier New", monospace;
  /* 颜文字 / 符号：快乐体不含 ᴗ ♡ ｡ ≧ 这些字符，必须走系统字体栈，
     否则落到浏览器默认字体后字重字号对不上，点缀会显脏 */
  --font-kaomoji: "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Yu Gothic UI", "Microsoft YaHei", sans-serif;
  /* 兼容旧引用 */
  --font-rounded: var(--font-title);

  --fw-normal: 400;
  --fw-medium: 600;
  --fw-bold: 700;
  --fw-black: 800;
  --fw-blackest: 900;

  /* ---------- 字号 ----------
     用户在线上原版比例基础上要求"整体再大一点"，故全线约 +12% ~ +15%。
     改这里即可全站生效（组件层绝大多数 font-size 都消费这些令牌）。 */
  --fs-micro: 12px;
  --fs-xs: 13px;
  --fs-sm: 15px;
  --fs-base: 18px;
  --fs-md: 19px;
  --fs-lg: 22px;
  --fs-xl: 26px;
  --fs-2xl: clamp(24px, 5.4vw, 37px);
  --fs-3xl: clamp(27px, 5.4vw, 42px);
  --fs-display: clamp(33px, 8.4vw, 64px);
  --fs-mega: clamp(68px, 14vw, 140px);

  --ls-tight: -0.02em;
  --ls-normal: 0;
  --ls-wide: 0.06em;
  --ls-wider: 0.14em;

  --lh-tight: 1.1;
  --lh-snug: 1.3;
  --lh-normal: 1.6;
  --lh-loose: 1.8;

  /* ---------- 动效：干脆利落（粗野主义不要弹簧感） ---------- */
  --ease: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-pop: cubic-bezier(0.2, 0.9, 0.3, 1.3);
  /* 可爱系专属：更明显的回弹（用于按钮/圆钮的小跳动） */
  --ease-bounce: cubic-bezier(0.34, 1.78, 0.5, 1);
  --ease-sine: cubic-bezier(0.37, 0, 0.63, 1);
  --t-fast: 0.14s;
  --t-base: 0.24s;
  --t-slow: 0.5s;
  --t-lazy: 0.9s;

  /* ---------- 布局（线上比例） ---------- */
  --page-max: 1180px;
  --sidebar: 296px;
  --topbar-h: 60px;
  --gutter: 12px;
  --measure: 68ch;
}

/* ==========================================================================
   全局重置
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
}

/* 糖果包装纸：奶白底 + 一层错位排列的糖果圆点 */
body {
  position: relative;
  font-family: var(--font);
  font-size: var(--fs-base);
  font-weight: var(--fw-normal);
  line-height: var(--lh-normal);
  color: var(--text);
  background-color: var(--bg);
  background-image:
    radial-gradient(circle at 12% 8%, rgba(255, 143, 177, 0.16), transparent 26rem),
    radial-gradient(circle at 92% 18%, rgba(179, 157, 255, 0.16), transparent 28rem),
    radial-gradient(circle at 50% 108%, rgba(255, 224, 102, 0.14), transparent 30rem),
    radial-gradient(circle, rgba(255, 143, 177, 0.12) 1.6px, transparent 1.7px),
    radial-gradient(circle, rgba(179, 157, 255, 0.12) 1.6px, transparent 1.7px),
    linear-gradient(180deg, var(--bg-warm) 0%, var(--bg) 40%, var(--bg-cool) 100%);
  background-size:
    auto, auto, auto,
    28px 28px, 28px 28px,
    auto;
  background-position:
    0 0, 0 0, 0 0,
    0 0, 14px 14px,
    0 0;
  background-repeat: no-repeat, no-repeat, no-repeat, repeat, repeat, no-repeat;
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* 糖果光斑：三团糖色缓慢漂移（在内容之下、底纸之上），保持很淡 */
body::after {
  content: "";
  position: fixed;
  inset: -25%;
  z-index: -1;
  pointer-events: none;
  opacity: 0.72;
  background:
    radial-gradient(closest-side, rgba(255, 143, 177, 0.19), transparent),
    radial-gradient(closest-side, rgba(179, 157, 255, 0.19), transparent),
    radial-gradient(closest-side, rgba(127, 227, 189, 0.15), transparent);
  background-size: 58% 58%, 52% 52%, 48% 48%;
  background-position: 8% 18%, 88% 12%, 58% 88%;
  background-repeat: no-repeat;
  filter: blur(38px);
  animation: candyDrift 26s ease-in-out infinite alternate;
}

@keyframes candyDrift {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
  }

  50% {
    transform: translate3d(2.4%, -2%, 0) scale(1.07);
  }

  100% {
    transform: translate3d(-2.4%, 2.4%, 0) scale(1.03);
  }
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  font-weight: var(--fw-black);
  line-height: var(--lh-snug);
}

p {
  margin: 0;
}

img {
  max-width: 100%;
  display: block;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button {
  border: 0;
  background: none;
  cursor: pointer;
}

a {
  color: inherit;
  text-decoration: none;
}

::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

::-webkit-scrollbar-track {
  background: rgba(62, 44, 74, 0.06);
}

::-webkit-scrollbar-thumb {
  background: var(--candy-pink);
  border: var(--stroke-thin) solid var(--ink);
  border-radius: var(--r-pill);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--candy-purple);
}

::selection {
  background: var(--candy-yellow);
  color: var(--ink);
}

:focus-visible {
  outline: var(--stroke-thick) solid var(--ink);
  outline-offset: 2px;
}

/* ==========================================================================
   粗野面板：实心纯色 + 深色硬描边 + 实心硬影
   ========================================================================== */

.glass,
.candy-panel {
  background: var(--panel);
  border: var(--stroke) solid var(--panel-line);
  border-radius: var(--r-xl);
  box-shadow: var(--hard);
}

/* 实心面板（顶栏 / 弹窗） */
.glass-strong,
.candy-panel-solid {
  background: var(--panel-solid);
  border: var(--stroke) solid var(--panel-line);
  border-radius: var(--r-xl);
  box-shadow: var(--hard-lg);
}

.glass-soft,
.candy-panel-soft {
  background: var(--panel-flat);
  border: var(--stroke-thin) solid var(--panel-line);
  border-radius: var(--r-xl);
}

/* 可交互面板：抬起 / 按下 */
.glass-interactive,
.candy-interactive {
  transition:
    transform var(--t-base) var(--ease-pop),
    box-shadow var(--t-base) var(--ease-pop);
}

.glass-interactive:hover,
.candy-interactive:hover {
  transform: var(--lift);
  box-shadow: var(--hard-hover);
}

.glass-interactive:active,
.candy-interactive:active {
  transform: var(--press);
  box-shadow: var(--hard-none);
}

.card {
  background: var(--panel);
  border: var(--stroke) solid var(--panel-line);
  border-radius: var(--r-xl);
  box-shadow: var(--hard);
}

/* ==========================================================================
   糖果语气色：决定该板块用哪块糖做【填充】
   用法：<section class="candy-panel tone-strawberry">
   ========================================================================== */

.tone-strawberry { --tone: var(--candy-pink); --tone-soft: var(--candy-pink-soft); --tone-wash: var(--candy-pink-wash); --tone-deep: #b8446c; }
.tone-grape      { --tone: var(--candy-purple); --tone-soft: var(--candy-purple-soft); --tone-wash: var(--candy-purple-wash); --tone-deep: #6b4fbf; }
.tone-lemon      { --tone: var(--candy-yellow); --tone-soft: var(--candy-yellow-soft); --tone-wash: var(--candy-yellow-wash); --tone-deep: #a37f16; }
.tone-mint       { --tone: var(--candy-mint); --tone-soft: var(--candy-mint-soft); --tone-wash: var(--candy-mint-wash); --tone-deep: #1f7a58; }
.tone-blueberry  { --tone: var(--candy-blue); --tone-soft: var(--candy-blue-soft); --tone-wash: var(--candy-blue-wash); --tone-deep: #20658f; }
.tone-tangerine  { --tone: var(--candy-orange); --tone-soft: var(--candy-orange-soft); --tone-wash: var(--candy-orange-wash); --tone-deep: #a35c22; }
.tone-cherry     { --tone: var(--candy-red); --tone-soft: var(--candy-red-soft); --tone-wash: var(--candy-red-wash); --tone-deep: #b23b3b; }

/* 带主色的面板：底色染上极淡的糖果洗色，描边照旧走 ink */
.candy-tinted {
  background: var(--tone-wash, var(--panel));
  border-color: var(--ink);
}

/* 纯糖果色块（用于填充按钮 / 徽章） */
.candy-fill {
  background: var(--tone, var(--candy-pink));
  border: var(--stroke) solid var(--ink);
  box-shadow: var(--hard-sm);
  color: var(--ink);
}

/* ==========================================================================
   区块标题条（线上原版的 .section-bar）
   整条糖果色块 + 居中粗体标题 + 底部 ink 描边
   上面再叠一道缓慢横移的奶釉流光（effect 层，几何在 layout.css）
   ========================================================================== */

.section-bar {
  position: relative;
  overflow: hidden;
  background: var(--candy-pink-soft);
  border-bottom: var(--stroke) solid var(--ink);
  text-align: center;
}

/* 慢速流光：让标题条"活"起来，但很克制（12s 一遍） */
.section-bar::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -45%;
  width: 40%;
  pointer-events: none;
  background: linear-gradient(
    100deg,
    transparent 0%,
    rgba(255, 255, 255, 0.62) 50%,
    transparent 100%
  );
  transform: skewX(-16deg);
  animation: barSheen 12s var(--ease-sine) infinite;
}

.section-bar h2,
.section-bar h3 {
  position: relative;
  z-index: 1;
  margin: 0;
  font-size: clamp(22px, 4.8vw, 31px);
  font-weight: var(--fw-blackest);
  letter-spacing: 0.08em;
  line-height: 1.2;
  color: var(--ink);
  text-shadow: 0 2px 0 rgba(255, 255, 255, 0.75);
}

/* 紫色系（陪陪展示） */
.section-bar.bar-grape {
  background: var(--candy-purple-soft);
}

/* 橙色系（官号 / 价格表 / 留言板 / 点单须知） */
.section-bar.bar-tangerine {
  background: var(--candy-orange-soft);
}

/* 薄荷系（预留：可用于"已开通"类条目） */
.section-bar.bar-mint {
  background: var(--candy-mint-soft);
}

@keyframes barSheen {
  0% {
    left: -45%;
  }

  55%,
  100% {
    left: 118%;
  }
}

/* ==========================================================================
   工具类
   ========================================================================== */

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-xs);
  font-weight: var(--fw-black);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--muted);
}

.eyebrow::before {
  content: "";
  width: 16px;
  height: 3px;
  border-radius: 0;
  background: currentColor;
  opacity: 0.7;
}

.eyebrow-accent {
  color: var(--accent);
}

.eyebrow-accent::before {
  opacity: 1;
}

.rule-top {
  border-top: var(--stroke-thin) solid var(--hairline-2);
}

.cols-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
}

.cols-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

@media (max-width: 768px) {

  /* 小屏字号整体收一档。
     桌面版为了大屏观感把正文提到 18px、各标题提到 17~26px，
     同一套数值换到手机上就明显偏大。这里只改字号，
     不动布局、颜色与间距，桌面观感完全不受影响。 */
  :root {
    --fs-micro: 11px;
    --fs-xs: 12px;
    --fs-sm: 14px;
    --fs-base: 16px;
    --fs-md: 17px;
    --fs-lg: 19px;
    --fs-xl: 22px;
    --fs-2xl: clamp(20px, 5.6vw, 28px);
    --fs-3xl: clamp(22px, 6vw, 30px);
    --fs-display: clamp(26px, 9vw, 40px);
    --fs-mega: clamp(46px, 16vw, 84px);
  }

  .cols-2,
  .cols-3 {
    grid-template-columns: 1fr;
    gap: 22px;
  }
}

/* ==========================================================================
   糖果特效
   ========================================================================== */

/* 渐变文字 */
.text-gradient {
  background: linear-gradient(115deg, var(--candy-pink) 0%, var(--candy-purple) 60%, var(--candy-blue) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* 贴纸描边字：白色硬描边 + 糖果色硬影，像贴纸标签 */
.text-sticker {
  color: var(--ink);
  text-shadow:
    0 2px 0 #fff,
    0 4px 0 var(--candy-pink-soft);
}

/* 珠光字：糖纸虹彩，用于"提气"的少数短语（大标题 / 徽章） */
.text-pearl {
  background: var(--pearl);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* 香槟描金：高级感的锚点，少量使用 */
.text-champagne {
  color: var(--champagne-deep);
}

/* --------------------------------------------------------------------------
   粒子层（由 components/particles.js 注入 canvas）
   固定在视口，位于底纸之上、内容之下（#app 已抬到 z-index 1）
   -------------------------------------------------------------------------- */

.particle-field {
  position: fixed;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* 点击爆花：由 particles.js 动态插入 <span class="burst-bit"> */
.burst-bit {
  position: fixed;
  z-index: 9999;
  display: block;
  width: 9px;
  height: 9px;
  margin: 0;
  padding: 0;
  pointer-events: none;
  border-radius: 50%;
  background: var(--candy-pink);
  border: 2px solid var(--ink);
  will-change: transform, opacity;
  animation: burstOut 0.72s var(--ease-pop) forwards;
}

.burst-bit.is-glyph {
  width: auto;
  height: auto;
  background: none;
  border: 0;
  font-family: var(--font-kaomoji);
  font-size: 18px;
  line-height: 1;
  color: var(--candy-pink);
}

@keyframes burstOut {
  0% {
    transform: translate(-50%, -50%) translate(0, 0) scale(0.35) rotate(0deg);
    opacity: 1;
  }

  70% {
    opacity: 1;
  }

  100% {
    transform: translate(-50%, -50%) translate(var(--bx, 0), var(--by, 0)) scale(1) rotate(var(--br, 0deg));
    opacity: 0;
  }
}

/* 光泽扫过：卡片悬停时一道反光划过 */
.shine {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.shine::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -60%;
  width: 45%;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(
    100deg,
    transparent 0%,
    rgba(255, 255, 255, 0.55) 50%,
    transparent 100%
  );
  transform: skewX(-18deg);
  opacity: 0;
}

.shine:hover::after {
  animation: shineSweep 0.8s var(--ease-out);
}

@keyframes shineSweep {
  0% {
    left: -60%;
    opacity: 0;
  }

  15% {
    opacity: 1;
  }

  100% {
    left: 115%;
    opacity: 0;
  }
}

/* 硬影呼吸：强调元素时开时合的硬影 */
.pulse-glow {
  animation: pulseHard 2.6s steps(2, end) infinite;
}

@keyframes pulseHard {

  0%,
  100% {
    box-shadow: var(--hard);
  }

  50% {
    box-shadow: var(--hard-hover);
  }
}

/* 糖粒跳动：给强调元素一点俏皮感 */
.wiggle {
  animation: wiggle 2.6s var(--ease-pop) infinite;
}

@keyframes wiggle {

  0%,
  86%,
  100% {
    transform: rotate(0deg);
  }

  90% {
    transform: rotate(-4deg);
  }

  94% {
    transform: rotate(4deg);
  }
}

/* 视差容器 */
.parallax {
  overflow: hidden;
}

.parallax-layer {
  will-change: transform;
  transform-origin: center;
}

/* 滚动浮现
   ⚠ 用独立属性 `translate` 而不是 `transform` 做位移：
     `.reveal.in-view` 带 forwards 填充会永久锁住 transform，
     那样卡片的 hover 抬起（transform: var(--lift)）就再也生效不了。
     改用 translate 后，浮现位移与 hover 位移由浏览器分别合成，互不干扰。 */
@keyframes revealUp {
  from {
    opacity: 0;
    translate: 0 22px;
  }

  to {
    opacity: 1;
    translate: 0 0;
  }
}

.reveal {
  opacity: 0;
}

.reveal.in-view {
  animation: revealUp 0.6s var(--ease-out) forwards;
}

.reveal-d1.in-view {
  animation-delay: 0.06s;
}

.reveal-d2.in-view {
  animation-delay: 0.12s;
}

.reveal-d3.in-view {
  animation-delay: 0.18s;
}

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    /* ⚠️ 必须收在 none 上：animation-fill-mode: both 会让 .view 永久保留
       结束帧的 transform，而任何非 none 的 transform 都会让 .view 成为
       position: fixed 的包含块 —— 窄屏下的侧栏抽屉是 fixed 定位，一旦
       祖先带了 transform 就会相对 .view 而不是视口定位，直接错位。 */
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  body::after {
    animation: none;
  }
}