/* ==========================================================================
   首页 · 唱片机动画背景（2026-09-18 上线，替代双层视频背景试点）
   --------------------------------------------------------------------------
   方案来源：用户定稿的 imusicer-vinyl-bg-final.html
   配色适配：不写死颜色，底色取 var(--bg)、强调色取 var(--accent)，随 data-theme 走。
     2026-09-18 起线上主题为 ThinkPad 黑（body data-theme="thinkpad"），
     具体配色由 css/theme-thinkpad.css 覆盖；本文件只管结构与动画。
     （2026-09-20 清理：墨绿主题的写死色值遮罩/文字光晕已失效，见 .bg-vinyl::after 注释）

   分层契约（与 home-video.css 相同）：
     z-index 0   .bg-vinyl    底层：position:fixed 唱片机，pointer-events:none
     z-index 1   首页内容块    上层：Hero 透明透出唱片；往期/页脚实底盖住

   三条硬约束（缺一条就崩）：
     ① 底层必须 fixed（不是 absolute / sticky），否则跟着滚动跑掉
     ② 底层必须 pointer-events:none，否则上层按钮点不到
     ③ 上层滚动后经过的块都要自带实底且覆盖整宽

   回退方式：删本文件 + index.html 里的引用与 .bg-vinyl 区块 + body 类名。
   纯 CSS 动画；js 仅剩 index.html 内联的 3 行滚动淡出。
   ========================================================================== */

body.home-vinyl {
  /* —— 唱片机旋钮 —— */
  /* 唱片直径：原 74vh 偏大（背景装饰抢了文案的视觉权重），2026-09-20 收到 60vh。
     注意：theme-thinkpad.css 用 !important 定义了同名变量且优先级更高，
     改尺寸请以主题层为准（两边现已同步为同值，避免 !important 依赖下的困惑）。 */
  --vinyl-S:     min(60vh, 60vw);  /* 唱片直径 */
  --vinyl-rpm:   5s;               /* 转速：慢镜 */
  --vinyl-sweep: 40s;              /* 唱针扫动周期：2026-09-21 由 26s 放慢。
                                      行程只有 19°，40s ≈ 0.5°/秒，慢到几乎看不出在动 →
                                      观感变成「唱片一直在放」而不是「针在来回摆」。
                                      想再慢直接加大这个值，不需要动别处。 */
  --vinyl-label: 34%;              /* 中心标签直径（真实 LP 约 33%） */

  /* —— 唱臂几何（比例单位为唱片直径，参照 SL-1200） —— */
  --vinyl-pivot-x: 1.10;
  --vinyl-pivot-y: 0.92;
  --vinyl-arm-len: 0.78;
  --vinyl-a-start: 250deg;   /* 落针：外圈 0.91R */
  --vinyl-a-end:   231deg;   /* 播完：内圈 0.43R */

  /* —— 开场落针（2026-09-21）—— */
  --vinyl-a-rest:    274deg; /* 静止位：唱臂搁在托架上。由托架(1.16S,0.14S)与支点(1.10S,0.92S)反算，
                                改托架位置时这个值要跟着重算，否则针看起来没落在托架上 */
  --vinyl-cue-delay: .35s;   /* 开场停顿：先让人看清「针还在一边」 */
  --vinyl-cue-dur:   2.67s;  /* 落针过程：摆入 → 落下 → 稳住。
                                2026-09-21 节奏：1.7s → 2.4s → 2.67s（本步＝再降速 10%，
                                时长 × 1/0.9 ≈ 1.111，所以 2.4 × 1.111 ≈ 2.67）。
                                只调速度就只改这一个值：想再降 10% → 乘以 1.111 即可。
                                关键帧是按比例写的，所以拉长它会把「停泊 / 摆入 / 回弹」等比放慢：
                                  停泊 16% ≈ 0.38s · 摆入 16%→62% ≈ 1.1s · 回弹 62%→100% ≈ 0.9s
                                连带自动顺延：针尖点亮时刻、唱片起转时刻、sweep 接管时刻（= delay + dur）。 */
  --vinyl-cue-land:  .62;    /* 针尖触盘的时刻（占 cue 的比例），针尖光点与脉冲环在此刻点亮 */

  /* 唱片启动时刻：默认跟着针尖触盘那一刻走（cue-delay + dur × land ≈ 1.4s）。
     为什么不是等 cue 全部播完（2.05s）：那样中间 0.6s 是「针已压在盘上、盘却不转」，
     看着别扭。针一落下就启动，动作才是连贯的。
     若你想要「完全停稳才开始转」，把这一行改成 calc(var(--vinyl-cue-delay) + var(--vinyl-cue-dur))。 */
  --vinyl-spin-start: calc(var(--vinyl-cue-delay) + var(--vinyl-cue-dur) * var(--vinyl-cue-land));
}

