/* =================================================================
   微工具库 · 样式表
   设计基调：极简亮白未来科技风（近白底 + 近黑字 + 细线条）
   排版：全屏单页纵轴、绝对居中、三级字号、大留白
================================================================= */

/* ---------- 基础变量（想换配色/字号，改这里就行） ---------- */
:root {
  --bg: #f7f7f8;            /* 近白背景（微弱冷灰，比纯白更柔和高级） */
  --bg-soft: #efeff1;       /* 极轻微的分层背景 */
  --text: #0b0b0c;          /* 主文字：近黑 */
  --text-dim: #5f6066;      /* 次级文字：中灰 */
  --text-faint: #a9abb2;    /* 最弱文字：浅灰（白底上弱文字用浅灰） */
  --line: rgba(0, 0, 0, 0.10);  /* 线条基础透明度 */
  --line-strong: rgba(0, 0, 0, 0.22);
  --card-bg: #eef0f2;       /* 插件卡片“书壳”底色 */
  --card-face: #ffffff;     /* 插件卡片“内页”底色 */
  --ease: cubic-bezier(0.22, 1, 0.36, 1); /* 缓动曲线，入场更顺滑 */
}

/* ---------- 全局重置 ---------- */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth; /* 锚点/箭头点击平滑滚动 */
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: "Inter", "Space Grotesk", -apple-system, BlinkMacSystemFont,
    "PingFang SC", "Microsoft YaHei", sans-serif;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* =================================================================
   1) 加载页
================================================================= */
.loader {
  position: fixed;
  inset: 0;                 /* 铺满整个视口 */
  z-index: 100;
  background: var(--bg);
  /* 子元素全部用绝对定位：数字在上、小人与进入卡片在正中心重叠，
     这样加载完成时“小人→卡片”是原地淡变，不会一上一下地跳层 */
}

/* 加载完成后由 JS 加上 .is-hidden 平滑淡出 */
.loader.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* 加载期间由 JS 加 .scroll-locked：锁死页面滚动
   - 进度动画 / "点击进入"门 / 开箱动画期间禁止滚轮与触摸滚动，
     防止背后内容被滚动导致首屏对位不准；点击进入后由 JS 移除 */
html.scroll-locked,
html.scroll-locked body {
  overflow: hidden;
  height: 100%;
  touch-action: none;
}

/* 仅在没有 GSAP（CDN 失败）时用 CSS transition 做淡出回退；
   有 GSAP 时由 GSAP 逐帧控制，不挂 transition，避免双重缓动卡顿 */
.no-gsap .loader {
  transition: opacity 0.5s var(--ease), visibility 0.5s var(--ease);
}

/* 进度到 100% 后（.loader--done）：数字、小人、底部文案原地淡出，
   小人同时轻微缩小“融入”卡片，只留进入卡片居中浮现 */
.loader--done .loader__count,
.loader--done .loader__character,
.loader--done .loader__hint {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.55s var(--ease), transform 0.55s var(--ease);
}
.loader--done .loader__character {
  transform: translate(-50%, -50%) scale(0.8);
}

/* 居中的百分比数字（缩小，作为进度指示，不抢小人风头） */
.loader__count {
  position: absolute;
  top: 12vh;
  left: 50%;
  transform: translateX(-50%);
  font-family: "Space Grotesk", sans-serif;
  font-weight: 600;
  font-size: clamp(2.2rem, 7vw, 4rem);
  letter-spacing: -0.02em;
  line-height: 1;
  display: flex;
  align-items: flex-start;
  color: var(--text);
}

.loader__pct {
  font-size: 0.35em;
  margin-top: 0.4em;
  margin-left: 0.1em;
  color: var(--text-dim);
}

/* 底部音效铺垫文案 */
.loader__hint {
  position: absolute;
  bottom: 38px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  color: var(--text-dim);
  white-space: nowrap;
}

.icon-speaker {
  color: var(--text-dim);
  animation: speaker-pulse 2.4s ease-in-out infinite;
}

