/* The TikTok-style vertical feed */
.feed{
  height:100%;overflow-y:auto;scroll-snap-type:y mandatory;
  scrollbar-width:none;
}
.feed::-webkit-scrollbar{display:none}

.song{
  position:relative;height:100%;scroll-snap-align:start;scroll-snap-stop:always;
  display:flex;flex-direction:column;justify-content:flex-end;
  overflow:hidden;
}
.song-bg{position:absolute;inset:0;background-size:cover;background-position:center;
  filter:saturate(1.1)}
.song-bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.45) 0%,rgba(0,0,0,0) 30%,rgba(0,0,0,.25) 55%,rgba(0,0,0,.9) 100%)}

/* animated bars behind the art, they move with the music */
.viz{position:absolute;left:0;right:0;bottom:0;height:38%;display:flex;align-items:flex-end;
  gap:3px;padding:0 6px;opacity:.5;pointer-events:none}
.viz i{flex:1;background:linear-gradient(180deg,var(--gold),var(--hot));border-radius:3px 3px 0 0;height:4%;
  transition:height .07s linear}

.song-body{position:relative;z-index:2;padding:18px 84px 26px 18px}
.song-title{font-size:22px;font-weight:800;margin:0 0 4px;text-shadow:0 2px 12px #000}
.song-artist{font-size:15px;font-weight:700;color:var(--gold);margin:0 0 8px}
.song-caption{font-size:14.5px;margin:0 0 8px;text-shadow:0 1px 8px #000;white-space:pre-wrap}
.song-tags{color:#9ad7ff;font-size:14px;margin:0 0 10px}
.song-meta{display:flex;gap:12px;font-size:12.5px;color:var(--text-dim);flex-wrap:wrap}
.song-meta i{font-style:normal;background:rgba(255,255,255,.08);padding:3px 9px;border-radius:99px}

.song-scrub{position:relative;z-index:2;margin:10px 18px 0 18px;height:4px;background:rgba(255,255,255,.2);
  border-radius:99px;overflow:hidden}
.song-scrub-fill{height:100%;width:0;background:var(--gold)}

.rail{position:absolute;right:10px;bottom:120px;z-index:3;display:flex;flex-direction:column;gap:18px;align-items:center}
.rail button{background:none;border:0;color:#fff;font-size:28px;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:2px;filter:drop-shadow(0 2px 6px #000)}
.rail button b{font-size:12px;font-weight:700}
.rail button.on{color:var(--hot)}

.play-badge{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:80px;opacity:0;transition:opacity .2s;pointer-events:none;z-index:3;
  filter:drop-shadow(0 4px 20px #000)}
.song.paused .play-badge{opacity:.85}

.lyric-sheet{
  position:absolute;left:0;right:0;bottom:0;top:22%;z-index:5;background:rgba(8,8,12,.97);
  border-top:1px solid var(--line);border-radius:18px 18px 0 0;padding:18px;overflow:auto;
  transform:translateY(100%);transition:transform .25s ease;
}
.lyric-sheet.open{transform:none}
.lyric-sheet h4{margin:0 0 10px;color:var(--gold)}
.lyric-sheet pre{white-space:pre-wrap;font:15px/1.7 inherit;margin:0}
.lyric-close{position:absolute;top:10px;right:14px;background:none;border:0;color:var(--text-dim);font-size:26px;cursor:pointer}

.feed-empty{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;text-align:center;padding:30px;gap:6px}
.feed-empty[hidden]{display:none}