/* p3.63-C 重做:音乐页参照 iTunes(桌面)/ Apple Music App(手机)整页
   重做。和旧版的关系:类名骨架(playlist-group/playlist-card/itunes-
   toolbar 等)沿用,DOM 结构兼容 playlist.js 和回归断言;视觉全部重排——

   - 不再全宽:内容容器 max-width 1180px 居中,两侧留白(Collin 原话
     "两边留白居中,像文章一样,渲染得恰到好处");
   - 页头:Apple Music 手机版那种超大粗体标题(滚动时自然随页滚,不
     做吸顶变形——我们的导航胶囊已经是吸顶层);
   - 主打区:大封面卡横滑(Apple Music "Updated Playlist" 大卡位),
     两端同一份 DOM,尺寸纯断点;
   - 分组区:iTunes 式区块(组标题 + N 首),桌面正方形封面密集网格
     (舒适 180px 起/紧凑 140px 起,后台可切),手机横滑一屏 2.3 张;
   - 顶部工具栏保留(iTunes 顶部 transport 那个位置),居中收进容器;
   - 开场弹窗动画(.music-intro):音符图标 + 标语 + 进度条,约 1.5s
     淡出,点击可跳过,reduced-motion 缩短。

   播放状态/进度一律不在这个页面的组件里显示——那是弹窗播放器/手机灵
   动岛的地盘,卡片只负责"浏览 + 点了播哪首"。 */

/* ==================== 容器:两边留白居中 ==================== */
.playlist-page {
  max-width: 1180px;
  margin: 0 auto;
  padding: 26px 0 64px;
}
/* 手机端容器照旧全宽,留白交给各段自己的 padding(横滑区要让卡片能
   滑到屏幕边缘,不能用容器内边距把它框住)。 */

/* ==================== 页头(Apple Music 超大粗体标题) ==================== */
.playlist-hero {
  padding: 22px var(--space-page) 6px;
}
.playlist-hero__title {
  margin: 0;
  font-size: 34px;
  font-weight: 800;
  letter-spacing: var(--tracking-title);
  color: var(--text-primary);
  line-height: 1.15;
}
.playlist-hero__subtitle {
  margin: 6px 0 0;
  font-size: 15px;
  color: var(--text-secondary);
}
@media (min-width: 700px) {
  .playlist-hero { padding-top: 34px; }
  .playlist-hero__title { font-size: 40px; }
}

/* ==================== 顶部工具栏(iTunes transport 位,桌面显示) ==================== */
.itunes-toolbar { display: none; }
@media (min-width: 700px) {
  .itunes-toolbar {
    display: flex; align-items: center; gap: 18px;
    margin: 18px var(--space-page) 8px;
    padding: 10px 16px;
    background: var(--glass-tint);
    border: 1px solid var(--separator);
    border-radius: 14px;
    backdrop-filter: saturate(180%) blur(16px);
    -webkit-backdrop-filter: saturate(180%) blur(16px);
  }
  /* 总指挥原话"顶部工具栏用音浪可视化替代放 Apple 图标的位置"——复用弹
     窗播放器的 .ask-player__waveform 组件(is-playing 时播动画,不播放
     时是静止的短竖条),这里只是放大一点、固定在工具栏最左侧,顶替真实
     iTunes 那个位置上的品牌图标。 */
  .itunes-toolbar__wave { flex: none; height: 20px; gap: 3px; }
  .itunes-toolbar__wave .ask-player__waveform-bar { width: 3px; }
  .itunes-toolbar__transport { flex: none; display: flex; align-items: center; gap: 6px; }
  .itunes-toolbar__btn {
    width: 30px; height: 30px; border-radius: 50%; flex: none;
    display: flex; align-items: center; justify-content: center;
    color: var(--text-primary); background: transparent;
    transition: background-color var(--dur-hover) var(--ease), transform var(--dur-hover) var(--ease);
  }
  .itunes-toolbar__btn:hover { background: rgb(127 127 127 / .16); transform: scale(1.08); }
  .itunes-toolbar__btn:active { transform: scale(.94); }
  .itunes-toolbar__btn--play { width: 34px; height: 34px; }
  .itunes-toolbar__title {
    flex: 1; min-width: 0; font-size: 13px; font-weight: 600; color: var(--text-secondary);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: right;
  }
  @media (prefers-reduced-motion: reduce) {
    .itunes-toolbar__btn { transition: none; }
    .itunes-toolbar__btn:hover { transform: none; }
  }
}

