/* 页面初始加载动画 */
@keyframes music-bar {
  0%, 100% { height: 10px; }
  50% { height: 35px; }
}

@keyframes pulse {
  0%, 100% { opacity: 1; text-shadow: 0 0 10px rgba(59, 130, 246, 0.4); }
  50% { opacity: .5; text-shadow: none; }
}

/* 恢复全局滚动，以便移动端/平板浏览器能够自动隐藏地址栏 */
html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  overflow-x: hidden;
}

/* 隐藏滚动条但保留滚动功能 */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* 页面统一定制的滚动条 */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.1); border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.2); }
html.dark ::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); }
html.dark ::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.2); }

/* Y轴遮罩淡出效果（常用于歌词） */
.mask-image-y {
  mask-image: linear-gradient(to bottom, transparent, black 15%, black 85%, transparent);
  -webkit-mask-image: linear-gradient(to bottom, transparent, black 15%, black 85%, transparent);
}

/* 旋转动画 */
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* 音乐频谱动画 */
@keyframes music-bar {
  0%, 100% { height: 20%; }
  50% { height: 100%; }
}

/* 黑胶纹理 */
.vinyl-grooves {
  background: repeating-radial-gradient(
    #111 0px,
    #111 3px,
    #1a1a1a 4px,
    #1a1a1a 5px
  );
}
 /* 以下为全新的水波纹与随机光晕效果 */
/* 波纹向外扩散扩散动画 (专为底部横条设计) */
@keyframes bar-wave-ripple {
  0% { transform: translate(-50%, -50%) scale(1, 1); opacity: 0.4; }
  100% { transform: translate(-50%, -50%) scale(1.05, 1.6); opacity: 0; }
}

@keyframes bar-wave-ripple-2 {
  0% { transform: translate(-50%, -50%) scale(1, 1); opacity: 0.3; }
  100% { transform: translate(-50%, -50%) scale(1.02, 1.3); opacity: 0; }
}

@keyframes float-orb-1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(30%, -20%) scale(1.2); }
  66% { transform: translate(-20%, 30%) scale(0.9); }
}

@keyframes float-orb-2 {
  0%, 100% { transform: translate(0, 0) scale(1.2); }
  33% { transform: translate(-30%, 20%) scale(0.8); }
  66% { transform: translate(30%, -30%) scale(1.1); }
}

@keyframes float-orb-3 {
  0%, 100% { transform: translate(0, 0) scale(0.9); }
  33% { transform: translate(20%, 30%) scale(1.2); }
  66% { transform: translate(-30%, -10%) scale(1.1); }
}

/* 跑馬燈動画 */
@keyframes marquee {
  0% { transform: translateX(0%); }
  100% { transform: translateX(-50%); }
}

/* Skeleton Loading */
@keyframes skeleton-loading {
    0% { background-color: #f3f4f6; }
    50% { background-color: #e5e7eb; }
    100% { background-color: #f3f4f6; }
}
.dark .skeleton {
    animation: skeleton-loading-dark 1.5s infinite;
}
@keyframes skeleton-loading-dark {
    0% { background-color: #27272a; }
    50% { background-color: #3f3f46; }
    100% { background-color: #27272a; }
}
.skeleton {
    animation: skeleton-loading 1.5s infinite;
    color: transparent;
}

/* Bouncy Animations */
@keyframes bouncy-in {
  0% { transform: scale(0.9) translateY(20px); opacity: 0; }
  60% { transform: scale(1.02) translateY(-5px); opacity: 1; }
  100% { transform: scale(1) translateY(0); opacity: 1; }
}
.animate-bouncy-in {
  animation: bouncy-in 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}