/* ===== 行走小人（参考 Uiverse 行走 loader，暗黑线框版） ===== */
.loader__character {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 200px;
  height: 200px;
}
.loader__character .char {
  width: 100%;
  height: 100%;
  overflow: visible;          /* 动画位移不出界裁切 */
  color: var(--text);
}
.loader__character .char #gnd { color: var(--text-dim); }
.antenna { fill: currentColor; }   /* 天线灯填充 */

/* 部件：独立 translate 属性定位，transform（keyframes 动画）在其之上叠加 */
.head  { translate: 100px 52px;  animation: bob 1s infinite ease-in; }
.bod   { translate: 100px 92px;  animation: bob 1s infinite ease-in-out; }
.legr  { translate: 108px 138px; animation: rstep 1s infinite ease-in; animation-delay: 0.45s; }
.legl  { translate: 92px 138px;  animation: lstep 1s infinite ease-in; }
#gnd   { translate: 100px 168px; opacity: 0.3; animation: scroll 1.4s infinite linear; }

@keyframes bob {
  0%   { transform: translateY(0) rotate(3deg); }
  5%   { transform: translateY(0) rotate(3deg); }
  25%  { transform: translateY(5px) rotate(0deg); }
  50%  { transform: translateY(0px) rotate(-3deg); }
  70%  { transform: translateY(5px) rotate(0deg); }
  100% { transform: translateY(0) rotate(3deg); }
}
@keyframes lstep {
  0%   { transform: translateY(0) rotate(-5deg); }
  33%  { transform: translateY(-15px) translate(32px) rotate(35deg); }
  66%  { transform: translateY(0) translate(25px) rotate(-25deg); }
  100% { transform: translateY(0) rotate(-5deg); }
}
@keyframes rstep {
  0%   { transform: translateY(0) translate(0px) rotate(-5deg); }
  33%  { transform: translateY(-10px) translate(30px) rotate(35deg); }
  66%  { transform: translateY(0) translate(20px) rotate(-25deg); }
  100% { transform: translateY(0) translate(0px) rotate(-5deg); }
}
@keyframes scroll {
  0%   { transform: translateY(25px) translate(50px); opacity: 0; }
  33%  { opacity: 0.25; }
  66%  { opacity: 0.25; }
  to   { transform: translateY(-50px) translate(-100px); opacity: 0; }
}

/* ===== 进入卡片外层容器：绝对居中，与小人重叠在同一点，转换时不跳层 ===== */
.enter-gate-wrap {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 6;                 /* 覆盖在小人之上，同层重叠、原地淡变 */
}

/* ===== 进入卡片（参考 Uiverse · witcher-card，改为亮白主题的“宝藏盒”） ===== */
.enter-gate {
  /* 卡片基准字号；尺寸用 em，改这里即可整体缩放 */
  font-size: 15px;
  position: relative;
  width: 15em;
  height: 21em;
  padding: 1.6em;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: none;                 /* 自定义光标下隐藏系统光标 */
  color: #33343a;
  background-color: #ffffff;
  border: 0.14em solid rgba(201, 169, 106, 0.85);   /* 金色描边 */
  overflow: hidden;
  /* 暖纸质感 + 极淡金纹 */
  background-image:
    radial-gradient(circle at 50% 30%, #fffdf7, #f6f3ec 75%),
    repeating-linear-gradient(45deg, rgba(201, 169, 106, 0.05) 0, rgba(201, 169, 106, 0.05) 2px, transparent 2px, transparent 4px);
  box-shadow: 0 1.4em 3.2em rgba(0, 0, 0, 0.14), 0 0 0 1px rgba(0, 0, 0, 0.03);
  /* 入场：从略小 + 透明浮起 */
  opacity: 0;
  visibility: hidden;
  transform: scale(0.82);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease),
    border-color 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.enter-gate.is-ready {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
}
/* 悬停：上浮 + 金色光晕 + 边框提亮 */
.enter-gate:hover {
  border-color: #c9a96a;
  transform: scale(1) translateY(-0.4em);
  box-shadow: 0 1.8em 3.6em rgba(0, 0, 0, 0.16), 0 0 1.6em rgba(201, 169, 106, 0.35);
}
/* “开箱”动画期间：冻结 CSS transition，交给 JS 逐帧控制，避免双重缓动卡顿 */
.enter-gate.is-opening,
.enter-gate.is-opening * {
  transition: none !important;
}

/* 中心魔法光晕（hover 显示） */
.enter-gate__aura {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 42%, rgba(201, 169, 106, 0.22) 0%, transparent 60%);
  opacity: 0;
  transition: opacity 0.5s var(--ease);
  pointer-events: none;
  z-index: 0;
}
.enter-gate:hover .enter-gate__aura { opacity: 1; }

