/* ============================================================================
   lab.css —— 「实验室」页（复刻参考站的沉浸式粒子 + 环形大字）
   这份样式完全自成一套，不引用 style.css，也不依赖站点主题令牌：
   它是一张独立的海报式页面，进去以后是另一个世界。
   ⚠ 所有选择器都限定在 body.lab 下，避免污染站点其它页面。
   ========================================================================= */

body.lab {
  margin: 0;
  background: #07050c;
  color: #fff;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, "Helvetica Neue",
               Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  overflow: hidden;
  height: 100vh;
  height: 100svh;
  -webkit-font-smoothing: antialiased;
}

/* ---------------------------------------------------------------- 背景
   分两层，是性能上的关键：
   · #lab-scene 烤制层：整片森林一次性画好，之后**永不重绘**。浏览器会把它当成
     一张纹理缓存起来，所以它再密也不花每帧的钱。
   · #lab-motes 浮尘层：透明画布，每帧只叠一千多个小光点（additive）。
   漂移和鼠标视差作用在 .lab-bg 这个外层上，交给合成器，JS 只是改一个 transform。 */
body.lab .lab-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  will-change: transform;
}
body.lab .lab-bg canvas {
  position: absolute;
  /* 出血：给漂移/视差留出余量，边缘不会露白（数值要和 JS 里的 BLEED 对齐） */
  left: -56px;
  top: -34px;
  width: calc(100% + 112px);
  height: calc(100% + 68px);
  display: block;
}
body.lab #lab-scene { z-index: 0; }
body.lab #lab-motes { z-index: 1; }
/* 颗粒噪点：内联 SVG feTurbulence，叠在画面最上层，给粒子"胶片感" */
body.lab .lab-grain {
  position: fixed;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  opacity: .085;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* 暗角：把视线压回中间 */
body.lab .lab-vignette {
  position: fixed;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background:
    radial-gradient(115% 78% at 50% 44%, rgba(0, 0, 0, 0) 42%, rgba(3, 4, 10, .58) 100%),
    linear-gradient(to bottom, rgba(4, 3, 10, .5) 0%, rgba(0, 0, 0, 0) 22%, rgba(0, 0, 0, 0) 72%, rgba(3, 6, 5, .55) 100%);
}
/* 地平线附近那道光带（很淡的一横条） */
body.lab .lab-glowline {
  position: fixed;
  left: 0; right: 0; top: 57%;
  height: 26vh;
  z-index: 2;
  pointer-events: none;
  background: radial-gradient(70% 100% at 50% 50%, rgba(226, 200, 224, .16), rgba(0, 0, 0, 0) 70%);
}

/* ---------------------------------------------------------------- 顶栏 */
body.lab .lab-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 20px 28px;
  font-size: 12.5px;
  letter-spacing: .02em;
}
body.lab .lab-brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: #fff;
  text-decoration: none;
  opacity: .86;
}
body.lab .lab-brand:hover { opacity: 1; }
body.lab .lab-brand b { font-weight: 500; }
body.lab .lab-dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 12px 2px rgba(255, 255, 255, .65);
}
body.lab .lab-slash { opacity: .38; }
body.lab .lab-dim { opacity: .62; }
body.lab .lab-nav-r { display: inline-flex; align-items: center; gap: 20px; }
body.lab .lab-ghost {
  color: #fff;
  text-decoration: none;
  opacity: .66;
}
body.lab .lab-ghost:hover { opacity: 1; }
body.lab .lab-btn {
  display: inline-block;
  padding: 7px 15px;
  border-radius: 999px;
  background: #fff;
  color: #111;
  text-decoration: none;
  font-weight: 500;
  transition: transform .18s ease, box-shadow .18s ease;
  box-shadow: 0 0 0 rgba(255, 255, 255, 0);
}
body.lab .lab-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 22px -6px rgba(255, 255, 255, .55);
}

/* ---------------------------------------------------------------- 字环
   每个字：绕圆心的角度 --a（0deg = 正上方），再向外推出半径 --r。
   所以字本身也跟着转：上半圈正读，下半圈自然倒过来 —— 这就是参考站
   "镜像倒影"的来路，不需要额外做 scaleY(-1)。 */
body.lab .lab-stage {
  position: fixed;
  inset: 0;
  z-index: 5;
  display: grid;
  place-items: center;
  pointer-events: none;
}
/* 字环背后压一层柔和的暗晕：白字压在亮粉天上就看不清，垫一下对比度 */
body.lab .lab-stage::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(130vw, 1600px);
  height: min(62vh, 660px);
  transform: translate(-50%, -62%);
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(22, 13, 28, .46), rgba(22, 13, 28, 0));
  filter: blur(16px);
}
/* 大字：主字 + 两份镜像。这才是「倒影」—— scaleY(-1) 沿水平轴翻转，
   再用遮罩往下渐隐、加一点模糊；左右各倾一点，合起来是一个曲面镜的印象。 */
