/* ==========================================================================
   WARRIOR 回力 · 超暖芯 秋冬棉服 H5 音乐播放页
   视觉美学: 移动端视口自适应、纯净冷蓝渐变、经典黑胶唱片大黑边、机械唱针落针动效、细线条飘逸手写体
   ========================================================================== */

/* 1. 自定义可商用艺术字体配置 */
@font-face {
  font-family: "LikeJianJianTi";
  src: url("../assets/LikeJianJianTi-Regular-ntgt.ttf") format("truetype");
  font-display: swap;
}

:root {
  /* 渐变蓝色调 (由浅入深，纯净柔和，温暖冬日冷色系) */
  --blue-top: #d2e4fa;
  --blue-mid-1: #a2c6f1;
  --blue-mid-2: #72a1dd;
  --blue-deep: #4c7ec0;
  --blue-bottom: #29548a;

  /* 辅助色彩体系 (纯净冷白/冰蓝冷色系，契合冬日蓝色主题，绝无红色等刺眼反差色) */
  --color-white: #ffffff;
  --color-frost-white: #f5f9ff;
  --color-white-95: rgba(255, 255, 255, 0.95);
  --color-white-85: rgba(255, 255, 255, 0.85);
  --color-white-70: rgba(255, 255, 255, 0.70);
  --color-white-40: rgba(255, 255, 255, 0.40);
  --color-white-20: rgba(255, 255, 255, 0.20);
  --color-white-12: rgba(255, 255, 255, 0.12);

  --color-navy-deep: #14253c;
  --color-navy-text: #183354;

  /* 字体栈：优先使用用户 assets 目录下的专属手写体 LikeJianJianTi */
  --font-script: "LikeJianJianTi", "Long Cang", "Klee One", "Zhi Mang Xing", cursive, sans-serif;
  --font-sans: "Noto Sans SC", "Source Han Sans SC", -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-mono: "Outfit", "JetBrains Mono", SFMono-Regular, monospace;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
}

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background: linear-gradient(
    180deg,
    var(--blue-top) 0%,
    var(--blue-mid-1) 24%,
    var(--blue-mid-2) 52%,
    var(--blue-deep) 78%,
    var(--blue-bottom) 100%
  );
  overflow: hidden;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  font-family: var(--font-sans);
  color: var(--color-white);
}

/* ==========================================================================
   移动端精准适配容器 (Mobile Viewport Container)
   三段式黄金弹性空间分布，确保任何手机型号下比例自然匀称、绝无下部空洞或裁切
   ========================================================================== */
.h5-container {
  position: relative;
  width: 100%;
  max-width: 430px;
  height: 100%;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  padding: max(20px, env(safe-area-inset-top, 20px)) 20px max(24px, env(safe-area-inset-bottom, 24px));
  overflow: hidden;
  box-sizing: border-box;
}

@media (max-width: 450px) {
  .h5-container {
    box-shadow: none;
  }
}

/* 背景中央柔暖白光晕 (暖芯微发热视觉感) */
.h5-container::before {
  content: "";
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(420px, 95vw);
  height: min(420px, 95vw);
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.40) 0%,
    rgba(255, 246, 235, 0.20) 30%,
    rgba(215, 236, 255, 0.14) 55%,
    transparent 75%
  );
  pointer-events: none;
  z-index: 1;
}

/* ==========================================================================
   秋冬蓬松棉花装饰层 (Cotton & Warm Fluff Background Decor)
   ========================================================================== */
.cotton-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  overflow: hidden;
}

.cotton-item {
  position: absolute;
  filter: drop-shadow(0 6px 14px rgba(20, 48, 85, 0.18));
  pointer-events: none;
  transition: transform 0.5s ease;
}

/* 左上方棉花 */
.cotton-top-left {
  top: 36px;
  left: -8px;
  width: 82px;
  height: 76px;
  opacity: 0.92;
  animation: float-gentle 7s ease-in-out infinite alternate;
}

/* 右上方小棉花 */
.cotton-top-right {
  top: 60px;
  right: 12px;
  width: 58px;
  height: 54px;
  opacity: 0.82;
  transform: rotate(20deg);
  animation: float-sway 8.5s ease-in-out infinite alternate;
}

/* 右侧下部棉花 */
.cotton-mid-right {
  top: 62%;
  right: -8px;
  width: 76px;
  height: 72px;
  opacity: 0.88;
  transform: rotate(-12deg);
  animation: float-sway 7.5s ease-in-out infinite alternate;
}

/* 左下方棉花 */
.cotton-bottom-left {
  bottom: 85px;
  left: 14px;
  width: 66px;
  height: 62px;
  opacity: 0.82;
  transform: rotate(15deg);
  animation: float-gentle 9s ease-in-out infinite alternate-reverse;
}

.cotton-svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* 飘浮微小棉绒粒子 */
.cotton-fluff {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.7);
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.9);
  pointer-events: none;
}

.fluff-1 {
  width: 7px;
  height: 7px;
  top: 170px;
  right: 40px;
  opacity: 0.6;
  animation: fluff-move-1 9s ease-in-out infinite;
}

