/* ===================================================================
   ========================== Theme Config ============================
   ===================================================================
   所有可调视觉效果集中在这里。修改下面的变量即可调整外观，
   无需翻阅下方代码。
   =================================================================== */

:root {
  /* ---- 专辑尺寸 ---- */
  --album-size: clamp(220px, 28vw, 360px);

  /* ---- 旋转速度（一圈用时） ---- */
  --rotation-speed: 20s;

  /* ---- 背景 ---- */
  --background-color: #111111;

  /* ---- 专辑描边 ---- */
  --album-border-width: 2px;
  --album-border-color: rgba(255, 255, 255, 0.12);

  /* ---- 阴影 ---- */
  --shadow-size: 40px;
  --shadow-opacity: 0.35;

  /* ---- 暂停时专辑透明度 ---- */
  --paused-opacity: 0.65;

  /* ---- 过渡动画时长 ---- */
  --transition-duration: 0.35s;

  /* ---- 背景遮罩（有背景图时） ---- */
  --overlay-color: rgba(0, 0, 0, 0.35);

  /* ---- 页面淡入 ---- */
  --page-fade-duration: 0.8s;
}

/* ---------- Light 主题 ---------- */
[data-theme="light"] {
  --background-color: #f5f5f5;
  --album-border-color: rgba(0, 0, 0, 0.15);
  --overlay-color: rgba(255, 255, 255, 0.15);
}


/* ===================================================================
   ======================== Global Reset ==============================
   =================================================================== */

*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  /* 禁止文本选择 */
  user-select: none;
  -webkit-user-select: none;
}


/* ===================================================================
   ========================= Page Container ===========================
   =================================================================== */

#app {
  position: relative;
  width: 100vw;
  height: 100vh;
  background-color: var(--background-color);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color var(--transition-duration) ease;
}

/* ---- 背景图片（可选） ---- */
#app.has-bg {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* ---- 背景遮罩层 ---- */
#app.has-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--overlay-color);
  pointer-events: none;
}

/* ---- 所有内容在遮罩之上 ---- */
#app > * {
  position: relative;
  z-index: 1;
}


/* ===================================================================
   ========================= Album Cover ==============================
   =================================================================== */

.album {
  position: relative;
  width: var(--album-size);
  height: var(--album-size);
  border-radius: 50%;
  cursor: pointer;
  /* 悬浮阴影 — 类似唱片浮起效果 */
  filter: drop-shadow(0 calc(var(--shadow-size) * 0.5) var(--shadow-size)
          rgba(0, 0, 0, var(--shadow-opacity)));
  /* 过渡：旋转、透明度、缩放 */
  transition:
    opacity var(--transition-duration) ease,
    transform var(--transition-duration) cubic-bezier(0.34, 1.56, 0.64, 1),
    filter var(--transition-duration) ease;
  -webkit-tap-highlight-color: transparent;
  outline: none;
}

/* ---- 聚焦状态（键盘操作时可见） ---- */
.album:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.5);
  outline-offset: 4px;
}

.album-cover {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  /* 描边 — 模拟唱片边缘 */
  border: var(--album-border-width) solid var(--album-border-color);
  /* 禁止拖拽 */
  -webkit-user-drag: none;
  pointer-events: none;
}


/* ===================================================================
   ====================== Rotation Animation ==========================
   =================================================================== */

.album.spinning {
  animation: spin var(--rotation-speed) linear infinite;
}

@keyframes spin {
  from { rotate: 0deg; }
  to   { rotate: 360deg; }
}


/* ===================================================================
   ======================= Play / Pause States ========================
   =================================================================== */

/* ---- 暂停状态 ---- */
.album.paused {
  opacity: var(--paused-opacity);
}

/* ---- 播放状态（恢复） ---- */
.album.playing {
  opacity: 1;
}


/* ===================================================================
   ====================== Loading State ===============================
   =================================================================== */

.album.loading {
  opacity: 0.5;
  cursor: default;
}


/* ===================================================================
   ====================== Hover (PC only) =============================
   =================================================================== */

@media (hover: hover) {
  .album:hover {
    transform: scale(1.02);
    filter: drop-shadow(0 calc(var(--shadow-size) * 0.6) calc(var(--shadow-size) * 1.2)
            rgba(0, 0, 0, calc(var(--shadow-opacity) * 1.3)));
  }

  .album:hover .album-cover {
    border-color: rgba(255, 255, 255, 0.25);
  }

  [data-theme="light"] .album:hover .album-cover {
    border-color: rgba(0, 0, 0, 0.25);
  }
}


/* ===================================================================
   ====================== Click Feedback ==============================
   =================================================================== */

.album.press {
  transform: scale(0.96);
  transition-duration: 0.1s;
}


/* ===================================================================
   ====================== Page Fade-in ================================
   =================================================================== */

.page-fade-in {
  opacity: 0;
  animation: pageFadeIn var(--page-fade-duration) ease forwards;
}

@keyframes pageFadeIn {
  from {
    opacity: 0;
    transform: scale(0.96);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}


/* ===================================================================
   ====================== Default Album (no image fallback) ===========
   =================================================================== */

.album-cover.fallback {
  background: #333;
  border-color: #555;
}