/* 开箱瞬间的“闪光”（JS 控制，一闪而过） */
.enter-gate__flash {
  position: absolute;
  inset: -20%;
  background: radial-gradient(circle at 50% 50%, rgba(255, 250, 232, 0.95) 0%, transparent 62%);
  opacity: 0;
  pointer-events: none;
  z-index: 3;
}

/* 四角金色装饰（CSS 形状） */
.enter-gate__corner {
  position: absolute;
  width: 1.8em;
  height: 1.8em;
  border: 0.15em solid #c9a96a;
  opacity: 0.7;
  transition: all 0.4s var(--ease);
  z-index: 1;
}
.enter-gate__corner.top-left     { top: 0.6em;    left: 0.6em;    border-right: none; border-bottom: none; }
.enter-gate__corner.top-right    { top: 0.6em;    right: 0.6em;   border-left: none;  border-bottom: none; }
.enter-gate__corner.bottom-left  { bottom: 0.6em; left: 0.6em;    border-right: none; border-top: none; }
.enter-gate__corner.bottom-right { bottom: 0.6em; right: 0.6em;   border-left: none;  border-top: none; }
.enter-gate:hover .enter-gate__corner {
  width: 88%;
  height: 88%;
  opacity: 1;
  border-color: rgba(201, 169, 106, 0.35);
}
/* 内容区 */
.enter-gate__content {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.9em;
}
.enter-gate__title {
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.95em;
  color: #b5894a;
  border-bottom: 1px solid rgba(201, 169, 106, 0.5);
  padding-bottom: 0.5em;
  width: 100%;
  text-align: center;
  transition: color 0.3s;
}
.enter-gate:hover .enter-gate__title { color: #8f6a2e; }
.enter-gate__icon {
  width: 7.5em;
  height: 7.5em;
  color: #2c2c30;
  filter: drop-shadow(0 0.5em 1em rgba(0, 0, 0, 0.15));
  transition: transform 0.3s var(--ease), color 0.3s var(--ease);
}
.enter-gate__icon svg { width: 100%; height: 100%; }
.enter-gate:hover .enter-gate__icon { transform: scale(1.08); color: #000; }
.enter-gate__hint {
  margin-top: auto;
  font-size: 0.62em;
  letter-spacing: 0.28em;
  color: #9a9aa0;
  text-align: center;
}

/* 暗色模式下：卡片回到深色“宝藏盒”，金色描边保留 */
html[data-theme="dark"] .enter-gate {
  color: #d6d6dc;
  background-color: #1b1b21;
  border-color: #c9a96a;
  background-image:
    radial-gradient(circle at 50% 30%, #26262e, #1b1b21 75%),
    repeating-linear-gradient(45deg, rgba(0, 0, 0, 0.14) 0, rgba(0, 0, 0, 0.14) 2px, transparent 2px, transparent 4px);
}
html[data-theme="dark"] .enter-gate__title { color: #d9b97a; border-bottom-color: rgba(201, 169, 106, 0.5); }
html[data-theme="dark"] .enter-gate__icon { color: #e6e6ec; }
html[data-theme="dark"] .enter-gate__hint { color: #8a8a92; }
html[data-theme="dark"] .enter-gate:hover .enter-gate__title { color: #fff; }

/* ===== 开箱过渡的“画框描边”（参考 ScrollExpand 的画框扩展） ===== */
.expand-border {
  position: fixed;
  z-index: 110;                /* 在 loader 之上，扩展过程中始终可见 */
  border: 2px solid #c9a96a;   /* 金色描边 */
  border-radius: 24px;
  opacity: 0;
  pointer-events: none;
  box-shadow:
    0 0 0 1px rgba(201, 169, 106, 0.22),
    0 0 44px rgba(201, 169, 106, 0.22),
    inset 0 0 0 1px rgba(201, 169, 106, 0.18);
  will-change: left, top, width, height, border-radius, opacity;
}
/* 暗色模式下沿用偏暖的金色，与暗色宝藏盒协调 */
html[data-theme="dark"] .expand-border {
  border-color: #d9b97a;
  box-shadow:
    0 0 0 1px rgba(217, 185, 122, 0.22),
    0 0 44px rgba(217, 185, 122, 0.22);
}

/* 喇叭轻微呼吸，提前暗示“有声音” */
@keyframes speaker-pulse {
  0%, 100% { opacity: 0.5; }
  50%      { opacity: 1; }
}

/* =================================================================
   背景流动线条画布
================================================================= */
.lines-canvas {
  position: fixed;
  inset: 0;
  z-index: 0;              /* 在最底层，内容在上层 */
  width: 100%;
  height: 100%;
  pointer-events: none;    /* 不挡交互 */
}

/* =================================================================
   边角功能元素：静音开关
================================================================= */
.mute-toggle {
  position: fixed;
  top: 24px;
  right: 24px;
  left: auto;
  z-index: 50;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--text-dim);
  cursor: pointer;
  transition: transform 0.3s var(--ease), color 0.3s var(--ease),
    border-color 0.3s var(--ease);
}

/* 悬浮微交互：轻微放大 + 提亮 */
.mute-toggle:hover {
  transform: scale(1.12);
  color: var(--text);
  border-color: var(--line-strong);
}

/* 默认显示“开启”图标，关闭时切换 */
.mute-toggle .icon-sound-off { display: none; }
.mute-toggle.is-muted .icon-sound-on  { display: none; }
.mute-toggle.is-muted .icon-sound-off { display: block; }

/* =================================================================
   主内容 / 全屏单页纵轴布局
================================================================= */
.content {
  position: relative;
  z-index: 10;            /* 在背景线条之上 */
}

.screen {
  position: relative;
  min-height: 100vh;       /* 每屏占满视口高度 */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 12vh 8vw;
  text-align: center;      /* 绝对居中排版 */
}

.screen__inner {
  max-width: 880px;
}

/* ---------- 三级字号体系 ---------- */
.kicker {
  font-size: 0.8rem;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 1.6rem;
}

/* 超大号主标题（首屏） */
.title--huge {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: clamp(3rem, 11vw, 8.5rem);
  letter-spacing: -0.03em;
  line-height: 0.98;
  color: var(--text);
}

/* 品牌标题：图标 + 文字（首屏 ToolPort） */
.title--brand {
  display: inline-flex;
  align-items: center;
  gap: 0.32em;
}
.title--brand .brand-icon {
  width: 0.85em;
  height: 0.85em;
  flex-shrink: 0;
}

/* 大号标题（后续屏） */
.title--big {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 600;
  font-size: clamp(2.4rem, 8vw, 5.5rem);
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--text);
  margin-bottom: 1.4rem;
}

/* 中号副标题 */
.subtitle {
  font-size: clamp(1.05rem, 2.6vw, 1.7rem);
  font-weight: 300;
  color: var(--text-dim);
  margin-top: 1.4rem;
  line-height: 1.5;
}

/* 小号辅助文案 */
.aux {
  font-size: 0.8rem;
  letter-spacing: 0.35em;
  color: var(--text-faint);
  margin-top: 2.4rem;
}

/* 价值点列表 */
.points {
  list-style: none;
  margin-top: 3rem;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

.point {
  font-size: clamp(0.95rem, 2vw, 1.2rem);
  font-weight: 300;
  color: var(--text-dim);
  letter-spacing: 0.02em;
}

/* CTA 按钮 */
.cta {
  display: inline-block;
  margin-top: 3rem;
  padding: 16px 38px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  color: var(--text);
  text-decoration: none;
  font-size: 1rem;
  letter-spacing: 0.08em;
  background: transparent;
  /* 注意：transform 交给“磁吸”逻辑控制，这里只过渡颜色/边框 */
  transition: background 0.35s var(--ease), border-color 0.35s var(--ease),
    box-shadow 0.35s var(--ease);
}

/* 磁吸元素：transform 由原生 JS 控制（不再依赖 GSAP），这里过渡让它跟随/归位更柔和 */
.cta.magnetic {
  transition: transform 0.3s var(--ease), background 0.35s var(--ease),
    border-color 0.35s var(--ease), box-shadow 0.35s var(--ease);
}

.cta:hover {
  background: rgba(0, 0, 0, 0.04);
  border-color: var(--text);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.10);
}

/* =================================================================
   插件展示区（作品集）：3D 对折翻页卡片
   沿垂直中线（书脊）对称打开：
   - 封面（cover）沿右边书脊向左翻开
   - 内页（inner）沿左边书脊翻出（默认藏在卡片内）
   - 左上角白色折角（book-fold）作为翻折纸张的设计细节
================================================================= */
.screen--works {
  justify-content: flex-start;   /* 标题在上、卡片网格在下，不强制垂直居中 */
  height: auto;                  /* 内容多则自然增高，可滚动 */
  padding-top: 18vh;
  padding-bottom: 14vh;
  gap: 4.5rem;
}

.works-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 3rem 2.25rem;
  width: 100%;
  max-width: 1120px;
  justify-items: center;
}

/* ---- 书卡片（对折容器） ---- */
.book {
  position: relative;
  width: 210px;
  height: 280px;
  perspective: 1200px;
  border-radius: 14px;
  transition: transform 0.5s var(--ease);
  will-change: transform;
}
.book:hover {
  transform: rotateZ(-4deg);
  z-index: 20;                   /* 翻页时浮在相邻卡片之上 */
}

/* 已上线卡片：可点击跳转，给一个“可点”的手型与轻微上浮暗示 */
.book--link { cursor: pointer; }
.book--link:hover { transform: rotateZ(-4deg) translateY(-6px); }

/* 封面 & 内页：两张“纸”叠在一起，沿书脊对称翻折 */
.book .cover,
.book .inner {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 14px;
  backface-visibility: hidden;   /* 翻过 90° 后背面隐藏，避免回收穿帮 */
  transition: transform 0.75s var(--ease), box-shadow 0.5s var(--ease);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
  cursor: pointer;
}

/* 封面：默认面对观者，沿右边书脊（100% 50%）向左翻开 */
.book .cover {
  z-index: 2;
  transform-origin: 100% 50%;    /* 书脊在卡片垂直中线 = 封面右边缘 */
}
.book:hover .cover {
  transform: rotateY(-160deg);   /* 接近全翻，保留一点角度避免完全重叠 */
  box-shadow: 0 4px 28px rgba(0, 0, 0, 0.28);
}
/* 封面内容（媒体 + 折角）翻过 90° 后也隐藏，避免在左侧残留镜像紫色 / 白色三角 */
.book .cover-media,
.book .book-fold {
  backface-visibility: hidden;
}

/* 内页：默认藏在卡片内（rotateY 180°，正面朝内、背对观者），
   hover 时翻出到面对观者（rotateY 0deg）——绕左边书脊 */
.book .inner {
  z-index: 1;
  transform-origin: 0% 50%;      /* 书脊 = 内页左边缘 */
  transform: rotateY(180deg);
  background: var(--card-face);
}
.book:hover .inner {
  transform: rotateY(0deg);      /* 从背面翻到正面，完整露出内页 */
  box-shadow: 0 6px 28px rgba(0, 0, 0, 0.22);
}

/* ---- 折角：cover 左上角白色三角（截图 2 风格，模拟翻起的纸角） ---- */
.book .book-fold {
  position: absolute;
  top: 0;
  left: 0;
  width: 32px;
  height: 32px;
  background: var(--card-face);
  clip-path: polygon(0 0, 100% 0, 0 100%);
  z-index: 3;
  pointer-events: none;
  box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.18);
}

/* ---- 封面“截图/宣传图”（占位，渐变 + 图标 + 名称 + 标签） ---- */
.book .cover-media {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 1.1rem;
  color: #fff;
  background: linear-gradient(150deg, var(--g1), var(--g2));
  text-align: center;
}
.book .cover-icon {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 12px;
  /* 不用 backdrop-filter（毛玻璃）：它会在封面 3D 翻页时逐帧重算模糊，
     与自定义光标抢合成，是 hover 卡顿的主因；纯半透明背景视觉几乎无差 */
}
.book .cover-icon svg { width: 26px; height: 26px; }
.book .cover-icon.large {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: var(--bg-soft);
  border-color: var(--line);
  backdrop-filter: none;
  color: var(--text);
}
.book .cover-icon.large svg { width: 32px; height: 32px; }
.book .cover-name {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.2;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.25);
}
.book .cover-tag {
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
}
/* 状态标记：已上线（亮绿）/ 即将上线（灰白） */
.book .cover-tag--live { color: #7cfc9c; }
.book .cover-tag--soon { color: rgba(255, 255, 255, 0.7); }

/* ---- 内页内容（hover 翻出后展示） ---- */
.book .inner-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 1.2rem;
  text-align: center;
}
.book .text {
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text);
}
.book .inner-desc {
  font-size: 0.72rem;
  line-height: 1.55;
  color: var(--text-dim);
}
.book .inner-content .cover-tag {
  color: var(--text-faint);
  text-shadow: none;
}

/* ---------- 向下箭头：循环上下浮动的呼吸动效 ---------- */
.scroll-arrow {
  position: absolute;
  bottom: 36px;
  left: 50%;
  transform: translateX(-50%);
  background: transparent;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  animation: arrow-float 2.2s ease-in-out infinite;
  transition: color 0.3s var(--ease);
}

.scroll-arrow:hover {
  color: var(--text);
}

@keyframes arrow-float {
  0%, 100% { transform: translate(-50%, 0); }
  50%      { transform: translate(-50%, 12px); }
}

/* =================================================================
   自定义光标（参考 agency labs 站的 signature 交互）
================================================================= */
.cursor-dot,
.cursor-ring {
  position: fixed;
  top: 0;
  left: 0;
  border-radius: 50%;
  pointer-events: none;   /* 不挡任何点击 */
  z-index: 200;           /* 悬浮在所有内容之上 */
  /* 无 GSAP 时的居中回退；GSAP 会改用 xPercent/yPercent 控制 */
  transform: translate(-50%, -50%);
  will-change: transform;
}

/* 实心小圆点：紧跟鼠标 */
.cursor-dot {
  width: 7px;
  height: 7px;
  background: var(--text);
  transition: width 0.18s var(--ease), height 0.18s var(--ease),
    background 0.18s var(--ease);
}

/* 空心圆环：放大改用尺寸变化（配合 JS 每帧写入的 translate(-50%,-50%)，从中心向外扩展），
   这样不会和 JS 控制的 transform 冲突，也不再依赖 GSAP */
.cursor-ring {
  width: 38px;
  height: 38px;
  border: 1px solid rgba(0, 0, 0, 0.4);
  transition: width 0.25s var(--ease), height 0.25s var(--ease),
    border-color 0.25s var(--ease), background 0.25s var(--ease);
}

/* 悬停到可交互元素时：圆环放大 + 提亮（放大由尺寸变化实现，不依赖 JS transform） */
.cursor-ring.is-hover {
  width: 62px;
  height: 62px;
  border-color: var(--text);
  background: rgba(0, 0, 0, 0.05);
}

/* 点击（按下）反馈：圆环收缩 + 圆点放大，松开即恢复 */
.cursor-ring.is-down {
  width: 26px;
  height: 26px;
  background: rgba(0, 0, 0, 0.10);
}
.cursor-dot.is-down {
  width: 11px;
  height: 11px;
}

/* 触屏设备：隐藏自定义光标，恢复系统默认 */
@media (pointer: coarse) {
  .cursor-dot, .cursor-ring { display: none; }
  html, body { cursor: auto; }
}

/* 精确指针设备（鼠标）：彻底隐藏系统光标（含点击/悬停任何元素时），
   完全交给自定义光标，不再出现微软默认箭头/手型 */
@media (pointer: fine) {
  html, body { cursor: none; }
  * { cursor: none !important; }
}

/* =================================================================
   胶片颗粒质感叠层
================================================================= */
.grain {
  position: fixed;
  inset: 0;
  z-index: 150;            /* 在内容之上、光标之下 */
  pointer-events: none;
  opacity: 0.05;           /* 极淡，只添纹理不抢戏 */
  mix-blend-mode: multiply; /* 白底上用 multiply，让细颗粒以浅灰点叠加可见 */
  /* 用 SVG 噪声生成纹理，无需图片文件 */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
}

/* =================================================================
   跑马灯文字带
================================================================= */
.marquee {
  position: relative;
  z-index: 10;
  overflow: hidden;
  padding: 7vh 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}

.marquee__track {
  display: inline-flex;
  align-items: center;
  gap: 2.5rem;
  /* 整体向左滚动，平移自身宽度的一半即可无缝衔接（内容已重复一遍） */
  animation: marquee-scroll 22s linear infinite;
}

.marquee__item {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 600;
  font-size: clamp(1.8rem, 5vw, 3.6rem);
  letter-spacing: 0.02em;
  color: var(--text);
  text-transform: uppercase;
}

/* 镂空描边样式：部分词只描边不填充，加强设计对比 */
.marquee__item--outline {
  color: transparent;
  -webkit-text-stroke: 1px rgba(0, 0, 0, 0.4);
}

@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.marquee:hover .marquee__track {
  animation-play-state: paused; /* 悬停暂停，便于细看 */
}

/* =================================================================
   入场动效：淡入 + 轻微上移
   - 初始隐藏状态（避免 GSAP 加载前的内容闪烁）
   - 真正的动画交给 GSAP（含 stagger / ScrollTrigger）
   注意：这里【不要】写 transition —— 否则会和 GSAP 的逐帧内联样式
   叠加成双重缓动、产生明显卡顿。过渡只在无 GSAP 回退时由 JS 兜底。
================================================================= */
.reveal,
.reveal-item {
  opacity: 0;
  transform: translateY(28px);
}

/* 无 GSAP（CDN 加载失败）时：直接显示全部内容，不做动画 */
.no-gsap .reveal,
.no-gsap .reveal-item {
  opacity: 1;
  transform: none;
}

/* 尊重“减少动效”的系统偏好（无障碍）：直接显示 */
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-item { opacity: 1; transform: none; }
  .scroll-arrow, .icon-speaker { animation: none; }
  html { scroll-behavior: auto; }
}