body.lab .lab-word-wrap {
  --fs: clamp(50px, 12.2vw, 186px);
  position: relative;
  width: min(94vw, 1400px);
  animation: lab-rock 26s ease-in-out infinite;
}
body.lab .lab-word {
  position: relative;
  height: calc(var(--fs) * 2.05);   /* 给下方的镜像留位置 */
}
/* 主字背后一团柔光：像雾里透出来的光，让字不那么"贴"在画面上 */
body.lab .lab-word-wrap::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 38%;
  width: 122%;
  height: 64%;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(255, 242, 252, .17), rgba(255, 242, 252, 0));
  filter: blur(22px);
  pointer-events: none;
}
@keyframes lab-rock {
  0%, 100% { transform: translateY(12.2vh) rotate(-1.1deg); }
  50%      { transform: translateY(12.9vh) rotate(1.1deg); }
}
body.lab .lab-w {
  position: absolute;
  left: 50%;
  top: 0;
  font-size: var(--fs);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -.035em;
  color: #fff;
  white-space: nowrap;
  text-shadow:
    0 0 22px rgba(255, 255, 255, .34),
    0 0 64px rgba(255, 246, 252, .2),
    0 0 150px rgba(255, 235, 250, .12);
  transform: translateX(-50%) rotate(-3.4deg);
  will-change: transform;
}
/* 镜像：沿水平轴翻转，纵向渐隐 + 横向水波条纹（两层遮罩取交集）——
   不平的"水面"把字切成一条条，才像倒影；再压暗一点，和主字拉开主次。
   top 是关键：主字下沿离水线约 26px，镜像就该从「水线 + 26px」开始 ——
   这就是关于水线的对称（2×水线 − 主字下沿），不是随便往下挪一份。 */
body.lab .lab-w-refl {
  top: calc(var(--fs) * 1.42);
  filter: blur(.9px) brightness(.92) saturate(.88);
  -webkit-mask-image:
    linear-gradient(to bottom, rgba(0, 0, 0, .95) 2%, rgba(0, 0, 0, 0) 84%),
    repeating-linear-gradient(to bottom, rgba(0, 0, 0, 1) 0 6px, rgba(0, 0, 0, .34) 6px 10px,
                                                  rgba(0, 0, 0, 1) 10px 16px);
          mask-image:
    linear-gradient(to bottom, rgba(0, 0, 0, .95) 2%, rgba(0, 0, 0, 0) 84%),
    repeating-linear-gradient(to bottom, rgba(0, 0, 0, 1) 0 6px, rgba(0, 0, 0, .34) 6px 10px,
                                                  rgba(0, 0, 0, 1) 10px 16px);
  -webkit-mask-composite: source-in;
          mask-composite: intersect;
  animation: lab-ripple 5.2s linear infinite;
}
@keyframes lab-ripple {
  from { -webkit-mask-position: 0 0, 0 0; mask-position: 0 0, 0 0; }
  to   { -webkit-mask-position: 0 0, 0 -16px; mask-position: 0 0, 0 -16px; }
}
body.lab .lab-w-a { transform: translateX(-50%) scaleY(-1) rotate(-3.6deg); opacity: .72; }
body.lab .lab-w-b {
  transform: translateX(-50%) scaleY(-1) rotate(2.4deg) translateY(-9%) translateX(2%);
  opacity: .3;
  filter: blur(3px) brightness(.85);
}
/* ---------------------------------------------------------------- 底部 */
body.lab .lab-foot {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 6;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  padding: 26px 28px 30px;
  font-size: 12.8px;
  line-height: 1.62;
}
body.lab .lab-note {
  margin: 0;
  max-width: 34ch;
  opacity: .86;
}
body.lab .lab-note b { font-weight: 500; }
body.lab .lab-note i { font-style: italic; opacity: .82; }
body.lab .lab-links {
  display: flex;
  gap: 56px;
}
body.lab .lab-links ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
body.lab .lab-links a {
  color: #fff;
  text-decoration: none;
  opacity: .7;
}
body.lab .lab-links a:hover { opacity: 1; }

/* ---------------------------------------------------------------- 响应式 */
@media (max-width: 860px) {
  body.lab .lab-nav { padding: 16px 18px; }
  body.lab .lab-tag, body.lab .lab-ghost { display: none; }
  body.lab .lab-word-wrap { --fs: clamp(44px, 19vw, 118px); }
  body.lab .lab-foot {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding: 18px 18px 22px;
    font-size: 12.2px;
  }
  body.lab .lab-links { gap: 30px; flex-wrap: wrap; }
  body.lab .lab-note { max-width: none; }
}
@media (max-height: 560px) {
  body.lab .lab-word-wrap { --fs: clamp(42px, 10vw, 108px); }
}

/* 尊重系统「减少动态效果」：字环停转，背景由 JS 画一帧静态图 */
@media (prefers-reduced-motion: reduce) {
  body.lab .lab-word-wrap { animation: none; transform: translateY(6vh); }
}