/* ==========================================================================
   底层：唱片机舞台
   ========================================================================== */
.bg-vinyl {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;        /* 硬约束② */
  background: var(--bg);       /* 随 data-theme 变量走（ThinkPad 黑 = #08080a） */
}

/* 遮罩层：本文件只定义「结构与几何」，配色交给主题层
   （2026-09-20 清理：原墨绿遮罩 rgba(26,46,26,...) 自 09-18 换 ThinkPad 黑后，
     已被 theme-thinkpad.css 的 body.home-vinyl .bg-vinyl::after 整体覆盖，属失效残留。）
   ⚠ 不能连本规则一起删：content/position/inset 是伪元素的生成条件，
     主题层只覆盖了 background——删了伪元素就不存在，遮罩会整个消失。 */
.bg-vinyl::after {
  content: "";
  position: absolute;
  inset: 0;
}

/* 舞台：唱片内切于其中，唱臂支点按比例摆在盘外右侧；left 避开左侧文案
   ★ 本行的 left 实际不生效：theme-thinkpad.css 的 `body.home-vinyl .vinyl-stage`
     特异性更高，已右移到 60%（2026-09-20 收窄右半屏留白）。
     这里同步为同值，避免依赖 !important 时两边不一致造成困惑。
   B5 环境光晕（2026-09-20）：真实黑胶在暗房里会把环境光散射出来，
   原实现完全没有这层，唱片像"贴"在纯黑背景上，没有空气感。
   两层外发光：近场中性白（模拟漫反射）+ 远场极弱 TrackPoint 红（呼应全站唯一彩色）。
   用 border-radius:50% 让外发光呈圆形；stage 本身无背景，故不影响任何子元素。 */
.vinyl-stage {
  position: absolute;
  left: 60%;   /* 与 theme-thinkpad.css 同步（见上方注释） */
  top: 50%;
  width: var(--vinyl-S);
  height: var(--vinyl-S);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  box-shadow:
    0 0 90px 4px rgba(255, 255, 255, .035),
    0 0 170px 18px rgba(234, 77, 69, .05);
  isolation: isolate;   /* 让内部高光层的 screen 混合只在舞台内生效 */
}

/* ---------- 唱片：顺时针自转（黑胶保持黑色） ----------
   A 级升级（2026-09-20）：
     ① 盘面：原 #121216 与黑底 #08080a 几乎融合，轮廓全靠 1px 描边硬撑 → 剪影感、无体积。
        改为径向渐变（中心明显亮于背景）+ 顶部/底部倒角高光 + 加大外投影，让唱片从黑底浮出。
     ② 密纹：等距 7px 太机械 → 改为外密内疏三层 + 标签外缘 lead-out 过渡纹（真实 LP 外圈更密）。
     ③ 扫光：弱化并改为双扇形（真实黑胶沟槽衍射呈对称双瓣），仍随盘转，作为旋转参照。
     ④ 环境漫反射高光独立到 .vinyl-stage::after（固定不转），实现「盘转光不动」。
   -------------------------------------------------------------------------- */