/* ==================== 主打区:大封面卡横滑 ==================== */
.playlist-featured { margin-top: 20px; }
.playlist-featured__scroll {
  display: flex; gap: 22px;
  overflow-x: auto;
  padding: 4px var(--space-page) 10px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scroll-snap-type: x proximity;
}
.playlist-featured__scroll::-webkit-scrollbar { height: 6px; }
.playlist-featured__scroll::-webkit-scrollbar-thumb { background: rgb(127 127 127 / .3); border-radius: 999px; }
.playlist-featured__scroll::-webkit-scrollbar-track { background: transparent; }

.playlist-fcard {
  flex: 0 0 auto; width: 236px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
  text-align: left;
  scroll-snap-align: start;
}
@media (min-width: 700px) {
  .playlist-fcard { width: 300px; }
}
.playlist-fcard__cover-wrap { position: relative; width: 100%; }
.playlist-fcard .cover--playlist {
  width: 100%; aspect-ratio: 1 / 1;
  border-radius: 12px;
  box-shadow: var(--shadow-card);
  transition: transform var(--dur-hover) var(--ease), box-shadow var(--dur-hover) var(--ease);
}
@media (hover: hover) {
  .playlist-fcard:hover .cover--playlist {
    transform: translateY(-4px);
    box-shadow: var(--shadow-card-hover);
  }
}
.playlist-fcard:active .cover--playlist { transform: translateY(-1px) scale(.98); }
@media (hover: hover) {
  .playlist-fcard:hover .playlist-card__playbtn { opacity: 1; }
}
.playlist-fcard.is-playing .playlist-card__playbtn { opacity: 1; }
.playlist-fcard__meta { display: flex; flex-direction: column; gap: 2px; max-width: 100%; }
.playlist-fcard .playlist-card__title { font-size: 15px; }
.playlist-fcard.is-current .playlist-card__title { color: var(--tint); }

/* ==================== 分组区块(iTunes 式:标题 + 网格) ==================== */
.playlist-groups {
  display: flex; flex-direction: column;
  gap: 44px;
  padding: 30px 0 0;
}
.playlist-group__head {
  padding: 0 var(--space-page);
  margin: 0 0 16px;
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
}
.playlist-group__title {
  font-size: 22px; font-weight: 700; color: var(--text-primary);
  margin: 0;
  letter-spacing: var(--tracking-title);
}
@media (min-width: 700px) {
  .playlist-group__title { font-size: 26px; }
}
.playlist-group__subtitle {
  font-size: 13px; color: var(--text-tertiary);
  margin: 0;
}

/* 手机:横向滑动一行(一屏露 2.3 张暗示可滑);桌面(min-width:700px)
   在下方改写成 iTunes 密集网格。 */
