/* ---------- VerseCraft branded audio player ----------
   Progressive enhancement: pages ship a plain <audio controls> element, and
   player.js swaps in this UI. If the script never runs, the native player
   stays and the samples remain playable. Colours come from each page's
   existing :root tokens, with fallbacks so the player is safe to drop into
   any page. */

.vc-player{
  --vc-bar:rgba(122,37,64,.20);
  display:flex;align-items:center;gap:14px;
  background:var(--ivory,#FFF8F0);
  border:1px solid var(--rose-deep,#F6D9CC);
  border-radius:14px;
  padding:12px 16px;
}

/* ---------- Play / pause ---------- */
.vc-play{
  flex:none;width:46px;height:46px;border:none;border-radius:50%;cursor:pointer;
  background:linear-gradient(135deg,var(--wine,#7A2540) 0%,#9C3355 100%);
  box-shadow:0 6px 16px rgba(122,37,64,.30);
  display:flex;align-items:center;justify-content:center;
  transition:transform .15s ease,box-shadow .15s ease;
}
.vc-play:hover{transform:scale(1.06);box-shadow:0 8px 20px rgba(122,37,64,.38)}
.vc-play:active{transform:scale(.97)}
.vc-play:focus-visible{outline:3px solid var(--gold,#D98E2B);outline-offset:3px}
.vc-play svg{width:17px;height:17px;fill:#fff;display:block}
.vc-play .vc-ico-pause{display:none}
.vc-player.is-playing .vc-play .vc-ico-play{display:none}
.vc-player.is-playing .vc-play .vc-ico-pause{display:block}

/* Loading ring while the file buffers (these are full songs, so the wait
   between tap and sound is real and worth showing). */
.vc-play::after{
  content:"";position:absolute;width:46px;height:46px;border-radius:50%;
  border:2px solid transparent;border-top-color:rgba(255,255,255,.9);
  opacity:0;pointer-events:none;
}
.vc-play{position:relative}
.vc-player.is-loading .vc-play::after{opacity:1;animation:vc-spin .7s linear infinite}
.vc-player.is-loading .vc-play svg{opacity:.25}
@keyframes vc-spin{to{transform:rotate(360deg)}}

/* ---------- Waveform / scrubber ---------- */
.vc-wave{
  flex:1;min-width:0;height:40px;position:relative;cursor:pointer;
  display:flex;align-items:center;gap:2px;
  touch-action:none;border-radius:6px;
}
.vc-wave:focus-visible{outline:3px solid var(--gold,#D98E2B);outline-offset:4px}
.vc-wave span{
  flex:1;min-width:2px;border-radius:2px;background:var(--vc-bar);
  transition:background-color .12s linear,transform .12s ease;
  transform-origin:center;
}
.vc-wave span.on{
  background:linear-gradient(180deg,var(--gold,#D98E2B) 0%,var(--wine,#7A2540) 100%);
}
/* Gentle life around the playhead while audio is actually playing. */
.vc-player.is-playing .vc-wave span.at{transform:scaleY(1.28)}

.vc-time{
  flex:none;font-family:var(--body,'Nunito Sans',system-ui,sans-serif);
  font-size:.82rem;font-weight:700;color:var(--ink-soft,#6E5560);
  font-variant-numeric:tabular-nums;min-width:82px;text-align:right;
}

@media(max-width:600px){
  .vc-player{gap:11px;padding:11px 13px}
  .vc-play{width:42px;height:42px}
  .vc-play::after{width:42px;height:42px}
  .vc-time{font-size:.76rem;min-width:74px}
  .vc-wave{height:34px}
}
@media(max-width:380px){
  .vc-time{min-width:0;font-size:.72rem}
}

@media (prefers-reduced-motion: reduce){
  .vc-play,.vc-wave span{transition:none}
  .vc-player.is-loading .vc-play::after{animation:none}
  .vc-player.is-playing .vc-wave span.at{transform:none}
}

/* ---------- Hero variant (inside the story card) ----------
   Sits on white rather than ivory, and carries a caption naming the track
   so it never reads as though it is the lyric printed above it. */
.story-card .vc-player{
  background:transparent;border:none;padding:0;gap:13px;margin-top:4px;
}
.vc-caption{
  display:block;font-family:var(--body,'Nunito Sans',system-ui,sans-serif);
  font-size:.7rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-soft,#6E5560);margin-bottom:10px;
}
.vc-caption b{
  display:block;font-size:.9rem;letter-spacing:.01em;text-transform:none;
  color:var(--wine-deep,#48132A);font-weight:700;margin-top:3px;
  font-family:var(--display,'Fraunces',Georgia,serif);
}
.story-card .vc-listen{
  border-top:2px dashed var(--rose-deep,#F6D9CC);margin-top:18px;padding-top:16px;
}