.vinyl-platter {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    /* ① 沟槽衍射光泽：随盘转，双扇形弱化版（旋转参照，不再是唯一光源） */
    conic-gradient(from 0deg,
      rgba(255, 255, 255, 0) 0deg, rgba(255, 255, 255, .05) 42deg, rgba(255, 255, 255, .015) 78deg,
      rgba(255, 255, 255, 0) 112deg,
      rgba(255, 255, 255, 0) 248deg, rgba(255, 255, 255, .028) 292deg, rgba(255, 255, 255, 0) 332deg,
      rgba(255, 255, 255, 0) 360deg),
    /* ② 密纹：外密内疏 */
    repeating-radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .055) 0 1px, transparent 1px 4px),
    repeating-radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .034) 0 1px, transparent 1px 6px),
    repeating-radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .02) 0 1px, transparent 1px 9px),
    /* ③ lead-out 过渡纹：标签外缘一圈较疏沟槽 */
    repeating-radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .038) 0 1px, transparent 1px 3px),
    /* ④ 盘面：径向渐变，中心明显亮于黑底 → 唱片自带体积，不靠描边撑轮廓 */
    radial-gradient(circle at 50% 50%,
      #1e1e25 0%, #17171d 42%, #101014 72%, #0b0b0e 92%, #08080a 100%);
  box-shadow:
    0 40px 100px rgba(0, 0, 0, .62),            /* 加大外投影：脱离背景 */
    0 0 70px rgba(0, 0, 0, .38),
    inset 0 0 0 1px rgba(255, 255, 255, .085),  /* 细描边减弱：不再是唯一轮廓 */
    inset 0 1px 0 rgba(255, 255, 255, .16),     /* 顶部倒角高光 */
    inset 0 -1px 0 rgba(255, 255, 255, .045);   /* 底部倒角微光 */
  animation: vinyl-spin var(--vinyl-rpm) linear infinite;
}
@keyframes vinyl-spin { to { transform: rotate(360deg); } }

/* ---------- ★ A2 固定高光层：环境漫反射，不随盘转 ----------
   贴在 .vinyl-stage 上（与唱片同尺寸同位置），但 stage 本身不旋转，
   所以高光位置恒定 —— 盘在转、光不动，这是「质感」与「贴纸感」的分水岭。
   z-index 1：盖在盘面之上；唱臂/Logo/中轴提到 z-index 2 压回来。       */
.vinyl-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: 50%;
  pointer-events: none;
  background:
    radial-gradient(125% 125% at 30% 26%,
      rgba(255, 255, 255, .125) 0%,
      rgba(255, 255, 255, .055) 20%,
      rgba(255, 255, 255, .012) 42%,
      transparent 62%);
  mix-blend-mode: screen;   /* 只提亮暗部，不染白、不压红 */
}
/* 盘缘一道极细环境反射弧（同样不转，模拟倒角把环境光反射出来） */
.vinyl-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: 50%;
  pointer-events: none;
  background: conic-gradient(from 205deg at 50% 50%,
    transparent 0deg, rgba(255, 255, 255, .075) 62deg, transparent 124deg,
    transparent 360deg);
  mix-blend-mode: screen;
}
/* 唱臂 / Logo / 中轴 / 支点 / 托架：压在高光层之上（z-index 2） */
.vinyl-brand,
.vinyl-spindle,
.vinyl-arm,
.vinyl-stylus,
.vinyl-pivot,
.vinyl-rest { z-index: 2; }

/* 中心标签：Apple 系统红（站内唯一彩色） */
.vinyl-platter::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--vinyl-label);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, rgba(255, 255, 255, .38) 0 8%, var(--accent) 48%);
}

/* 中心孔
   A4（2026-09-20）：原为平色圆点，无深度 → 加 inset 深井阴影 + 孔口微高光，
   做出「孔是凹进盘面里」的体积感。底色仍随主题走（ThinkPad 主题覆盖为 #050506）。 */
.vinyl-platter::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1.6%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--bg);
  box-shadow:
    inset 0 0 4px 2px rgba(0, 0, 0, .82),   /* 孔壁内阴影：深井 */
    inset 0 1px 1px rgba(0, 0, 0, .9),
    0 0 0 1px rgba(255, 255, 255, .075);    /* 孔口一圈极弱高光 */
}

/* ---------- 中心 Logo：跟随唱片一起转（想静止：删 animation 一行） ---------- */
.vinyl-brand {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--vinyl-S);
  height: var(--vinyl-S);
  transform: translate(-50%, -50%);
  animation: vinyl-brandspin var(--vinyl-rpm) linear infinite;
}
@keyframes vinyl-brandspin {
  from { transform: translate(-50%, -50%) rotate(0); }
  to   { transform: translate(-50%, -50%) rotate(360deg); }
}
.vinyl-brand svg { width: 100%; height: 100%; display: block; overflow: visible; }
.vinyl-brand text {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 700;
  fill: #FFFFFF;   /* 白字压在系统红标签上 */
  font-size: 52px;
  letter-spacing: 5px;
}

/* 中轴（不随唱片转） */
.vinyl-spindle {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1.1%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: rgba(255, 255, 255, .8);
  box-shadow: 0 0 10px rgba(255, 255, 255, .35);
}