/* =================================================================
   暗色模式切换卡片（参考 Uiverse · witer33 的手机暗色开关）
   全部作用域限制在 .theme-card 内，避免与站点其它类名冲突
================================================================= */
.theme-card {
  position: fixed;
  top: 18px;
  left: 18px;
  z-index: 60;                 /* 在内容之上、光标之下 */
  transform: scale(0.34);      /* 缩小成角落小控件 */
  transform-origin: top left;
  cursor: default;
  user-select: none;
}
.theme-card input[type="checkbox"] { display: none; }

/* App 容器：作为内部绝对定位元素的参照 */
.theme-card .app {
  position: relative;
  width: 18rem;
  height: 17rem;
}

/* 背后大光晕圆（用户要求去掉） */
.theme-card .main-circle { display: none; }

/* 手机外框 */
.theme-card .phone {
  position: relative;
  z-index: 2;
  width: 18rem;
  height: 17rem;
  background-color: #ffffff;
  transition: background-color 0.6s;
  box-shadow: 0 4px 35px rgba(0, 0, 0, 0.1);
  border-radius: 40px;
  display: flex;
  flex-direction: column;
}

/* 顶部状态栏 */
.theme-card .menu {
  font-size: 80%;
  opacity: 0.4;
  padding: 0.8rem 1.8rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.theme-card .icons { display: flex; margin-top: 0.5rem; }
.theme-card .battery {
  width: 0.85rem;
  height: 0.45rem;
  background-color: black;
  transition: background-color 0.6s;
}
.theme-card .network {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 6.8px 7.2px 6.8px;
  border-color: transparent transparent black transparent;
  transform: rotate(135deg);
  margin: 0.12rem 0.5rem;
  transition: border-color 0.6s;
}

/* 中部：太阳/月亮圆作为开关 */
.theme-card .content {
  display: flex;
  flex-direction: column;
  margin: auto;
  text-align: center;
  width: 70%;
  transform: translateY(5%);
}
.theme-card .circle {
  position: relative;
  border-radius: 100%;
  width: 8rem;
  height: 8rem;
  background: linear-gradient(40deg, #ff0080, #ff8c00, #e8e8e8, #8983f7, #a3dafb 80%);
  background-size: 400%;
  transition: background-position 0.6s, transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
  margin: auto;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.theme-card .circle:hover {
  transform: scale(1.04);
  box-shadow: 0 8px 30px rgba(255, 140, 0, 0.25);
}
.theme-card .crescent {
  position: absolute;
  border-radius: 100%;
  right: 0;
  width: 6rem;
  height: 6rem;
  background: #e8e8e8;
  transform: scale(0);
  transform-origin: top right;
  transition: transform 0.6s cubic-bezier(0.645, 0.045, 0.355, 1), background-color 0.6s;
}
.theme-card .time { color: black; transition: color 0.6s; }

/* ---- 勾选（暗色）状态：卡片内部预览同步变暗 ---- */
.theme-card input[type="checkbox"]:checked ~ .app .phone { background-color: #26242e; color: white; }
.theme-card input[type="checkbox"]:checked ~ .app .crescent { transform: scale(1); background: #26242e; }
.theme-card input[type="checkbox"]:checked ~ .app .circle { background-position: 100% 100%; }
.theme-card input[type="checkbox"]:checked ~ .app .circle:hover { box-shadow: 0 8px 30px rgba(137, 131, 247, 0.35); }
.theme-card input[type="checkbox"]:checked ~ .app .time { color: white; }
.theme-card input[type="checkbox"]:checked ~ .app .network { border-color: transparent transparent white transparent; }
.theme-card input[type="checkbox"]:checked ~ .app .battery { background-color: white; }

/* =================================================================
   全局深色护眼模式（卡片勾选 → <html data-theme="dark">）
   覆盖主题变量 + 少数写死深色/浅色的元素
================================================================= */
html[data-theme="dark"] {
  --bg: #0e0e11;            /* 护眼深灰，比纯黑柔和、不刺眼 */
  --bg-soft: #15151a;
  --text: #e9e9ec;          /* 主文字：浅灰白 */
  --text-dim: #9a9aa2;      /* 次级文字 */
  --text-faint: #5a5a63;    /* 最弱文字 */
  --line: rgba(255, 255, 255, 0.10);
  --line-strong: rgba(255, 255, 255, 0.22);
  --card-bg: #1b1b21;        /* 暗色下书壳更深 */
  --card-face: #232329;      /* 暗色下内页深灰 */
}
/* 颗粒层：白底用 multiply，暗底改回 overlay 才可见 */
html[data-theme="dark"] .grain { mix-blend-mode: overlay; }
/* 光标圆环：亮底用深边，暗底用浅边 */
html[data-theme="dark"] .cursor-ring { border-color: rgba(255, 255, 255, 0.4); }
html[data-theme="dark"] .cursor-ring.is-hover { background: rgba(255, 255, 255, 0.06); }
html[data-theme="dark"] .cursor-ring.is-down { background: rgba(255, 255, 255, 0.10); }
/* CTA 悬浮：亮底深色阴影，暗底浅色光晕 */
html[data-theme="dark"] .cta:hover {
  background: rgba(255, 255, 255, 0.06);
  box-shadow: 0 0 30px rgba(255, 255, 255, 0.08);
}
/* 进入卡片：暗色模式下底色已提亮（见 .enter-gate 块），此处无需额外 hover 背景 */
/* 跑马灯镂空描边：亮底黑描边，暗底白描边 */
html[data-theme="dark"] .marquee__item--outline { -webkit-text-stroke: 1px rgba(255, 255, 255, 0.55); }

/* =================================================================
   备案号页脚（ICP + 公安）—— 固定贴在视口底部（短页面也始终贴底）
   main 用 padding-bottom:56px 给 fixed footer 留位防遮挡
================================================================= */
.site-footer {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 40;
  background: var(--bg);
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  padding: 10px 16px;
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--text-faint);
  text-align: center;
}
.site-footer a {
  color: var(--text-faint);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  transition: color 0.2s var(--ease);
}
.site-footer a:hover { color: var(--text); }
.site-footer .sep { color: var(--line-strong); }
.site-footer .beian-icon { width: 14px; height: 14px; margin-right: 4px; }