/* =========================================================================
   components.css —— 唱片旋转、进度条、控制按钮
   ========================================================================= */

/* ── 黑胶唱片：8s 一圈，播放时转、暂停停在当前角度 ───────────────────── */
@keyframes a2-vinyl-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.vinyl-spin {
  width: 100%;
  height: 100%;
  animation: a2-vinyl-spin var(--vinyl-duration) linear infinite;
  animation-play-state: paused;   /* 暂停时保留当前角度，再次播放从原角度继续 */
  will-change: transform;
  backface-visibility: hidden;
  transform-origin: 50% 50%;
}

.stage.is-playing .vinyl-spin { animation-play-state: running; }

/* ── 进度条（自绘轨道 + 自绘圆点滑块） ──────────────────────────────── */
.layer--progress { pointer-events: none; }

.progress__art {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.progress__track {
  stroke: var(--progress-track);
  stroke-width: 6;
  stroke-linecap: round;
}

.progress__fill {
  stroke: var(--progress-fill);
  stroke-width: 6;
  stroke-linecap: round;
}

.progress__thumb {
  fill: var(--progress-thumb);
}

/* 命中区：比轨道高，方便拖动；宽度 = 滑块圆心可移动区间 */
.progress__hit {
  position: absolute;
  left: 16.84px;                 /* 设计稿里滑块圆心的起点 */
  top: 50%;
  width: 1035.13px;              /* 1051.97 - 16.84 */
  height: 74px;
  transform: translateY(-50%);
  cursor: pointer;
  pointer-events: auto;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
}

.progress__hit:focus { outline: none; }
.progress__hit:focus-visible {
  outline: 3px solid var(--a2-accent);
  outline-offset: 2px;
  border-radius: 8px;
}

.stage.is-scrubbing .progress__thumb { fill: var(--a2-accent); }
.stage.is-scrubbing .progress__fill  { stroke: var(--a2-accent); }

/* 拖动时的小气泡（悬停/拖动才出现，不干扰静态版面）
   注意：它位于 1/3 缩放的 .stage 内部，所以字号要按设计稿 px 写大一些 */
.progress__tip {
  position: absolute;
  left: 0;
  bottom: calc(100% + 16px);
  transform: translateX(-50%);
  padding: 12px 26px;
  border-radius: 999px;
  background: var(--a2-ink);
  color: var(--a2-white);
  font-size: 40px;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.18s var(--ease);
  pointer-events: none;
}

.stage.is-scrubbing .progress__tip { opacity: 1; }

/* ── 控制按钮 ───────────────────────────────────────────────────────── */
.ctrl {
  position: absolute;
  display: block;
  border: 0;
  padding: 0;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 0.25s var(--ease);
}

.ctrl__art {
  display: block;
  width: 100%;
  height: 100%;
  transition: transform 0.18s var(--ease);
}

.ctrl--play { left: 267px; top: 2262px; width: 116.22px; height: 163.68px; }
.ctrl--loop { left: 847px; top: 2262px; width: 127.63px; height: 163.67px; }

.ctrl:active .ctrl__art { transform: scale(0.93); }

.ctrl:focus { outline: none; }
.ctrl:focus-visible {
  outline: 3px solid var(--a2-accent);
  outline-offset: 8px;
  border-radius: 16px;
}

/* 播放 / 暂停图标切换（默认显示素材原图里的播放三角，播放中换成两根竖条） */
.a2svg--play .pause-icon { display: none; }
.a2svg--play .pause-icon rect { fill: var(--a2-ink); }

.stage.is-playing .a2svg--play .play-icon  { display: none; }
.stage.is-playing .a2svg--play .pause-icon { display: block; }

/* 循环开关：默认开启（与设计稿一致，图标满色）；关闭时降透明度 */
.a2svg--loop { transition: opacity 0.25s var(--ease); }
.stage:not(.is-looping) .a2svg--loop { opacity: 0.38; }

/* 未加载出音频时，播放按钮不可用 */
.stage.is-audio-error .ctrl--play { opacity: 0.45; cursor: not-allowed; }