/* ---------- 唱臂：外圈↔内圈往复扫动（浅色金属，深底可见） ----------
   【2026-09-20 曾改为「单向完整播放周期 + 微抖动」，用户看过效果后要求回退，保留 alternate 往复】
   回退原因留档：完整周期（待机→落针→播放→播完停顿→快速归位）语义更像"放完一张唱片"，
   但归位那 1.8s 的快速回摆在本站极简气质里偏"忙"；微抖动（±0.22° / 0.42s）同理。
   若日后重做：抖动仍要用「独立的 rotate 属性」实现，不能写 transform ——
   sweep 已占用 transform，同写会互相覆盖导致唱臂不扫动（shine 改 background-position 同理）。 */
.vinyl-arm,
.vinyl-stylus {
  position: absolute;
  left: calc(var(--vinyl-S) * var(--vinyl-pivot-x));
  top: calc(var(--vinyl-S) * var(--vinyl-pivot-y));
  width: calc(var(--vinyl-S) * var(--vinyl-arm-len));
  transform-origin: 0 50%;
  transform: rotate(var(--vinyl-a-start));
  /* 默认态＝「唱片正在播放」：针已在盘上（落针角），直接随 sweep 走，针尖是亮的。
     这是刷新页面 / 从别的页面回到首页时看到的状态 —— 不落针、不摆动。
     落针入场只在 .vinyl-cue-on 下叠加（见下方「开场落针开关」一节）。 */
  animation: vinyl-sweep var(--vinyl-sweep) ease-in-out infinite alternate;
}
@keyframes vinyl-sweep {
  from { transform: rotate(var(--vinyl-a-start)); }
  to   { transform: rotate(var(--vinyl-a-end)); }
}

/* ---------- 开场落针关键帧（2026-09-21） ----------
   关键帧写的不是绝对角度，而是「相对落针角的补偿量」：
     静止 = --vinyl-a-rest − --vinyl-a-start（= +24deg，唱臂搁在托架上）
     终态 = 0deg（= 落针角，与 sweep 起点无缝衔接，播完不留残余偏移）
   62% 处 −3deg 的过冲 + 80% 处 +1deg 的回弹 = 落针惯性，只发生一次，
   不是持续抖动（持续微抖 2026-09-20 已被否：本站 hero 验收标准是「更安静」）。 */
@keyframes vinyl-cue {
  0%, 16% { rotate: calc(var(--vinyl-a-rest) - var(--vinyl-a-start)); }
  62%     { rotate: -3deg; }
  80%     { rotate: 1deg; }
  92%     { rotate: -.4deg; }
  100%    { rotate: 0deg; }
}
/* 落针的「高度」：2D 俯视画不出下落，改用投影距离表达 ——
   悬在盘面上方时投影远而散，落到盘面时收紧为常态值（与 .vinyl-arm 一致）。 */
@keyframes vinyl-cue-drop {
  0%, 16% { box-shadow: 0 18px 30px rgba(0, 0, 0, .5); }
  62%     { box-shadow: 0 16px 27px rgba(0, 0, 0, .47); }
  100%    { box-shadow: 0 8px 20px rgba(0, 0, 0, .4); }
}
.vinyl-arm {
  height: 3px;
  margin-top: -1.5px;
  border-radius: 2px;
  /* B6 唱臂金属化（2026-09-20）：原为单层白渐变，黑底上像「一根白色塑料细棍」。
     改为两层：
       ① 截面（上下）圆柱高光 —— 上下暗、中间亮，做出圆管的体积
       ② 长度方向明暗分段 —— 模拟金属管对环境光的反射
     再让第 ② 层沿臂身缓慢流动（7.5s），金属就有「活的反光」而非死渐变。 */
  background:
    linear-gradient(180deg,
      rgba(255, 255, 255, .10) 0%, rgba(255, 255, 255, .62) 42%,
      rgba(255, 255, 255, .34) 62%, rgba(255, 255, 255, .08) 100%),
    linear-gradient(90deg,
      rgba(255, 255, 255, .10) 0%, rgba(255, 255, 255, .34) 26%,
      rgba(255, 255, 255, .22) 58%, rgba(255, 255, 255, .42) 82%, rgba(255, 255, 255, .12) 100%);
  background-size: 100% 100%, 200% 100%;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .4);
  /* 复合动画：sweep 改 transform（外圈↔内圈扫动），shine 改 background-position（反光流动）。
     两者操作不同属性，互不覆盖 —— 若都写 transform，后者会整个吃掉前者，唱臂就不扫动了。 */
  animation:
    vinyl-sweep var(--vinyl-sweep) ease-in-out infinite alternate,
    vinyl-arm-shine 7.5s linear infinite;
}
@keyframes vinyl-arm-shine {
  from { background-position: 0 0, 0% 0; }
  to   { background-position: 0 0, 200% 0; }
}
/* 默认态针尖就是亮的（唱片正在播放），无需任何入场动画 */
.vinyl-stylus { height: 0; }

