/* ============================================================
   全站唱片机 —— 只属于外层壳（index.html）
   ------------------------------------------------------------
   为什么单独一个文件：唱片机必须活在**永不刷新的文档**里，音乐才能跨页不中断。
   所以它从各页面搬到了外层壳 index.html；
   页面里的 css/style.css 已经不再需要这套规则，故拆出来。
   位置/尺寸仍是 position:fixed 视口坐标，五页视觉完全一致。
   ============================================================ */

/* ---------------- 全站唱片机（右上角 · 点击播放 / 再点暂停） ---------------- */
/* 与 .site-logo 同样走 position:fixed 视口坐标，五页位置、大小完全一致。
   尺寸受"不压到手账本"约束：手账本右缘 ≈ x1660、右侧搭扣下沿 ≈ y525。 */
.rp {
  position: fixed;
  right: 22px;
  top: 26px;
  width: 180px;
  z-index: 40;
  cursor: pointer;
  pointer-events: auto;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  transition: transform .28s ease, filter .28s ease, opacity .22s ease;
}
.rp img {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
  -webkit-user-drag: none;
  user-select: none;
}
/* 盘面：绕盘心自转。盘心在 911×901 素材的 (408.5, 490.5) ≈ 44.84% / 54.44%。
   两条动画叠加 —— 分别动 transform 和 rotate 两个**独立属性**，所以互不覆盖：
     1) rp-spinup：从静止柔和加速，正好转满一圈（360°）后停住。
        用满圈是这个方案的关键：360° ≡ 0°，所以任何时刻复位都不会看到跳变。
     2) rp-spin：恒速自转，延迟到加速跑完才接手。
        加速曲线末端斜率取 1，与恒速速度一致，交接处速度连续、没有顿挫。
   暂停/继续用 animation-play-state：角度原地冻结，再播放从原处接着转。 */
.rp-base {
  position: relative;
  z-index: 1;
  transform-origin: 44.84% 54.44%;
  will-change: transform, rotate;

  animation-name: rp-spin, rp-spinup;
  animation-duration: 4.5s, 4.5s;
  animation-timing-function: linear, cubic-bezier(.2, 0, .85, .85);
  animation-delay: 4.5s, 0s;
  animation-iteration-count: infinite, 1;
  animation-fill-mode: none, forwards;
  animation-play-state: paused, paused;
}
.rp.is-playing .rp-base { animation-play-state: running, running; }

/* 恒速自转：一圈 4.5s（真实黑胶 33⅓ rpm ≈ 1.8s，这里刻意放慢到不抢戏） */
@keyframes rp-spin { from { transform: rotate(0turn); } to { transform: rotate(1turn); } }
/* 起步：0 → 1 圈。cubic-bezier(.2,0,.85,.85) 起点斜率为 0（静止起步）、
   终点斜率为 1（与恒速同速），中途最高只比恒速快约 18%，肉眼几乎看不出。 */
@keyframes rp-spinup { from { rotate: 0turn; } to { rotate: 1turn; } }

/* 唱臂：绕素材里的转轴摆动。转轴在 911×901 素材的 (631, 73) ≈ 69.26% / 8.10% */
.rp-arm {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  transform-origin: 69.26% 8.10%;
  transform: rotate(0deg);
  transition: transform .72s cubic-bezier(.36, .02, .22, 1);
  will-change: transform;
}
/* 播放：唱臂从盘外摆到盘面（+40.41° 顺时针，落点与设计稿 播放.png 一致） */
.rp.is-playing .rp-arm { transform: rotate(40.41deg); }
/* 播放时透出一圈暖光，静音状态没有这层"启动感" */
.rp.is-playing { filter: drop-shadow(0 0 16px rgba(226, 148, 92, .34)); }

/* 指针触碰反馈：整体微微抬起 */
.rp:hover  { transform: translateY(-3px) scale(1.02); filter: drop-shadow(0 14px 22px rgba(90, 55, 30, .24)); }
.rp.is-playing:hover { filter: drop-shadow(0 0 16px rgba(226, 148, 92, .34)) drop-shadow(0 14px 22px rgba(90, 55, 30, .22)); }
.rp:active { transform: translateY(-1px) scale(.995); }
.rp:focus-visible { outline: 2px solid rgba(160, 90, 60, .5); outline-offset: 8px; border-radius: 50%; }

/* 尊重系统"减少动态效果"设置：唱臂瞬时切换、盘面不转 */
@media (prefers-reduced-motion: reduce) {
  .rp, .rp-arm { transition: none; }
  .rp-base { animation: none; }
}

/* 舞台里有整屏弹层（视频放大）时，唱片机淡出让出画面，别浮在遮罩之上 */
.rp.is-occluded { opacity: 0; pointer-events: none; }