/*
 * 私人留声：把播放控件做成信纸里的一枚可触碰唱片。
 * 所有持续运动都只在真实播放期间发生；静止时不抢文字的注意力。
 */

.voice-keepsake {
  --voice-ink: var(--ink, #28231f);
  --voice-muted: #756b61;
  --voice-paper: #eee5d8;
  --voice-paper-deep: #d9c9b7;
  --voice-cinnabar: #8e3e34;
  --voice-gold: #a7865d;
  --voice-progress: 0;
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(16rem, 21rem);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: center;
  width: min(100%, 58rem);
  margin: clamp(2.2rem, 7vw, 5.5rem) auto clamp(2rem, 5vw, 4rem);
  padding: clamp(1.15rem, 3vw, 2.1rem);
  color: var(--voice-ink);
  border-block: 1px solid rgb(92 72 54 / 0.22);
  background:
    linear-gradient(90deg, rgb(255 255 255 / 0.18), transparent 30% 70%, rgb(96 67 39 / 0.025)),
    repeating-linear-gradient(0deg, transparent 0 5px, rgb(76 54 36 / 0.018) 5px 6px),
    var(--voice-paper);
  box-shadow:
    0 1.5rem 4.5rem rgb(41 25 14 / 0.08),
    inset 0 1px rgb(255 255 255 / 0.48);
  overflow: hidden;
  contain: layout paint;
}

.voice-keepsake::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -45% auto -45% 43%;
  width: 38%;
  opacity: 0.3;
  background: linear-gradient(90deg, transparent, rgb(255 250 237 / 0.72), transparent);
  transform: rotate(11deg);
  pointer-events: none;
}

.voice-keepsake::after {
  content: "留声";
  position: absolute;
  right: clamp(0.65rem, 2vw, 1.25rem);
  top: clamp(0.65rem, 2vw, 1.1rem);
  display: grid;
  place-items: center;
  width: 2.25rem;
  aspect-ratio: 1;
  color: rgb(111 49 41 / 0.56);
  border: 1px solid rgb(142 62 52 / 0.32);
  font: 500 0.57rem/1.05 "STKaiti", "KaiTi", "Songti SC", serif;
  letter-spacing: 0.06em;
  transform: rotate(4deg);
  pointer-events: none;
}

.voice-keepsake__copy {
  min-width: 0;
}

.voice-keepsake__eyebrow,
.voice-keepsake .eyebrow {
  margin: 0 0 0.7rem;
  color: var(--voice-cinnabar);
  font: 500 0.68rem/1.4 system-ui, sans-serif;
  letter-spacing: 0.28em;
}

.voice-keepsake__copy h3 {
  max-width: 11em;
  margin: 0;
  color: var(--voice-ink);
  font-family: "Songti SC", "STSong", "Noto Serif SC", serif;
  font-size: clamp(1.35rem, 2.8vw, 2.15rem);
  font-weight: 420;
  line-height: 1.38;
  letter-spacing: 0.025em;
  text-wrap: balance;
}

.voice-keepsake__copy > p:last-child {
  max-width: 33rem;
  margin: 0.85rem 0 0;
  color: var(--voice-muted);
  font-family: "Songti SC", "STSong", serif;
  font-size: clamp(0.78rem, 1.3vw, 0.9rem);
  line-height: 1.8;
  letter-spacing: 0.055em;
}

.voice-keepsake__toggle,
#voiceKeepsakeToggle {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.9rem;
  align-items: center;
  width: 100%;
  min-height: 5.4rem;
  padding: 0.72rem 0.9rem;
  color: var(--voice-ink);
  border: 1px solid rgb(78 58 42 / 0.24);
  border-radius: 0;
  background:
    linear-gradient(110deg, rgb(255 255 255 / 0.42), transparent 55%),
    rgb(229 217 202 / 0.74);
  box-shadow:
    0 0.75rem 2rem rgb(57 35 20 / 0.07),
    inset 0 0 0 1px rgb(255 255 255 / 0.25);
  font: inherit;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition:
    border-color 300ms ease,
    background-color 300ms ease,
    box-shadow 300ms ease,
    transform 300ms cubic-bezier(.2, .72, .22, 1);
}

.voice-keepsake__toggle::after,
#voiceKeepsakeToggle::after {
  content: "";
  position: absolute;
  left: 5.85rem;
  right: 0.9rem;
  bottom: 0.72rem;
  height: 1px;
  background:
    linear-gradient(
      90deg,
      var(--voice-cinnabar) calc(var(--voice-progress) * 100%),
      rgb(74 57 43 / 0.2) 0
    );
  pointer-events: none;
}