/* ==========================================================================
   开场落针开关（2026-09-21）：一次会话只落一次针
   --------------------------------------------------------------------------
   .vinyl-cue-on 由 index.html <head> 里的内联脚本按 sessionStorage 判定后加到 <html> 上：
     首次打开首页 → 加类 → 播落针；刷新 / 从详情页返回 → 不加 → 直接是播放状态。
   为什么用 sessionStorage 而不是「每次加载都播」：
     返回首页是很高频的动作，每次都看一遍落针会变成打扰（用户明确提过这点）；
     而落针的语义是「开机」，一次会话一次正好。
   为什么必须内联在 <head>：CSS 动画在元素渲染时就起跑，外链 JS 来不及加类，
     会出现「先摆一下再跳回去」的闪烁。
   想反复看落针：地址后加 ?cue=1（内联脚本认这个参数，本地预览/验收用）。 */
.vinyl-cue-on .vinyl-arm,
.vinyl-cue-on .vinyl-stylus {
  /* cue 一次性（1 both），播完 rotate 回到 0deg，把角度完整交棒给 sweep；
     sweep 延后到 cue 结束才开始，延迟期间 transform 保持基础值＝落针角，
     画面上就是「针还搁在托架上」。
     ★ vinyl-cue 走「独立的 rotate 属性」：sweep 已占用 transform，同写会互相覆盖。 */
  animation:
    vinyl-cue var(--vinyl-cue-dur) cubic-bezier(.22, .61, .36, 1) var(--vinyl-cue-delay) 1 both,
    vinyl-sweep var(--vinyl-sweep) ease-in-out
      calc(var(--vinyl-cue-delay) + var(--vinyl-cue-dur)) infinite alternate;
}
.vinyl-cue-on .vinyl-arm {
  /* 四个动画各管一个属性，互不覆盖：
       vinyl-sweep     → transform（外圈↔内圈，延后到落针后开始）
       vinyl-arm-shine → background-position（臂身反光流动）
       vinyl-cue       → rotate（开场落针的摆动，一次性）
       vinyl-cue-drop  → box-shadow（开场落针的下落高度，一次性） */
  animation:
    vinyl-sweep var(--vinyl-sweep) ease-in-out
      calc(var(--vinyl-cue-delay) + var(--vinyl-cue-dur)) infinite alternate,
    vinyl-arm-shine 7.5s linear infinite,
    vinyl-cue var(--vinyl-cue-dur) cubic-bezier(.22, .61, .36, 1) var(--vinyl-cue-delay) 1 both,
    vinyl-cue-drop var(--vinyl-cue-dur) ease-out var(--vinyl-cue-delay) 1 both;
}
/* 落针前唱针悬空，红点/脉冲环都该看不见，否则「从一边挪过来」的动作没有落点。
   淡入起点与 vinyl-cue 的 62%（针尖触盘）对齐：cue-delay + cue-dur × --vinyl-cue-land。
   forwards 保住 opacity:1 —— 不加的话动画结束会弹回基础值 0，针尖又消失。 */
.vinyl-cue-on .vinyl-stylus {
  opacity: 0;
  animation:
    vinyl-cue var(--vinyl-cue-dur) cubic-bezier(.22, .61, .36, 1) var(--vinyl-cue-delay) 1 both,
    vinyl-sweep var(--vinyl-sweep) ease-in-out
      calc(var(--vinyl-cue-delay) + var(--vinyl-cue-dur)) infinite alternate,
    vinyl-stylus-land .45s ease-out
      calc(var(--vinyl-cue-delay) + var(--vinyl-cue-dur) * var(--vinyl-cue-land)) 1 forwards;
}
/* 唱片启动（2026-09-21）：落针期间转盘静止，等针尖落到盘面那一刻才起转。
   用 animation-delay 而不是「先隐藏再淡入」——延迟期间动画尚未开始，
   transform 保持初始的 0deg，盘面密纹与 Logo 都静止不动。
   「针先放好 → 唱片才开始转」这个先后关系，就是开机的语义本身。
   默认态（无 cue-on）唱片照常一直转 —— 刷新 / 返回首页看到的就是播放中的样子。 */