.playlist-group__scroll {
  display: flex; gap: 20px;
  overflow-x: auto;
  padding: 0 var(--space-page) 6px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.playlist-group__scroll::-webkit-scrollbar { height: 6px; }
.playlist-group__scroll::-webkit-scrollbar-thumb { background: rgb(127 127 127 / .3); border-radius: 999px; }
.playlist-group__scroll::-webkit-scrollbar-track { background: transparent; }

/* 桌面:iTunes 专辑库密集网格——正方形封面 auto-fill 铺满,规整密集。
   密度两档(后台"⑥ 播放器"可切):舒适 180px 起,紧凑 140px 起。 */
@media (min-width: 700px) {
  .playlist-group__scroll {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 26px;
    overflow-x: visible;
    padding: 0 var(--space-page);
  }
  .playlist-page--compact .playlist-group__scroll {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 20px;
  }
}

.playlist-groups__empty { text-align: center; padding: 60px 20px; color: var(--text-secondary); }

/* ==================== 卡片 ==================== */
/* 手机端故意露一点下一张卡的边("一屏露 2.3 个卡片暗示可滑"),用固定
   px 宽度天然做到——卡片宽度不随视口整除,最后一张永远卡在半露状态。
   桌面进了网格布局后交给 grid 分配宽度,不再需要固定 px。 */
.playlist-card {
  flex: 0 0 auto; width: 132px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
  text-align: left;
}
@media (min-width: 700px) {
  .playlist-card { width: auto; }
}

.playlist-card__cover-wrap { position: relative; width: 100%; }
/* 圆角:小卡 8px(Apple Music 真实比例),阴影分层用 tokens.css 的
   --shadow-card/--shadow-card-hover,深浅色两套值在 token 层处理好。 */
.playlist-card .cover--playlist {
  width: 100%; aspect-ratio: 1 / 1;
  border-radius: 8px;
  box-shadow: var(--shadow-card);
  transition: transform var(--dur-hover) var(--ease), box-shadow var(--dur-hover) var(--ease);
}
@media (hover: hover) {
  .playlist-card:hover .cover--playlist {
    transform: translateY(-4px);
    box-shadow: var(--shadow-card-hover);
  }
}
.playlist-card:active .cover--playlist { transform: translateY(-1px) scale(.98); }

/* hover 时中央渐显一个半透明圆形播放按钮——Apple Music 招牌交互,平时
   完全不可见(opacity:0 + pointer-events:none,不挡封面本身、也不能被
   Tab 到)。 */
.playlist-card__playbtn {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgb(0 0 0 / .5); color: #fff;
  opacity: 0; transition: opacity var(--dur-hover) var(--ease);
  pointer-events: none;
}
@media (hover: hover) {
  .playlist-card:hover .playlist-card__playbtn { opacity: 1; }
}
.playlist-card.is-playing .playlist-card__playbtn { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .playlist-card .cover--playlist,
  .playlist-fcard .cover--playlist,
  .playlist-card__playbtn { transition: none; }
  .playlist-card:hover .cover--playlist,
  .playlist-fcard:hover .cover--playlist { transform: none; }
}

.playlist-card__title {
  font-size: 14px; font-weight: 600; color: var(--text-primary);
  max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  line-height: 1.3;
}
.playlist-card__artist {
  font-size: 13px; font-weight: 400; color: var(--text-secondary);
  max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  line-height: 1.3;
  margin-top: -4px;
}
.playlist-card.is-current .playlist-card__title { color: var(--tint); }

/* ==================== 开场弹窗动画 ==================== */
/* 规格:上面音符图标(轻轻浮动),中间标语"停下来,感受音乐和生活",
   下面进度条;约 1.5s 放完淡出进页面,点一下可跳过。playlist.js 的
   runIntro() 负责收;reduced-motion 时长缩到 350ms 且音符不浮动。 */
.music-intro {
  position: fixed; inset: 0; z-index: 9998;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-page);
  opacity: 1;
  transition: opacity .45s var(--ease, ease);
}
.music-intro.is-done { opacity: 0; pointer-events: none; }
.music-intro__inner {
  display: flex; flex-direction: column; align-items: center; gap: 22px;
  padding: 0 32px;
}
.music-intro__note {
  width: 76px; height: 76px;
  border-radius: 22px;
  background: linear-gradient(145deg,
    hsl(var(--page-h, 205) 78% 62%),
    hsl(var(--page-h, 205) 82% 46%));
  box-shadow: 0 16px 40px hsl(var(--page-h, 205) 70% 50% / .35);
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  animation: music-intro-float 1.5s ease-in-out infinite;
}
.music-intro__note svg { width: 34px; height: 34px; }
@keyframes music-intro-float {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-7px) scale(1.04); }
}
.music-intro__slogan {
  margin: 0;
  font-size: 17px; font-weight: 600;
  color: var(--text-primary);
  letter-spacing: .02em;
  animation: music-intro-rise .6s var(--ease, ease) both;
}
.music-intro__bar {
  width: 168px; height: 4px; border-radius: 999px;
  background: rgb(127 127 127 / .22);
  overflow: hidden;
}
.music-intro__bar-fill {
  display: block; height: 100%; width: 0;
  border-radius: 999px;
  background: hsl(var(--page-h, 205) 76% 55%);
  animation: music-intro-fill 1.35s cubic-bezier(.4, .1, .3, 1) forwards;
}
@keyframes music-intro-fill { to { width: 100%; } }
@keyframes music-intro-rise {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .music-intro__note { animation: none; }
  .music-intro__slogan { animation: none; }
  .music-intro__bar-fill { animation-duration: .25s; }
}