/* ============================================================
   基础层 —— 重置、字体挂载、通用排版件
   ============================================================ */

@import url("../fonts/fonts.css");

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

html {
  background: var(--bg);
  -webkit-text-size-adjust: 100%;
  /* 参考 sondaven-en.html：完全隐藏滚动条 + JS 计算宽度补偿，
     不用 scrollbar-gutter——它在 Windows Chromium 上会永久留 15px 沟槽，
     内容区从打开页面起就窄一截，锁屏前后反倒看不出变化。 */
  overflow-y: scroll; /* 保持可滚动，但下面的规则把滚动条画成零宽 */
}
html::-webkit-scrollbar { width: 0; background: transparent; }
html { scrollbar-width: none; }

body {
  font-family: var(--font);
  font-weight: var(--w-regular);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg);
  background: var(--bg);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* 中文避头尾与标点挤压 */
  text-spacing-trim: space-first;
  line-break: strict;
  overflow-wrap: break-word;
}

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

::selection { background: var(--accent); color: #000; }

/* Lenis 平滑滚动接管后的必备样式 */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

/* ---------- 通用排版件 ---------- */

/* 等宽标注：编号、分类、元信息 */
.mono {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  font-weight: var(--w-regular);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--muted);
}

/* 首屏顶部信息栏：比普通标注更醒目，但仍保持等宽信息的节制感 */
.mono--cover {
  font-size: var(--fs-body);
  font-weight: var(--w-bold);
  color: var(--fg);
}

/* 标注前的短横线，参考页的结构标记手法 */
.mono--rule { display: inline-flex; align-items: center; gap: 0.9rem; }
.mono--rule::before {
  content: "";
  width: clamp(1.5rem, 3vw, 3rem);
  height: var(--rule);
  background: var(--dim);
}

/* 中文标注：0.2em 是给拉丁大写字母的，汉字用会散架 */
.mono--cn { letter-spacing: 0.1em; }

/* 插封主句 —— 大字、重字重、手动分行 */
.display {
  font-size: var(--fs-display);
  font-weight: var(--w-black);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
}
/* 分行由 HTML 显式给出，每行独立成块以便逐行入场 */
.display .line { display: block; }

/* 主句的金属渐变，取自参考页的 metal-text。
   参考页压到 #444 是因为拉丁字母笔画粗、面积大；
   汉字笔画细密，压太暗会连同可读性一起丢掉，
   所以起点下移、终点提亮，只留金属感不牺牲对比度。 */
.display--metal {
  background: linear-gradient(176deg, #ffffff 42%, #7d7d7d 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.display--metal .line {
  background: inherit;
  -webkit-background-clip: text;
  background-clip: text;
  color: #ffffff;
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .display--metal .line { color: transparent; }
}

/* 短独白（2–3 行）：比正文重，比主句轻 */
.talk {
  font-size: var(--fs-title);
  font-weight: var(--w-regular);
  line-height: var(--lh-title);
  letter-spacing: var(--ls-lead);
  color: #e8e8e8;
}
.talk .line { display: block; }

/* 插封内标题：字号升一档到 --fs-section、字重直接上 Black。
   用于流程/边界这类「标题 + 内容主体」的插封，标题要立得住，
   又不能压过屏幕真正的主体（曲线、星标、素材）。 */
.talk--strong {
  font-size: var(--fs-section);
  font-weight: var(--w-black);
  line-height: 1.12;
  color: #f2f2f2;
}

/* 长独白（4 行以上） */
.lead .line { display: block; }
.lead {
  font-size: var(--fs-lead);
  font-weight: var(--w-thin);
  line-height: var(--lh-lead);
  letter-spacing: var(--ls-lead);
  color: #d8d8d8;
}

.meta { font-size: var(--fs-meta); color: var(--muted); }
.accent { color: var(--accent); }

/* 一屏 —— 插封的基本单位 */
.screen {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  padding: var(--gutter);
  display: flex;
}

/* 文字在屏内的落点，逐屏轮换，避免六屏一个样 */
.screen--bl { align-items: flex-end;  justify-content: flex-start; }
.screen--tl { align-items: flex-start; justify-content: flex-start; padding-top: 28vh; }
.screen--cl { align-items: center;    justify-content: flex-start; }
.screen--br { align-items: flex-end;  justify-content: flex-end; text-align: right; }

@media (prefers-reduced-motion: reduce) {
  .rise,
  .display .line.rise,
  .talk .line.rise {
    opacity: 1;
    transform: none;
    clip-path: none;
  }
}

/* 极暗网格底纹，给纯黑屏一点结构感 */
.grid-bg {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    linear-gradient(to right, var(--border) var(--rule), transparent var(--rule)),
    linear-gradient(to bottom, var(--border) var(--rule), transparent var(--rule));
  background-size: clamp(80px, 8vw, 140px) clamp(80px, 8vw, 140px);
  opacity: 0.5;
  mask-image: radial-gradient(ellipse at center, #000 20%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 20%, transparent 78%);
}