.fluff-2 {
  width: 10px;
  height: 10px;
  bottom: 180px;
  left: 45px;
  opacity: 0.48;
  animation: fluff-move-2 11s ease-in-out infinite;
}

.fluff-3 {
  width: 6px;
  height: 6px;
  top: 290px;
  left: 20px;
  opacity: 0.55;
  animation: fluff-move-1 8.5s ease-in-out infinite reverse;
}

.fluff-4 {
  width: 8px;
  height: 8px;
  top: 430px;
  right: 30px;
  opacity: 0.5;
  animation: fluff-move-2 10s ease-in-out infinite reverse;
}

@keyframes float-gentle {
  0% { transform: translateY(0px) rotate(0deg); }
  100% { transform: translateY(-12px) rotate(5deg); }
}

@keyframes float-sway {
  0% { transform: translateY(0px) rotate(-12deg); }
  100% { transform: translateY(14px) rotate(-5deg); }
}

@keyframes fluff-move-1 {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.45; }
  50% { transform: translate(10px, -20px) scale(1.25); opacity: 0.8; }
}

@keyframes fluff-move-2 {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.38; }
  50% { transform: translate(-12px, -26px) scale(1.2); opacity: 0.72; }
}

/* 背景轻柔微风弧线 */
.breeze-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  opacity: 0.16;
}

/* ==========================================================================
   1. 顶部：回力经典品牌F标 (Warrior Classic F Logo)
   ========================================================================== */
.brand-header {
  position: relative;
  z-index: 10;
  text-align: center;
  margin-top: 4px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.warrior-logo-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 18px;
  transition: transform 0.25s ease;
}

.warrior-logo-box:hover {
  transform: scale(1.04);
}

.warrior-f-logo {
  height: 50px;
  width: auto;
  max-width: 175px;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 3px 12px rgba(10, 35, 68, 0.42));
}

/* ==========================================================================
   2. 核心黑胶圆盘 (参考图一经典大黑边比例、图二机械唱针落针动效)
   ========================================================================== */
.vinyl-turntable-container {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  width: min(290px, 74vw, 36vh);
  height: min(290px, 74vw, 36vh);
  flex-shrink: 0;
}

/* 唱片背部暖芯微发热光晕 */
.vinyl-glow-aura {
  position: absolute;
  width: min(310px, 79vw, 38.5vh);
  height: min(310px, 79vw, 38.5vh);
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.36) 0%,
    rgba(255, 242, 225, 0.20) 45%,
    transparent 70%
  );
  pointer-events: none;
  z-index: 1;
}

/* 经典机械唱臂 / 唱针 (Tonearm - 参考图二，拟真落针交互) */
.vinyl-tonearm {
  position: absolute;
  top: -26px;
  right: min(8px, 2vw);
  width: 78px;
  height: 145px;
  z-index: 30;
  pointer-events: none;
  transform-origin: 42px 22px;
  transform: rotate(14deg); /* 暂停状态：向右抬起离开唱片 */
  transition: transform 0.65s cubic-bezier(0.34, 1.25, 0.64, 1);
  filter: drop-shadow(0 4px 10px rgba(10, 25, 45, 0.45));
}

.tonearm-svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* 播放状态：向左平滑落针至黑胶唱片音轨 */
.is-playing .vinyl-tonearm,
.vinyl-tonearm.is-playing {
  transform: rotate(-22deg);
}

/* 唱片主体盘 (参考图一尺寸与经典黑胶黑边比例) */
.vinyl-disc {
  position: relative;
  width: min(296px, 76vw, 37vh);
  height: min(296px, 76vw, 37vh);
  border-radius: 50%;
  /* 宽厚深邃黑胶槽线 (参考图一，外圈黑胶宽厚逼真) */
  background:
    repeating-radial-gradient(
      circle at center,
      #1b222d 0px,
      #141922 1.5px,
      #242d3c 3px,
      #161c26 4.5px
    );
  box-shadow:
    0 24px 54px -6px rgba(10, 28, 54, 0.60),
    0 10px 24px rgba(0, 0, 0, 0.36),
    inset 0 0 0 1px rgba(255, 255, 255, 0.22),
    inset 0 0 22px rgba(0, 0, 0, 0.90);
  cursor: pointer;
  user-select: none;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.vinyl-disc:hover {
  transform: scale(1.02);
  box-shadow:
    0 28px 60px -6px rgba(10, 28, 54, 0.66),
    0 14px 28px rgba(0, 0, 0, 0.40),
    inset 0 0 0 1px rgba(255, 255, 255, 0.32);
}

.vinyl-disc.playing {
  box-shadow:
    0 28px 62px -4px rgba(10, 28, 54, 0.70),
    0 0 38px rgba(255, 255, 255, 0.36),
    inset 0 0 0 1px rgba(255, 255, 255, 0.34),
    inset 0 0 22px rgba(0, 0, 0, 0.90);
  animation: disc-breathe 3.6s infinite ease-in-out alternate;
}

@keyframes disc-breathe {
  0% {
    box-shadow: 0 24px 54px -4px rgba(10, 28, 54, 0.62), 0 0 20px rgba(255, 255, 255, 0.24), inset 0 0 0 1px rgba(255, 255, 255, 0.26);
  }
  100% {
    box-shadow: 0 28px 64px -4px rgba(10, 28, 54, 0.74), 0 0 40px rgba(255, 255, 255, 0.44), inset 0 0 0 1px rgba(255, 255, 255, 0.40);
  }
}

/* 黑胶外圈柔光 */
.vinyl-outer-glow {
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.18) 60%, transparent 72%);
  pointer-events: none;
  z-index: 1;
}