.voice-keepsake__toggle:hover,
#voiceKeepsakeToggle:hover {
  border-color: rgb(142 62 52 / 0.42);
  box-shadow:
    0 1rem 2.7rem rgb(57 35 20 / 0.1),
    inset 0 0 0 1px rgb(255 255 255 / 0.28);
  transform: translateY(-2px);
}

.voice-keepsake__toggle:focus-visible,
#voiceKeepsakeToggle:focus-visible {
  outline: 2px solid var(--voice-cinnabar);
  outline-offset: 4px;
}

.voice-keepsake__toggle:disabled,
#voiceKeepsakeToggle:disabled {
  cursor: not-allowed;
  filter: grayscale(0.7);
  opacity: 0.58;
  transform: none;
}

.voice-keepsake__soundmark {
  position: relative;
  display: grid;
  place-items: center;
  width: 4.1rem;
  aspect-ratio: 1;
}

.voice-keepsake__disc {
  position: absolute;
  inset: 0;
  border: 1px solid rgb(59 48 40 / 0.26);
  border-radius: 50%;
  background:
    radial-gradient(circle, var(--voice-paper) 0 7%, var(--voice-cinnabar) 8% 13%, transparent 14%),
    repeating-radial-gradient(circle, #403932 0 1px, #27231f 1.5px 3px, #5b5148 3.5px 4px);
  box-shadow:
    0 0.55rem 1.1rem rgb(38 27 19 / 0.16),
    inset 0 0 0 1px rgb(255 255 255 / 0.12);
}

.voice-keepsake__disc::after {
  content: "";
  position: absolute;
  inset: 18%;
  border-radius: inherit;
  border: 1px solid rgb(229 218 200 / 0.1);
  box-shadow:
    0 0 0 0.36rem rgb(246 237 222 / 0.03),
    0 0 0 0.8rem rgb(246 237 222 / 0.025);
}

.voice-keepsake__wave {
  position: absolute;
  z-index: 1;
  right: -0.35rem;
  bottom: 0.15rem;
  display: flex;
  gap: 2px;
  align-items: center;
  justify-content: center;
  width: 1.55rem;
  height: 1.35rem;
  border-radius: 999px;
  background: var(--voice-paper);
  box-shadow: 0 0.25rem 0.75rem rgb(31 22 16 / 0.18);
}

.voice-keepsake__wave i {
  display: block;
  width: 1px;
  height: 28%;
  background: var(--voice-cinnabar);
  transform-origin: 50% 50%;
}

.voice-keepsake.is-playing .voice-keepsake__disc {
  animation: voice-keepsake-turn 12s linear infinite;
}

.voice-keepsake.is-playing .voice-keepsake__wave i {
  animation: voice-keepsake-wave 900ms ease-in-out infinite alternate;
}

.voice-keepsake.is-playing .voice-keepsake__wave i:nth-child(2) {
  animation-delay: -520ms;
}

.voice-keepsake.is-playing .voice-keepsake__wave i:nth-child(3) {
  animation-delay: -240ms;
}

.voice-keepsake.is-playing .voice-keepsake__wave i:nth-child(4) {
  animation-delay: -670ms;
}

.voice-keepsake.is-playing .voice-keepsake__wave i:nth-child(5) {
  animation-delay: -360ms;
}

.voice-keepsake.is-playing .voice-keepsake__toggle,
.voice-keepsake.is-playing #voiceKeepsakeToggle {
  border-color: rgb(142 62 52 / 0.52);
  background:
    linear-gradient(110deg, rgb(255 255 255 / 0.5), transparent 58%),
    rgb(232 219 201 / 0.92);
}

.voice-keepsake.is-waiting .voice-keepsake__disc {
  opacity: 0.72;
}

.voice-keepsake.is-ended .voice-keepsake__disc {
  box-shadow:
    0 0.65rem 1.25rem rgb(38 27 19 / 0.16),
    0 0 0 3px rgb(142 62 52 / 0.08);
}

.voice-keepsake.is-error {
  --voice-cinnabar: #765e57;
}

.voice-keepsake__button-copy {
  display: grid;
  gap: 0.55rem;
  min-width: 0;
}

#voiceKeepsakeAction,
.voice-keepsake__action {
  display: block;
  padding-right: 0.5rem;
  color: var(--voice-ink);
  font-family: "Songti SC", "STSong", serif;
  font-size: 1rem;
  font-weight: 520;
  letter-spacing: 0.08em;
}