.vinyl-cue-on .vinyl-platter {
  animation: vinyl-spin var(--vinyl-rpm) linear var(--vinyl-spin-start) infinite;
}
.vinyl-cue-on .vinyl-brand {
  animation: vinyl-brandspin var(--vinyl-rpm) linear var(--vinyl-spin-start) infinite;
}
@keyframes vinyl-stylus-land { from { opacity: 0; } to { opacity: 1; } }

/* 配重：支点后方，与唱头反向 */
.vinyl-arm::before {
  content: "";
  position: absolute;
  left: calc(var(--vinyl-S) * -0.17);
  width: calc(var(--vinyl-S) * 0.17);
  top: -4px;
  height: 11px;
  border-radius: 6px;
  background: linear-gradient(90deg, rgba(255, 255, 255, .34), rgba(255, 255, 255, .14));
  box-shadow: 0 6px 16px rgba(0, 0, 0, .38);
}

/* 唱头（带内偏角） */
.vinyl-arm::after {
  content: "";
  position: absolute;
  left: calc(100% - var(--vinyl-S) * 0.035);
  width: calc(var(--vinyl-S) * 0.085);
  height: 13px;
  top: -6px;
  border-radius: 2px;
  background: linear-gradient(90deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, .24));
  transform: rotate(-21deg);
  transform-origin: 0 50%;
  box-shadow: 0 6px 14px rgba(0, 0, 0, .38);
}

/* 唱针触点光点：系统红 */
.vinyl-stylus::after {
  content: "";
  position: absolute;
  right: calc(var(--vinyl-S) * -0.012);
  top: -5px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 26px 8px rgba(234, 77, 69, .32);
}

/* B7 唱针脉冲（2026-09-20）：针尖外一圈扩散环，像振动 / 声波，
   让红点从「静态贴片」变成「有能量的焦点」。周期放慢到 2.4s，避免 disco 感。
   伪元素的 transform 与父级 .vinyl-stylus 的 sweep 互不影响，可安全共存。 */
.vinyl-stylus::before {
  content: "";
  position: absolute;
  right: calc(var(--vinyl-S) * -0.012 - 3px);
  top: -8px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid var(--accent);
  animation: vinyl-pulse 2.4s ease-out infinite;
}
/* 落针态：脉冲环与针尖点亮同时起跑（落针前父级 opacity:0，看不到静止的环） */
.vinyl-cue-on .vinyl-stylus::before {
  animation: vinyl-pulse 2.4s ease-out
    calc(var(--vinyl-cue-delay) + var(--vinyl-cue-dur) * var(--vinyl-cue-land)) infinite;
}
@keyframes vinyl-pulse {
  0%   { transform: scale(.5);  opacity: .6; }
  100% { transform: scale(2.6); opacity: 0; }
}

/* 支点轴承座 */
.vinyl-pivot {
  position: absolute;
  left: calc(var(--vinyl-S) * var(--vinyl-pivot-x));
  top: calc(var(--vinyl-S) * var(--vinyl-pivot-y));
  width: calc(var(--vinyl-S) * 0.085);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, .34), rgba(255, 255, 255, .07) 68%, transparent 71%);
  border: 1px solid rgba(255, 255, 255, .18);
}

/* 唱臂托架 */
.vinyl-rest {
  position: absolute;
  left: calc(var(--vinyl-S) * 1.16);
  top: calc(var(--vinyl-S) * 0.14);
  width: calc(var(--vinyl-S) * 0.05);
  height: calc(var(--vinyl-S) * 0.075);
  transform: translate(-50%, -50%);
  border-radius: 3px;
  background: linear-gradient(rgba(255, 255, 255, .18), rgba(255, 255, 255, .06));
  border: 1px solid rgba(255, 255, 255, .14);
}

/* ==========================================================================
   上层：内容块契约（硬约束③）
   ========================================================================== */

