/* ============================================================
   50-misc.css
   杂项：footer / aplayer / scrollbar / selection / 全局动画 keyframes /
   降级 prefers-reduced-motion / 移动端字号
   依赖: 00-tokens.css
   ============================================================ */

/* ========================================
   页脚
   ======================================== */
#footer {
  background: rgba(13, 17, 23, 0.85) !important;
  border-top: 1px solid;
  border-color: rgba(48, 54, 61, 0.6) !important;
  color: var(--text-2) !important;
}

#footer a {
  color: var(--accent) !important;
}

#footer a:hover {
  color: var(--accent-strong) !important;
}

/* ========================================
   播放器 aplayer
   ======================================== */
.aplayer {
  border: 1px solid;
  border-radius: 12px;
  background: rgba(22, 27, 34, 0.85) !important;
  border-color: rgba(48, 54, 61, 0.6) !important;
}

.aplayer .aplayer-info {
  color: var(--text-1) !important;
}

.aplayer .aplayer-info .aplayer-music .aplayer-title {
  color: var(--text-0) !important;
}

.aplayer .aplayer-info .aplayer-music .aplayer-author {
  color: var(--text-2) !important;
}

/* 歌单列表 */
.aplayer .aplayer-list ol li {
  background: rgba(22, 27, 34, 0.9) !important;
  border-color: rgba(48, 54, 61, 0.4) !important;
}

.aplayer .aplayer-list ol li:hover {
  background: rgba(30, 37, 46, 0.95) !important;
}

.aplayer .aplayer-list ol li.aplayer-list-light {
  background: rgba(224, 139, 168, 0.12) !important;
}

/* 歌曲名 */
.aplayer .aplayer-list ol li .aplayer-list-title {
  color: var(--accent) !important;
}

/* 歌手名 */
.aplayer .aplayer-list ol li .aplayer-list-author {
  color: var(--accent) !important;
}

/* 当前播放歌曲名 */
.aplayer .aplayer-list ol li.aplayer-list-light .aplayer-list-title {
  color: var(--accent) !important;
}

/* 当前播放歌手 */
.aplayer .aplayer-list ol li.aplayer-list-light .aplayer-list-author {
  color: var(--accent) !important;
}

/* 序号 */
.aplayer .aplayer-list ol li .aplayer-list-index {
  color: var(--text-2) !important;
}

/* 时长 */
.aplayer .aplayer-list ol li .aplayer-list-time {
  color: var(--text-2) !important;
}

/* 歌单滚动条 */
.aplayer .aplayer-list ol::-webkit-scrollbar-thumb {
  background: rgba(240, 168, 191, 0.4);
  border-radius: 4px;
}

/* 歌单头部 */
.aplayer .aplayer-list-header {
  background: rgba(22, 27, 34, 0.95) !important;
  color: var(--text-0) !important;
}

/* ========================================
   滚动条
   ======================================== */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(224, 139, 168, 0.6), rgba(210, 168, 255, 0.6));
  border-radius: 8px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, rgba(224, 139, 168, 0.9), rgba(210, 168, 255, 0.9));
  background-clip: padding-box;
}

/* 滚动条透明轨道 */
::-webkit-scrollbar-track {
  background: transparent;
}

/* ========================================
   选中文字
   ======================================== */
::selection {
  background: rgba(224, 139, 168, 0.35);
  color: #fff;
}

/* ========================================
   全局动画 keyframes
   ======================================== */
@keyframes scrollArrow {
  0%, 100% { bottom: 32px; opacity: 0.7; }
  50% { bottom: 24px; opacity: 1; }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes bgBreath {
  0%   { transform: scale(1.00) translate3d(0, 0, 0); }
  100% { transform: scale(1.035) translate3d(-0.6%, -0.4%, 0); }
}

@keyframes beamDrift {
  from { opacity: 0.85; }
  to   { opacity: 1; }
}

@keyframes cardFadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes avatarGlow {
  from { box-shadow:
    0 0 0 3px rgba(240, 168, 191, 0.5),
    0 0 18px rgba(240, 168, 191, 0.3),
    0 8px 20px rgba(0, 0, 0, 0.35); }
  to   { box-shadow:
    0 0 0 3px rgba(247, 120, 186, 0.5),
    0 0 28px rgba(210, 168, 255, 0.5),
    0 8px 20px rgba(0, 0, 0, 0.35); }
}

@keyframes titleFloat {
  from { transform: translate(-50%, -50%) translateY(0); }
  to   { transform: translate(-50%, -50%) translateY(-6px); }
}

/* ========================================
   降级 / 移动端
   ======================================== */

/* reduce-motion 关闭动画 */
@media (prefers-reduced-motion: reduce) {
  body::before, body::after { animation: none !important; }
  #bg-particles { display: none; }
}

/* 移动端减负：去 canvas，动画慢一档，标题字号缩放 */
@media (max-width: 768px) {
  #bg-particles { display: none; }
  body::before { animation-duration: 40s; }
  body::after { animation-duration: 24s; }
  .page-home #header-title h1 {
    font-size: 2.4rem !important;
    letter-spacing: 3px !important;
  }
  .page-home #header-title #subtitle,
  .page-home #header-title #subtitle span {
    font-size: 0.95rem !important;
  }
}