/* 优雅开场动画 · 2.60s · 配色与结构照搬 intro-elegant.html 源文件 */

.sbc-intro {
  --sbc-ink: #16161a;                    /* 文字 */
  --sbc-paper: #fbfaf7;                  /* 背景，带一点暖调的白 */
  --sbc-dim: rgba(22, 22, 26, 0.66);     /* 够到 4.5:1，小字也能看清 */
  --sbc-hair: rgba(22, 22, 26, 0.16);
  --sbc-accent: #a8873f;                 /* 白底上加深的金，保证对比度 */
}

/* 开场期间锁滚动。overflow 加在 html 和 body 两处，兼容不同浏览器的滚动容器。
   单独用 sbc-intro-lock 管滚动：pending 类要在薄纱开始上抹时就摘掉（好让首屏
   淡入），但滚动要锁到动画真正结束，两件事时机不同，不能共用一个类 */
html.sbc-intro-pending,
html.sbc-intro-pending body,
html.sbc-intro-lock,
html.sbc-intro-lock body {
  overflow: hidden !important;
}

/* 脚本是 defer 的，执行前页面已经解析完。这一层把站点内容压住，
   避免开场动画挂上来之前闪一下真实页面。用 paper 色而不是纯白，
   和 .sbc-intro__veil 同色，薄纱抹开时不会露出色差 */
html.sbc-intro-pending body::before {
  position: fixed;
  z-index: 9998;
  inset: 0;
  background: #fbfaf7;
  content: "";
}

/* ---------- 开场舞台 ---------- */
/* 注意：这里不铺底色。全屏遮挡由 .sbc-intro__veil 独自负责，
   否则薄纱的上抹和首屏的淡入都会被这一层挡住。 */
.sbc-intro {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  color: var(--sbc-ink);
}

/* 收尾的一层薄纱，向上抹开露出内容。也是开场期间唯一的不透明遮挡层。
   absolute + inset:0 让它脱离 grid 流铺满整层，而不是被 place-items 居中 */
.sbc-intro__veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--sbc-paper);
}

/* 字标层压在薄纱之上：薄纱上抹时字标早已淡出，两者不会互相遮挡 */
.sbc-intro__stage {
  position: relative;
  z-index: 2;
  padding: 0 6vw;
  text-align: center;
}

/* 中轴细线：从中心向上下展开。
   用 top 算出的垂直居中，不要用 translateY(-50%)：
   GSAP 做 scaleY 时会把百分比位移烘成固定像素，改窗口尺寸会偏 */
.sbc-intro__axis {
  position: absolute;
  left: 50%;
  top: calc(50% - 23vh);
  width: 1px;
  height: 46vh;
  margin-left: -0.5px;
  background: linear-gradient(180deg, transparent, var(--sbc-hair) 18%, var(--sbc-hair) 82%, transparent);
  transform: scaleY(0);
}

/* 字标：每个字在遮罩里升起。中文用 gap 控字距，比 letter-spacing 更好居中 */
.sbc-intro__wordmark {
  display: flex;
  justify-content: center;
  gap: clamp(10px, 2.2vw, 26px);
  font-family: "Songti SC", "STSong", "Source Han Serif SC", "Noto Serif SC", "Palatino Linotype", Georgia, serif;
  font-size: clamp(40px, 10vw, 112px);
  font-weight: 400;
  line-height: 1.08;
}

/* padding 给 blur 的光晕留出溢出空间，用 margin 反向抵消掉占位。
   这样字在升起时，光边不会被 overflow 切出一道硬边 */
.sbc-intro__mask {
  display: inline-block;
  overflow: hidden;
  padding: 0.2em 0.2em 0.12em;
  margin: -0.2em -0.2em -0.12em;
}

.sbc-intro__mask > span {
  display: inline-block;
}

/* 字标下方的横线 */
.sbc-intro__rule {
  position: relative;
  overflow: hidden;
  width: min(48vw, 420px);
  height: 1px;
  margin: clamp(16px, 3vh, 30px) auto 0;
  background: linear-gradient(90deg, transparent, var(--sbc-hair) 12%, var(--sbc-accent) 50%, var(--sbc-hair) 88%, transparent);
  transform: scaleX(0);
}

html.sbc-intro-waiting .sbc-intro__rule::after {
  position: absolute;
  inset: 0;
  width: 34%;
  background: linear-gradient(90deg, transparent, rgba(168, 135, 63, 0.72), transparent);
  content: "";
  animation: sbcIntroLoadingSweep 1.25s ease-in-out infinite;
}

html.sbc-intro-waiting .sbc-intro__tagline {
  letter-spacing: 0.22em;
  text-indent: 0.22em;
}

@keyframes sbcIntroLoadingSweep {
  from { transform: translateX(-150%); }
  to { transform: translateX(430%); }
}

.sbc-intro__tagline {
  margin-top: clamp(14px, 2.4vh, 24px);
  color: var(--sbc-dim);
  font-family: "Helvetica Neue", Arial, "PingFang SC", sans-serif;
  font-size: clamp(11px, 1.4vw, 14px);
  letter-spacing: 0.5em;
  text-indent: 0.5em;
  text-transform: uppercase;
}