/* ══════════════════════════════════════════════════════════════
   Lights On · 排版覆盖层
   在 css/site.css 之后加载，只增不改 参考实现 的通用 token。
   设计稿：Figma HANXINBO · node 44:94（焦虑房间）为基线，五房同规格。
   方案「甲」：不动字号，只改字间距 / 换行 / 字重 / 中文字体。
   ══════════════════════════════════════════════════════════════ */

/* 思源黑体子集（OFL 开源，228 字形 / 32KB，仅含站内用到的中文）
   生成脚本：../build-font-subset.py */
@font-face {
  font-family: 'noto-sans-sc';
  src: url('../assets/fonts/noto-sans-sc-300-subset.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

/* ── 副标题「平复焦虑的房间」───────────────────────────────
   设计稿 #44:169：字间距 0.8em、居中。
   padding-left 抵消末字后的 0.8em 尾距，保证视觉真居中。
   去 uppercase（对中文无意义，且会带累混排）。 */
.room-subtitle {
  font-family: 'noto-sans-sc', 'PingFang SC', sans-serif;
  font-weight: 300;
  letter-spacing: .8em;
  padding-left: .8em;
  line-height: 32px;
  text-transform: none;
}

/* ── 正文「不用逼自己…」──────────────────────────────────
   设计稿 #46:3：字间距 0.04em、行高 32px、左对齐。
   覆盖 参考实现 text-md2 的 −0.05em 负字距（为英文紧排设计）。
   换行仍由 HTML 里的 <br> 控制；20px 下最长行 457px < 块宽 480px，
   不会触发自动换行，三行位置稳定。 */
.room-body {
  font-family: 'noto-sans-sc', 'PingFang SC', sans-serif;
  font-weight: 300;
  letter-spacing: .04em;
  line-height: 32px;
  text-transform: none;
}

/* ── 引言（左下角 preloader）──────────────────────────────
   设计稿 #46:6：中文 fw300 / 0.04em，英文 fw200 / 0，
   两行之间留 padding，形成中英文层级差。 */
.room-quote-cn {
  font-family: 'noto-sans-sc', 'PingFang SC', sans-serif;
  font-weight: 300;
  letter-spacing: .04em;
}
.room-quote-en {
  font-weight: 200;
  letter-spacing: 0;
  margin-top: 10px;
}

/* ── Header 左侧 tagline（原 时钟位/时钟位）────────────────
   中文用思源，微字距，安静克制。 */
.site-tagline {
  font-family: 'noto-sans-sc', 'PingFang SC', sans-serif;
  font-weight: 300;
  letter-spacing: .05em;
  text-transform: none;
  white-space: nowrap;   /* 一行展示全，不换行（2026-10-15） */
}

/* ── 桌面端正文块宽度修正（2026-10-15 实测修复换行错乱）─────
   根因：参考实现 桌面 root font-size = min(10*100vw/1920, 10px) = 10px，
   正文块 w-[30rem] 只有 300px，而设计稿正文块 457px（最长行 22 字 × 1.04em × 2rem = 45.76rem）。
   300px 装不下 → 中文长行被自动折成 4 行。这个 30rem 窄列本是给英文短句设计的。
   修复：桌面把正文块放宽到 48rem（容纳 23.1 字，留约 1 字余量）+ 禁 flex 压缩。
   用 rem 写，root 随视口等比缩放时 width 与字号同比，比值恒定 → 任何桌面宽度都不折。
   移动端不加此规则，保持 flex-col 自适应折行（设计稿未给移动端）。 */
@media (min-width:1024px) {
  .room-body {
    width: 48rem;
    flex-shrink: 0;
  }
}

/* ══════════════════════════════════════════════════════════════
   播放器（2026-10-15）：Play 触发 → 右下圆图淡入 + 唱片顺时针慢转 + 音乐渐入
   滚到别的房间 → 音乐渐出停止、停转、圆图隐去；切回不自动播。
   逻辑在 js/lights-on.js，main.js 的 goTo 通过 window.LightsOn.onRoomChange 钩入。
   ══════════════════════════════════════════════════════════════ */

/* 圆图初始全隐藏（覆盖 参考实现 的 first:opacity-100）；播放时由 JS 用 inline opacity 淡入。
   不用 !important，否则盖不住 GSAP 写的 inline style。 */
#projects [data-projects-images] .project-image { opacity: 0; }

/* 唱片顺时针慢转：作用于圆图内的 img（img 无其它 transform，绕自身中心转） */
@keyframes lo-spin { to { transform: rotate(360deg); } }
#projects [data-projects-images] .project-image img.spinning {
  animation: lo-spin 12s linear infinite;
  transform-origin: 50% 50%;
}
/* 暂停：停转但保留当前角度 */
#projects [data-projects-images] .project-image img.paused { animation-play-state: paused; }

/* Play / Pause 图标切换（.is-playing 时隐三角、显双竖线） */
.cta.play-btn .icon-pause { display: none; }
.cta.play-btn.is-playing .icon-svg:not(.icon-pause) { display: none; }
.cta.play-btn.is-playing .icon-pause { display: block; }

/* 减少动态偏好：不转唱片（音乐不受影响） */
@media (prefers-reduced-motion: reduce) {
  #projects [data-projects-images] .project-image img.spinning { animation: none; }
}

/* ── hover Play 时的贴心提示（右下角，圆图下方）──────────────
   字号/色值/字体沿用左下角中文（.room-quote-cn + .secondary）。
   初始 opacity:0，由 lights-on.js 在 mouseenter/leave 时淡入上移 / 淡出。 */
#playHint {
  position: fixed;
  z-index: 10;
  right: 8rem;
  bottom: 6rem;
  max-width: 20rem;
  text-align: right;
  font-size: 1.6rem;      /* = 左下中文 ds:text-sm（root 10px → 16px） */
  opacity: 0;
  pointer-events: none;
}
@media (max-width: 1023px) {
  #playHint { display: none; }   /* 触屏无 hover，仅桌面显示 */
}