/* Hero：透明，完整透出唱片（占满首屏，与视频版同款呼吸感） */
.home-vinyl .hero {
  position: relative;
  z-index: 1;
  background: transparent;
}
.home-vinyl .hero-inner {
  min-height: calc(100vh - 64px);
  /* 左右 padding 不能写 0：会覆盖 .container 的 24px，≤1080px 屏宽文案贴左缘（2026-09-26 修复） */
  padding: var(--space-5) var(--space-3);
}

/* ==========================================================================
   右缘「封套侧脊」（2026-09-20）
   --------------------------------------------------------------------------
   Hero 右半屏原本只有唱片背景，唱片直径 60vh → 右边那一截全空。
   补法选「收口」而不是「加内容」：在页面右缘放一列极小竖排小字，
   借用黑胶封套书脊的语言（VOL / 日期 / 曲目数时长），让右边缘有终点。
   不做曲目列表、不做插画、不加彩色——本站 hero 的验收标准是「更安静」。

   实现要点：
     · 每个 span 单独 writing-mode: vertical-rl → 文字自身竖排（拉丁字侧躺）；
       外层用 flex column 垂直堆叠，三段连成一条竖线，间距用 gap 直观控制。
       （若整段一起 vertical-rl，三段会变成从右往左的三列，不是一条线。）
     · position 相对 .hero（已 position:relative），right 贴视口右缘，
       故不受 .container 的 max-width / padding 限制。
     · aria-hidden：信息在左侧 .hero-meta 里同样存在，避免读屏重复播报。 */
