.audio-player{
  position:fixed;
  bottom:0;
  left:0;
  right:0;
  transform:translateY(120%);
  width:100%;
  z-index:200;
  transition:transform .5s cubic-bezier(.34,1.56,.64,1),opacity .4s ease;
  opacity:0;
  background:rgba(20,20,20,.55);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  border-top:1px solid rgba(255,255,255,.06);
  padding:1rem var(--pad);
  display:flex;
  align-items:center;
  gap:1rem;
  box-shadow:0 -4px 24px rgba(0,0,0,.3)
}
.audio-player.active{
  transform:translateY(0);
  opacity:1
}
.audio-player .art{
  width:44px;
  height:44px;
  border-radius:6px;
  background:rgba(255,255,255,.05);
  flex-shrink:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:.6rem;
  color:var(--text-dim)
}
.audio-player .play-btn{
  width:36px;
  height:36px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:50%;
  background:transparent;
  color:#ccc;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:.7rem;
  flex-shrink:0;
  transition:border-color .2s,color .2s,background .2s
}
.audio-player .play-btn:hover{
  border-color:rgba(255,255,255,.25);
  background:rgba(255,255,255,.04);
  color:#fff
}
.audio-player .track-info{
  flex:1;
  min-width:0
}
.audio-player .track-info .label{
  font-size:.65rem;
  color:#666;
  letter-spacing:.08em;
  text-transform:uppercase
}
.audio-player .track-info .title{
  font-size:.85rem;
  color:#ddd;
  letter-spacing:.02em;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  margin-top:.15rem
}
.audio-player progress{
  position:absolute;
  bottom:0;
  left:16px;
  right:16px;
  height:2px;
  -webkit-appearance:none;
  appearance:none;
  background:transparent;
  border-radius:1px;
  cursor:pointer
}
.audio-player progress::-webkit-progress-bar{
  background:rgba(255,255,255,.06);
  border-radius:1px
}
.audio-player progress::-webkit-progress-value{
  background:rgba(255,255,255,.25);
  border-radius:1px;
  transition:width .1s linear
}
.audio-player progress::-moz-progress-bar{
  background:rgba(255,255,255,.25);
  border-radius:1px
}
.audio-player .close-btn{
  background:none;
  border:none;
  color:#444;
  cursor:pointer;
  font-size:1.1rem;
  padding:.3rem;
  line-height:1;
  flex-shrink:0;
  transition:color .2s
}
.audio-player .close-btn:hover{color:#888}

/* time display inside player */
.audio-player .times{
  display:flex;
  justify-content:space-between;
  font-size:.6rem;
  color:var(--text-dim);
  font-family:monospace;
  letter-spacing:.05em;
  margin-top:.4rem
}

@media(prefers-reduced-motion){
  .hero img,.hero-text *,.hero-scroll,.reveal{animation:none!important;opacity:1!important;transform:none!important}
}