/* ============================================================
   N — 开屏（V12 · 电影感入场）
   记忆点：字标被一笔一笔画出来，随后一束光自下而上掠过并留在字上
   原则：不用粒子、不用随机发光、不用环绕光轨
        层次靠三层静态光晕 + 顶部压暗 + 一次极轻推镜
        全程只有 transform / opacity，可走合成层
        褪场背景与首页同色，不闪白；尊重 reduce-motion
   ============================================================ */

#n-splash-root {
  --ns-text: #f4efe9;
  --ns-sub: #a69c92;
  --ns-muted: #7e756c;
  --ns-accent: #e8943f;
  --ns-core: #ffefdc;
  --ns-glow: 255, 196, 140;
  --ns-h: clamp(76px, 15vh, 122px);
  --ns-stem: calc(var(--ns-h) * 0.17);
  --ns-mark-w: calc(var(--ns-h) * 0.6);
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg, #07090e);
  opacity: 1;
  contain: layout style;
  font-family: system-ui, -apple-system, 'PingFang SC', 'Noto Sans SC', sans-serif;
}

#n-splash-root.ns12-out {
  opacity: 0;
  transition: opacity 300ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* 第一层：静态光晕，三层同心叠加形成柔和衰减 */
.ns12-halo {
  position: absolute;
  border-radius: 50%;
  background: rgba(var(--ns-glow), 1);
  pointer-events: none;
  opacity: 0;
  animation: ns12-halo-in 520ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
.ns12-halo.h1 { --ns-o: 0.1; width: calc(var(--ns-h) * 3.4); height: calc(var(--ns-h) * 3.4); }
.ns12-halo.h2 { --ns-o: 0.13; width: calc(var(--ns-h) * 2.3); height: calc(var(--ns-h) * 2.3); }
.ns12-halo.h3 { --ns-o: 0.18; width: calc(var(--ns-h) * 1.5); height: calc(var(--ns-h) * 1.5); }
@keyframes ns12-halo-in {
  from { opacity: 0; }
  to { opacity: var(--ns-o); }
}

/* 顶部压暗，给空间一点纵深，避免纯平底 */
.ns12-vignette {
  position: absolute;
  inset: 0 0 auto 0;
  height: 44%;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0));
  pointer-events: none;
  opacity: 0;
  animation: ns12-fade-in 420ms ease-out both;
}
@keyframes ns12-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* 第二层：字形与铭牌，整组一次极轻推镜收束画面 */
.ns12-lockup {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: ns12-settle 420ms 660ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes ns12-settle {
  from { transform: scale(0.988); }
  to { transform: scale(1); }
}

.ns12-mark {
  position: relative;
  width: var(--ns-mark-w);
  height: var(--ns-h);
  overflow: hidden;
}

.ns12-stroke {
  position: absolute;
  background: var(--ns-text);
  border-radius: calc(var(--ns-stem) * 0.2);
}
.ns12-stem-l {
  left: 0;
  bottom: 0;
  width: var(--ns-stem);
  height: var(--ns-h);
  transform-origin: 50% 100%;
  transform: scaleY(0);
  animation: ns12-scale-y 250ms 40ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
.ns12-stem-r {
  right: 0;
  top: 0;
  width: var(--ns-stem);
  height: var(--ns-h);
  transform-origin: 50% 0%;
  transform: scaleY(0);
  animation: ns12-scale-y 250ms 100ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
.ns12-diag {
  left: 50%;
  top: 50%;
  width: calc(var(--ns-h) * 1.1662);
  height: var(--ns-stem);
  margin-left: calc(var(--ns-h) * -0.5831);
  margin-top: calc(var(--ns-stem) / -2);
  border-radius: 999px;
  transform-origin: 0% 50%;
  transform: rotate(59.04deg) scaleX(0);
  animation: ns12-diag 280ms 180ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes ns12-scale-y {
  from { transform: scaleY(0); }
  to { transform: scaleY(1); }
}
@keyframes ns12-diag {
  from { transform: rotate(59.04deg) scaleX(0); }
  to { transform: rotate(59.04deg) scaleX(1); }
}

/* 光带被裁剪在字形框内，读作光掠过字形，而不是画面里一条横线 */
.ns12-beam {
  position: absolute;
  left: calc(var(--ns-mark-w) * -0.35);
  top: 50%;
  width: calc(var(--ns-h) * 1.02);
  height: 2.5px;
  margin-top: -1.25px;
  border-radius: 2px;
  background: var(--ns-core);
  pointer-events: none;
  opacity: 0;
  animation: ns12-beam 300ms 500ms cubic-bezier(0.4, 0, 0.2, 1) both;
}
.ns12-beam-soft {
  height: 13px;
  margin-top: -6.5px;
  background: rgba(var(--ns-glow), 0.55);
  animation-name: ns12-beam-soft;
}
@keyframes ns12-beam {
  0% { opacity: 0; transform: translateY(calc(var(--ns-h) * 0.62)); }
  35% { opacity: 0.9; }
  80% { opacity: 0.4; }
  100% { opacity: 0; transform: translateY(calc(var(--ns-h) * -0.62)); }
}
@keyframes ns12-beam-soft {
  0% { opacity: 0; transform: translateY(calc(var(--ns-h) * 0.62)); }
  45% { opacity: 0.3; }
  100% { opacity: 0; transform: translateY(calc(var(--ns-h) * -0.62)); }
}

/* 落款分隔线：从中心展开，给出稳定的品牌结构而非装饰 */
.ns12-rule {
  width: 42px;
  height: 1.5px;
  margin-top: 28px;
  border-radius: 1px;
  background: var(--ns-accent);
  opacity: 0;
  transform: scaleX(0);
  animation: ns12-rule 180ms 600ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes ns12-rule {
  from { opacity: 0; transform: scaleX(0); }
  to { opacity: 0.9; transform: scaleX(1); }
}

.ns12-word {
  display: flex;
  align-items: baseline;
  margin-top: 16px;
  opacity: 0;
  animation: ns12-word-in 220ms 660ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
.ns12-word-n {
  color: var(--ns-text);
  font-size: 22px;
  line-height: 27px;
  font-weight: 800;
  letter-spacing: 3px;
  margin-right: 9px;
}
.ns12-word-caps {
  color: var(--ns-sub);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 10.5px;
  line-height: 14px;
  font-weight: 700;
  letter-spacing: 2.6px;
  margin-left: -9px;
}
@keyframes ns12-word-in {
  from { opacity: 0; transform: translateY(2px); }
  to { opacity: 1; transform: translateY(0); }
}

.ns12-tag {
  margin-top: 8px;
  color: var(--ns-muted);
  font-size: 11.5px;
  line-height: 16px;
  font-weight: 500;
  letter-spacing: 1px;
  opacity: 0;
  animation: ns12-tag-in 180ms 780ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes ns12-tag-in {
  from { opacity: 0; transform: translateY(7px); }
  to { opacity: 1; transform: translateY(0); }
}

/* 跳过：始终可见可点，保证不阻塞 */
.ns12-skip {
  position: absolute;
  right: 20px;
  bottom: 34px;
  padding: 9px 16px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
  color: var(--ns-muted);
  font-size: 11.5px;
  line-height: 1;
  font-weight: 600;
  letter-spacing: 0.6px;
  cursor: pointer;
  opacity: 0;
  animation: ns12-fade-in 240ms 260ms ease-out both;
  -webkit-tap-highlight-color: transparent;
}
.ns12-skip:hover { border-color: rgba(255, 255, 255, 0.2); color: var(--ns-sub); }

/* 减少动态效果：只留一次淡入淡出，不做位移与扫光 */
@media (prefers-reduced-motion: reduce) {
  .ns12-halo,
  .ns12-vignette,
  .ns12-lockup,
  .ns12-stroke,
  .ns12-diag,
  .ns12-beam,
  .ns12-rule,
  .ns12-word,
  .ns12-tag,
  .ns12-skip {
    animation: none !important;
  }
  .ns12-halo.h1 { opacity: 0.1; }
  .ns12-halo.h2 { opacity: 0.13; }
  .ns12-halo.h3 { opacity: 0.18; }
  .ns12-vignette,
  .ns12-word,
  .ns12-tag,
  .ns12-skip { opacity: 1; }
  .ns12-beam { display: none; }
  .ns12-stem-l,
  .ns12-stem-r { transform: scaleY(1); }
  .ns12-diag { transform: rotate(59.04deg) scaleX(1); }
  .ns12-lockup { transform: none; }
  .ns12-rule { opacity: 0.9; transform: scaleX(1); }
  #n-splash-root.ns12-out { transition-duration: 150ms; }
}

/* 主题适配：app.js 把 light / contrast 类挂在 documentElement 上，
   开屏配色必须同步替换，否则浅色主题下字标会与底色同色而不可见 */
.light #n-splash-root {
  --ns-text: #161c26;
  --ns-sub: #37404e;
  --ns-muted: #67707f;
  --ns-accent: #c46a1e;
  --ns-core: #c46a1e;
  --ns-glow: 196, 106, 30;
}
.light #n-splash-root .ns12-vignette {
  background: linear-gradient(180deg, rgba(16, 20, 29, 0.07), rgba(16, 20, 29, 0));
}
.light #n-splash-root .ns12-skip {
  border-color: rgba(16, 20, 29, 0.12);
  background: rgba(255, 255, 255, 0.72);
}
.light #n-splash-root .ns12-skip:hover {
  border-color: rgba(16, 20, 29, 0.24);
}

.contrast #n-splash-root {
  --ns-text: #ffffff;
  --ns-sub: #e6e6e6;
  --ns-muted: #d0d0d0;
  --ns-accent: #ffe600;
  --ns-core: #ffffff;
  --ns-glow: 255, 230, 0;
}
.contrast #n-splash-root .ns12-beam-soft {
  background: rgba(255, 230, 0, 0.5);
}