.voice-keepsake__timeline {
  display: grid;
  grid-template-columns: auto minmax(2.5rem, 1fr) auto;
  gap: 0.5rem;
  align-items: center;
  color: var(--voice-muted);
  font: 500 0.63rem/1.2 ui-monospace, "SFMono-Regular", Consolas, monospace;
  font-variant-numeric: tabular-nums;
}

.voice-keepsake__track {
  position: relative;
  height: 1px;
  overflow: hidden;
  background: rgb(75 57 43 / 0.18);
}

#voiceKeepsakeProgress {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: transparent;
  transform: scaleX(var(--voice-progress));
  transform-origin: 0 50%;
}

#voiceKeepsakeProgress::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--voice-cinnabar);
}

progress#voiceKeepsakeProgress {
  appearance: none;
  transform: none;
}

progress#voiceKeepsakeProgress::-webkit-progress-bar {
  background: transparent;
}

progress#voiceKeepsakeProgress::-webkit-progress-value {
  background: var(--voice-cinnabar);
}

progress#voiceKeepsakeProgress::-moz-progress-bar {
  background: var(--voice-cinnabar);
}

.voice-keepsake__status,
#voiceKeepsakeStatus {
  grid-column: 1 / -1;
  min-height: 1.3em;
  margin: -0.55rem 0 0;
  color: var(--voice-muted);
  font-family: "Songti SC", "STSong", serif;
  font-size: 0.72rem;
  line-height: 1.65;
  letter-spacing: 0.08em;
}

@keyframes voice-keepsake-turn {
  to { transform: rotate(1turn); }
}

@keyframes voice-keepsake-wave {
  0% { transform: scaleY(0.72); }
  100% { transform: scaleY(2.45); }
}

@media (max-width: 720px) {
  .voice-keepsake {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.15rem;
    width: calc(100% - 1rem);
    margin-block: 1.75rem 2.2rem;
    padding: 1rem;
  }

  .voice-keepsake::after {
    right: 0.55rem;
    top: 0.55rem;
    width: 1.8rem;
    font-size: 0.49rem;
  }

  .voice-keepsake__copy h3 {
    max-width: 13em;
    padding-right: 1.9rem;
    font-size: clamp(1.2rem, 6vw, 1.55rem);
  }

  .voice-keepsake__copy > p:last-child {
    margin-top: 0.55rem;
    font-size: 0.76rem;
    line-height: 1.65;
  }

  .voice-keepsake__toggle,
  #voiceKeepsakeToggle {
    min-height: 4.55rem;
    gap: 0.72rem;
    padding: 0.58rem 0.7rem;
  }

  .voice-keepsake__toggle::after,
  #voiceKeepsakeToggle::after {
    left: 4.75rem;
    right: 0.7rem;
    bottom: 0.58rem;
  }

  .voice-keepsake__soundmark {
    width: 3.45rem;
  }

  .voice-keepsake__status,
  #voiceKeepsakeStatus {
    margin-top: -0.35rem;
    font-size: 0.68rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .voice-keepsake *,
  .voice-keepsake *::before,
  .voice-keepsake *::after {
    scroll-behavior: auto !important;
    animation: none !important;
    transition-duration: 0.01ms !important;
  }

  .voice-keepsake__toggle:hover,
  #voiceKeepsakeToggle:hover {
    transform: none;
  }

  .voice-keepsake.is-playing .voice-keepsake__wave i:nth-child(odd) {
    height: 62%;
  }
}

@media (forced-colors: active) {
  .voice-keepsake {
    color: CanvasText;
    border: 1px solid CanvasText;
    background: Canvas;
    box-shadow: none;
  }

  .voice-keepsake::before,
  .voice-keepsake::after {
    display: none;
  }

  .voice-keepsake__toggle,
  #voiceKeepsakeToggle {
    color: ButtonText;
    border: 1px solid ButtonText;
    background: ButtonFace;
    box-shadow: none;
    forced-color-adjust: auto;
  }

  .voice-keepsake__disc {
    border: 2px solid ButtonText;
    background: ButtonFace;
    box-shadow: none;
  }

  .voice-keepsake__wave,
  .voice-keepsake__wave i,
  #voiceKeepsakeProgress::before {
    background: Highlight;
  }

  .voice-keepsake__track {
    border: 1px solid ButtonText;
    background: Canvas;
  }
}