.home-vinyl .hero-spine {
  position: absolute;
  top: 50%;
  right: clamp(32px, 4.2vw, 68px);              /* 比原来往左挪约 20-36px */
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 26px;
  transform: translateY(-50%);
  pointer-events: none;
  /* 竖排细线：贴在文字左侧，像封套书脊的分隔压线 */
  border-left: 1px solid rgba(255, 255, 255, .10);
  padding-left: 14px;
}
/* 侧脊亮度 & 位置：用户反馈原太暗、太贴右，整体提亮一档并往左挪约 20-36px */
.home-vinyl .hero-spine span {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-size: 10px;
  letter-spacing: .24em;
  line-height: 1;
  color: var(--ink-2, #b0b0b5);
  opacity: .72;
}
/* 期号是书脊的「书名」，单独给一点重量 */
.home-vinyl .hero-spine-vol {
  font-size: 11px;
  letter-spacing: .3em;
  opacity: .88;
}
/* 曲目数·时长压到最轻，只作收尾注脚 */
.home-vinyl .hero-spine-stat { opacity: .55; }

/* 既然侧脊已承载期号/日期/曲目信息，PC 端 hero-meta 的三行badge就去掉，
   让文案区更干净；但侧脊在 ≤860px 隐藏，所以移动端必须保留 meta 作为
   这些信息的唯一来源。 */
.home-vinyl .hero-meta { display: none; }

/* 往期歌单 / 页脚：实底（var(--bg)）盖住背景，滚动后画面干净
   （Hero 标题光晕同理移交主题层：见 theme-thinkpad.css 的 body.home-vinyl .hero-title） */
.home-vinyl .section {
  position: relative;
  z-index: 1;
  background: var(--bg);
}
.home-vinyl .site-footer {
  position: relative;
  z-index: 1;
  background: var(--bg);
}

/* ==========================================================================
   响应式
   ========================================================================== */
@media (min-width: 1100px) {
  /* PC 端：把 Hero 内容（左侧文案块）整体上移 3vh，
     让红色文案块在视觉上更靠近网页中部，同时不与顶部导航重叠。 */
  .home-vinyl .hero-inner { transform: translateY(-3vh); }
  /* 侧脊同属 Hero 视觉带，跟随上移同一数值，保持与文案块水平对齐
     （必须在 -50% 居中基准上再减，写成 calc(-50% - 3vh)，否则会跳位） */
  .home-vinyl .hero-spine { transform: translateY(calc(-50% - 3vh)); }
}

@media (max-width: 860px) {
  .home-vinyl .hero-inner {
    min-height: 0;
    padding: var(--space-5) var(--space-3) var(--space-4);
  }
  /* 侧脊只属于 PC 端构图：窄屏右缘放不下，且移动端已有「文案在上、唱片在下」的
     独立构图（信息由 hero-meta 承载），侧脊在此纯属干扰 */
  .home-vinyl .hero-spine { display: none; }
  /* 侧脊隐藏时，把 meta 信息还回文案区 */
  .home-vinyl .hero-meta { display: flex; }
}

@media (max-width: 720px) {
  /* 与 theme-thinkpad.css 的 @720px 同值（两边同步，避免 !important 依赖下的困惑） */
  body.home-vinyl { --vinyl-S: min(67vw, 40vh); --vinyl-label: 38%; }
  /* hero 加高：给下方唱片留独立空间。否则 hero 太矮，唱片整个落在往期歌单的实底之下看不见。
     padding-top +22px：文案整体下移，主按钮轻贴盘沿（对齐用户参考稿 002.jpg 的构图）。 */
  .home-vinyl .hero-inner { min-height: 84vh; padding: calc(var(--space-5) + 22px) var(--space-3) var(--space-4); }
  /* 唱片位置（left/top）与遮罩中心在 theme-thinkpad.css —— 那边选择器带 body.home-vinyl，
     特异性更高；写在本文件会被反向覆盖。本文件只同步尺寸。 */
}

/* ==========================================================================
   阶段2：老唱片「莎莎声」开关（2026-09-20）
   声音由 Web Audio 现场合成（底噪嘶声 + 随机爆裂），不加载任何音频文件
   —— 因此无版权问题、无流量体积。默认静音，用户点开才响；不自动播放、不跨会话记忆。
   图形化，不出现文字：静音 = 单独一个喇叭；开启 = 喇叭 + 声波，并转成 TrackPoint 红。
   文字说明走 aria-label / title，屏幕阅读器与悬停提示不受影响。
   ========================================================================== */
.vinyl-sound {
  position: fixed;
  left: 20px;
  bottom: 20px;                                   /* 兜底：不支持 max() 的旧浏览器 */
  bottom: max(20px, env(safe-area-inset-bottom));
  z-index: 5;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  color: var(--ink-2, #b0b0b5);                   /* 比 #8e8e93 略亮，黑底上可见 */
  background: rgba(255, 255, 255, .10);
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 50%;
  cursor: pointer;
  opacity: .75;                                   /* .45 在纯黑底上几乎隐身 */
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: opacity .25s, color .25s, border-color .25s, background .25s, box-shadow .25s;
}
.vinyl-sound svg { width: 19px; height: 19px; display: block; }
/* 静音态：只有喇叭，声波隐藏 */
.vinyl-sound .wave { opacity: 0; transition: opacity .25s; }
.vinyl-sound:hover { opacity: 1; border-color: rgba(255, 255, 255, .32); }
.vinyl-sound:focus-visible { outline: 2px solid var(--accent-text, #ea4d45); outline-offset: 3px; }
.vinyl-sound[aria-pressed="true"] {
  opacity: 1;
  color: var(--accent-text, #ea4d45);
  border-color: rgba(234, 77, 69, .5);
  background: rgba(234, 77, 69, .08);
  box-shadow: 0 0 18px 2px rgba(234, 77, 69, .18);
}
/* 开启态：声波出现，外圈那道缓慢呼吸 */
.vinyl-sound[aria-pressed="true"] .wave { opacity: 1; }
.vinyl-sound[aria-pressed="true"] .wave-2 { animation: vinyl-sound-wave 2.2s ease-in-out infinite; }
@keyframes vinyl-sound-wave { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }
@media (max-width: 720px) {
  .vinyl-sound { width: 36px; height: 36px; left: 14px; }
  .vinyl-sound svg { width: 17px; height: 17px; }
}

/* 尊重系统「减少动态效果」：唱片退回静态（保留画面，仅停动画） */
@media (prefers-reduced-motion: reduce) {
  .vinyl-platter,
  .vinyl-brand,
  .vinyl-arm,
  .vinyl-stylus { animation: none !important; }
  /* 落针入场停掉后，唱臂停在落针角（transform 基础值 = --vinyl-a-start），
     针尖必须显式点亮 —— 基础值是 opacity:0，否则静止态下唱针整个消失。 */
  .vinyl-stylus { opacity: 1 !important; }
  /* B7 脉冲环单独列出：伪元素不会被父元素的 animation:none 连坐 */
  .vinyl-stylus::before { animation: none !important; opacity: 0 !important; }
  /* 莎莎声图标的呼吸动画同理单独列（它在 button 的子元素上） */
  .vinyl-sound[aria-pressed="true"] .wave-2 { animation: none; }
}