/* 黑胶各向异性高光 */
.vinyl-reflection {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(
    from 45deg at 50% 50%,
    transparent 0deg,
    rgba(255, 255, 255, 0.13) 32deg,
    transparent 65deg,
    transparent 180deg,
    rgba(255, 255, 255, 0.13) 212deg,
    transparent 245deg
  );
  pointer-events: none;
  z-index: 2;
}

/* 旋转主体圆盘 */
.vinyl-rotating-plate {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: vinyl-spin 22s linear infinite;
  animation-play-state: paused;
}

.vinyl-disc.playing .vinyl-rotating-plate {
  animation-play-state: running;
}

@keyframes vinyl-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* 唱片中心主图区域 (参考图一比例：占整盘直径约56%，突出宽厚黑胶边框) */
.vinyl-center-label {
  position: relative;
  width: min(162px, 42vw, 20.5vh);
  height: min(162px, 42vw, 20.5vh);
  border-radius: 50%;
  overflow: hidden;
  box-shadow:
    0 0 0 2.5px rgba(255, 255, 255, 0.65),
    0 0 0 5px rgba(0, 0, 0, 0.45),
    0 0 20px rgba(0, 0, 0, 0.70);
  z-index: 3;
  background-color: #1c2e46;
}

/* 棉服主图 (无任何圆孔或遮挡) */
.cover-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* ==========================================================================
   “超暖芯”细线条手写体：精准参考图一位置与风格（细线条、飘逸连笔、静止不转）
   ========================================================================== */
.script-title-box {
  position: absolute;
  right: min(18px, 4.5vw);
  bottom: min(20px, 5vw);
  z-index: 25;
  pointer-events: none;
  transform: rotate(-6deg);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

/* 极细线条飘逸手写主标题 (使用 assets 目录下的专属手写体 LikeJianJianTi) */
.script-title-main {
  font-family: var(--font-script);
  font-size: 34px;
  font-weight: 400;
  color: #f7faff; /* 纯净冰霜月白冷色调，契合冬日蓝色 */
  letter-spacing: 0.12em;
  line-height: 1;
  user-select: none;
  /* 仅使用轻柔极细微暗影，彻底避免厚重阴影对细笔画造成晕染增粗 */
  text-shadow: 0 1px 4px rgba(10, 30, 65, 0.70);
  filter: none;
}

/* 细腻副标 —— warm core —— (类似参考图一的破折号装饰，增强艺术专辑感) */
.script-title-sub {
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-style: italic;
  font-weight: 400;
  color: rgba(225, 240, 255, 0.88);
  letter-spacing: 0.22em;
  margin-top: 4px;
  margin-right: 4px;
  text-shadow: 0 1px 6px rgba(10, 32, 65, 0.6);
  user-select: none;
}

/* ==========================================================================
   3. 极简毛玻璃控制条 (手机端下沉舒适拇指位，优雅自然)
   ========================================================================== */
.audio-controller-section {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 326px;
  margin-bottom: 6px;
  flex-shrink: 0;
}

/* 控制胶囊条 (通透毛玻璃质感) */
.player-bar-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.28);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.42);
  border-radius: 999px;
  padding: 6px 14px 6px 8px;
  box-shadow: 0 10px 28px -4px rgba(15, 38, 72, 0.32);
}

/* 播放/暂停圆形按钮 */
.main-play-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: #ffffff;
  color: var(--color-navy-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(12, 30, 58, 0.28);
  transition: transform 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
  flex-shrink: 0;
}

.main-play-btn:hover {
  transform: scale(1.06);
  background: #fbfbfb;
  box-shadow: 0 6px 16px rgba(12, 30, 58, 0.35);
}

.main-play-btn:active {
  transform: scale(0.94);
}

/* 进度条轨道 */
.progress-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
  cursor: pointer;
}

.progress-track {
  position: relative;
  width: 100%;
  height: 4.5px;
  background: rgba(255, 255, 255, 0.36);
  border-radius: 3px;
  overflow: visible;
}

.progress-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0%;
  background: #ffffff;
  border-radius: 3px;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.85);
  pointer-events: none;
}

.progress-thumb {
  position: absolute;
  top: 50%;
  left: 0%;
  transform: translate(-50%, -50%);
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.35);
  pointer-events: none;
}

.time-readout {
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
  color: var(--color-white-95);
  letter-spacing: 0.02em;
  flex-shrink: 0;
  user-select: none;
}