:root {
  color-scheme: light;
}

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

body {
  margin: 0;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text",
    "Segoe UI", sans-serif;
  background: rgb(229, 229, 235);
  color: #111827;
  min-height: 500vh; /* 给滚动过渡预留高度 */
}

/* =========================
   1. 专辑滚动首页（Scene 0）
   ========================= */

/* 整个专辑滚动页：固定在视口，作为“旧页面” */
.music-page {
  position: fixed;
  inset: 0;
  z-index: 10;
  min-height: 100vh;
  padding: 40px 0;
  display: flex;
  flex-direction: column;
  justify-content: center;  /* 两行在屏幕垂直方向居中 */
  align-items: center;      /* 水平方向居中 */
  gap: 40px;                /* 两行之间的间距 */
  overflow: hidden;         /* 不在这里滚动，滚动用 body */
}

/* 每一行专辑：宽度占满视口，超出部分裁掉 */
.album-row {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

/* 具体滚动带子：内容水平排布，间距较紧 */
.album-strip {
  display: inline-flex;
  gap: 8px;
  will-change: transform;
}

/* 单个专辑卡片 */
.album-card {
  flex: 0 0 auto;
  width: 300px;
  height: 300px;
  border-radius: 24px;
  overflow: hidden;
  background: #000000;
}

/* 图片铺满卡片 */
.album-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 上面一行：向左无限滚动 */
.album-row--top .album-strip {
  animation: scroll-left 40s linear infinite;
}

/* 下面一行：向右无限滚动 */
.album-row--bottom .album-strip {
  animation: scroll-right 40s linear infinite;
}

/* 无限左滚：strip 内容重复一遍，位移 50% 即一轮 */
@keyframes scroll-left {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

/* 无限右滚 */
@keyframes scroll-right {
  from {
    transform: translateX(-50%);
  }
  to {
    transform: translateX(0);
  }
}

/* 顶部波形按钮 */
.music-wave {
  position: absolute;
  top: 80px;
  left: 50%;
  transform: translateX(-50%);
}

/* 波形按钮本体 */
.wave-menu {
  border: 4px solid #545fe5;
  border-radius: 50px;
  width: 200px;
  height: 45px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
  cursor: pointer;
  transition: ease 0.2s;
  position: relative;
  background: #ffffff;
}

/* 单个柱子 */
.wave-menu li {
  list-style: none;
  height: 30px;
  width: 4px;
  border-radius: 10px;
  background: #545fe5;
  margin: 0 6px;
  padding: 0;
  animation-name: wave1;
  animation-duration: 0.3s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  transition: ease 0.2s;
}

/* hover 反转颜色 */
.wave-menu:hover > li {
  background: #ffffff;
}

.wave-menu:hover {
  background: #545fe5;
}

/* 不同柱子的节奏错开 */
.wave-menu li:nth-child(2) {
  animation-name: wave2;
  animation-delay: 0.2s;
}

.wave-menu li:nth-child(3) {
  animation-name: wave3;
  animation-delay: 0.23s;
  animation-duration: 0.4s;
}

.wave-menu li:nth-child(4) {
  animation-name: wave4;
  animation-delay: 0.1s;
  animation-duration: 0.3s;
}

.wave-menu li:nth-child(5) {
  animation-delay: 0.5s;
}

.wave-menu li:nth-child(6) {
  animation-name: wave2;
  animation-duration: 0.5s;
}

.wave-menu li:nth-child(8) {
  animation-name: wave4;
  animation-delay: 0.4s;
  animation-duration: 0.25s;
}

.wave-menu li:nth-child(9) {
  animation-name: wave3;
  animation-delay: 0.15s;
}

/* 几种不同波形 */
@keyframes wave1 {
  from { transform: scaleY(1); }
  to   { transform: scaleY(0.5); }
}

@keyframes wave2 {
  from { transform: scaleY(0.3); }
  to   { transform: scaleY(0.6); }
}

@keyframes wave3 {
  from { transform: scaleY(0.6); }
  to   { transform: scaleY(0.8); }
}

@keyframes wave4 {
  from { transform: scaleY(0.2); }
  to   { transform: scaleY(0.5); }
}

/* =========================
   2. 过渡蒙版 + 新页面容器（Scene 1 / Scene 2）
   ========================= */

/* 覆盖在原页面上的黑色蒙版：
   三段透明度：底部 / 中部 / 顶部，底部加黑更快，顶部更慢 */
.music-page::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 20;

  background: linear-gradient(
    to top,
    rgb(0 0 0 / var(--alpha-bottom, 0)) 0%,
    rgb(0 0 0 / var(--alpha-mid, 0))    50%,
    rgb(0 0 0 / var(--alpha-top, 0))    100%
  );

  /* 是否显示这个蒙版由 JS 控制 */
  opacity: var(--mask-opacity, 0);
}

/* 新页面：始终铺满视口，位于原页面下方 */
.container {
  position: fixed;
  inset: 0;
  z-index: 0;
  display: flex;
  flex-direction: column; /* 初始只展示 MyFavorite 按钮，垂直居中即可 */
  align-items: center;
  justify-content: center;

  /* 棋盘格深色背景（兜底） */
  background: linear-gradient(
    135deg,
    #121212 25%,
    #1a1a1a 25%,
    #1a1a1a 50%,
    #121212 50%,
    #121212 75%,
    #1a1a1a 75%,
    #1a1a1a
  );
  background-size: 40px 40px;
  animation: move 4s linear infinite;

  opacity: 0;           /* 由 JS 从 0 → 1 渐显 */
  pointer-events: none; /* 完成切换前不接收点击 */
}

/* 完成切换后允许交互 */
.container.container-active {
  pointer-events: auto;
}

/* 背景棋盘移动动画（如果视频没加载时的兜底效果） */
@keyframes move {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 40px 40px;
  }
}

/* =========================
   3. My Favorite 按钮（中心主按钮）
   ========================= */

#favoriteBtn {
  --glow-color: rgb(217, 176, 255);
  --glow-spread-color: rgba(191, 123, 255, 0.781);
  --enhanced-glow-color: rgb(231, 206, 255);
  --btn-color: rgb(100, 61, 136);

  border: .25em solid var(--glow-color);
  padding: 1em 3em;
  color: var(--glow-color);
  font-size: 24px;
  font-weight: bold;
  background-color: var(--btn-color);
  border-radius: 1em;
  outline: none;
  box-shadow:
    0 0 1em .25em var(--glow-color),
    0 0 4em 1em var(--glow-spread-color),
    inset 0 0 .75em .25em var(--glow-color);
  text-shadow: 0 0 .5em var(--glow-color);
  position: relative;
  transition: opacity 0.6s ease, box-shadow 0.3s ease;

  width: 300px;
  height: 100px;

  opacity: 0;          /* 初始不可见 */
  transform: scale(1);
  transform-origin: center center;
}

/* 地面光影 */
#favoriteBtn::after {
  pointer-events: none;
  content: "";
  position: absolute;
  top: 120%;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: var(--glow-spread-color);
  filter: blur(2em);
  opacity: .7;
  transform: perspective(1.5em) rotateX(35deg) scale(1, .6);
}

#favoriteBtn:hover {
  color: var(--btn-color);
  background-color: var(--glow-color);
  box-shadow:
    0 0 1em .25em var(--glow-color),
    0 0 4em 2em var(--glow-spread-color),
    inset 0 0 .75em .25em var(--glow-color);
}

#favoriteBtn:active {
  box-shadow:
    0 0 0.6em .25em var(--glow-color),
    0 0 2.5em 2em var(--glow-spread-color),
    inset 0 0 .5em .25em var(--glow-color);
}

/* 完全进入新页面后由 JS 加上，按钮淡入可见 */
#favoriteBtn.btn-visible {
  opacity: 1;
}

/* 出现时做一次 “略大→回到正常” 的弹跳动画 */
#favoriteBtn.btn-pop {
  animation: btn-pop 0.9s cubic-bezier(0.22, 1.28, 0.38, 1);
}

@keyframes btn-pop {
  0% {
    transform: scale(0.6);
  }
  40% {
    transform: scale(1.18);
  }
  65% {
    transform: scale(0.95);
  }
  85% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1.0);
  }
}

/* 点击后触发的“坍缩+扩展”动画 */
#favoriteBtn.btn-collapse-expand {
  position: fixed;
  left: 50%;
  top: 50%;
  z-index: 999;
  transform-origin: center center;
  animation: btn-collapse-expand 1.2s ease-in-out forwards;

  background-color: #000000 !important;
  color: transparent !important;
  box-shadow: none !important;
  text-shadow: none !important;
  border-radius: 0 !important;
}

/* 点击后光影消失动画 */
#favoriteBtn.btn-collapse-expand::after {
  animation: btn-glow-collapse 0.5s ease-in-out forwards;
}

@keyframes btn-glow-collapse {
  0% {
    opacity: .7;
  }
  100% {
    opacity: 0;
    filter: blur(1.5em);
  }
}

/* 按钮从发光 → 黑色方块(200×200) → 扩展成全屏纯黑 */
@keyframes btn-collapse-expand {
  0% {
    opacity: 1;
    width: 300px;
    height: 100px;
    border-radius: 1em;
    background-color: var(--btn-color);
    color: var(--glow-color);
    box-shadow:
      0 0 1em .25em var(--glow-color),
      0 0 4em 1em var(--glow-spread-color),
      inset 0 0 .75em .25em var(--glow-color);
    text-shadow: 0 0 .5em var(--glow-color);
    transform: translate(-50%, -50%) scale(1);
  }

  35% {
    color: transparent;
    box-shadow: 0 0 0 0 rgba(0,0,0,0);
    text-shadow: 0 0 0 rgba(0,0,0,0);
    background-color: #181818;
    transform: translate(-50%, -50%) scale(1);
  }

  60% {
    width: 200px;
    height: 200px;
    border-radius: 0;
    background-color: #000000;
    color: transparent;
    box-shadow: 0 0 0 0 rgba(0,0,0,0);
    transform: translate(-50%, -50%) scale(1);
  }

  100% {
    width: 200vmax;
    height: 200vmax;
    border-radius: 0;
    background-color: #000000;
    color: transparent;
    box-shadow: 0 0 0 0 rgba(0,0,0,0);
    transform: translate(-50%, -50%) scale(1);
  }
}

/* =========================
   4. 卡片 + 第一句歌词（Scene 1）
   ========================= */

/* 左侧卡片容器（初始在左，中间高度） */
.black-card-wrapper {
  position: absolute;
  top: 50%;
  left: 12%;
  transform: translate(0, -50%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s ease, transform 0.8s ease;
  z-index: 2;
}

/* Scene 2：进入第二个视频时，卡片从左平滑移到右侧 */
.container.scene2-active .black-card-wrapper {
  transform: translate(48vw, -50%);
}


/* 真正要出现卡片时 */
.black-card-wrapper.card-visible {
  opacity: 1;
  pointer-events: auto;
}

/* 整张卡片：正方形 650x650，可点击 */
.card {
  position: relative;
  width: 650px;
  height: 650px;
  background-color: #050505;
  border-radius: 24px;
  overflow: hidden;
  perspective: 1000px;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275),
              box-shadow 0.5s ease;
}

/* 封面图片填满卡片 */
.card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275),
              opacity 0.6s ease,
              filter 0.6s ease;
}

/* 默认状态：封面在上，文字折叠起来看不到 */
.card__content {
  position: absolute;
  inset: 0;
  padding: 32px;
  box-sizing: border-box;
  background: rgba(250, 246, 240, 0.86);
  transform-origin: bottom;
  transform: rotateX(-90deg);
  opacity: 0;
  transition: transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275),
              opacity 0.4s ease;
}

.card__title {
  margin: 0 0 16px;
  font-size: 32px;
  font-weight: 700;
  color: #000000;
}

.card__description {
  margin: 0;
  font-size: 16px;
  line-height: 1.7;
  color: #000000;
}

/* 轻微 hover 效果（没打开时） */
.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(250, 246, 240, 0.8);
}

/* 打开状态：点击后加上 .card--open */
.card.card--open {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.9);
}

.card.card--open .card__content {
  transform: rotateX(0deg);
  opacity: 1;
}

.card.card--open .card__image {
  transform: scale(1.05);
  opacity: 0.18;
  filter: blur(4px);
}

/* 右侧第一句歌词容器 */
.lyric-wrapper {
  position: absolute;
  top: 50%;
  right: 12%;
  transform: translateY(-50%) translateY(10px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 1.2s ease, transform 1.2s ease;
  z-index: 2;
}

/* 当加上 .lyric-visible 时，缓缓淡入 */
.lyric-wrapper.lyric-visible {
  opacity: 1;
  transform: translateY(-50%) translateY(0);
  pointer-events: auto;
}

.lyric-line {
  margin: 0;
  font-size: 50px;
  line-height: 2.2;
  white-space: nowrap;
  color: rgb(254, 249, 205);
}

/* 单个字：可独立上浮 */
.lyric-char {
  display: inline-block;
  color: rgb(254, 249, 205);
  font-weight: 700;
  transition: transform 0.35s ease, text-shadow 0.35s ease;
}

/* 引号 */
.lyric-quote {
  display: inline-block;
  font-size: 40px;
  color: rgb(254, 249, 205);
  margin: 0 8px;
  vertical-align: middle;
  font-weight: 400;
}

/* 鼠标触碰某个字：中心字上浮距离大一点 */
.lyric-char--center-hover {
  transform: translateY(-10px);
  text-shadow: 0 10px 18px rgba(254, 249, 205, 0.55);
}

/* 左右相邻两个字：上浮距离小一点 */
.lyric-char--adjacent-hover {
  transform: translateY(-5px);
  text-shadow: 0 8px 14px rgba(254, 249, 205, 0.4);
}

/* =========================
   5. 背景视频（Scene 1 & Scene 2）
   ========================= */

/* 两个视频容器统一处理 */
.bg-video-wrapper,
.bg-video-wrapper-2 {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  opacity: 0;
  transition: opacity 1s ease;
  pointer-events: none;
}

/* 被标记为 video-visible 时淡入显示 */
.bg-video-wrapper.video-visible,
.bg-video-wrapper-2.video-visible {
  opacity: 1;
}

/* 视频本身铺满容器 */
.bg-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* =========================
   6. 两个页面的箭头按钮
   ========================= */

/* 底部中间的小箭头容器，公共样式 */
.scroll-arrow {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 30;
}

/* 专辑滚动页的箭头：一直可见 */
.music-page > .scroll-arrow {
  opacity: 1;
  pointer-events: auto;
}

/* 卡片页（container 里的）箭头：默认隐藏 */
.container .scroll-arrow {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
}

/* 当进入“卡片 + 第一句歌词”阶段时，由 JS 加 .cards-stage1 */
.container.cards-stage1 .scroll-arrow {
  opacity: 1;
  pointer-events: auto;
}

/* 圆形按钮本体 */
.button {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: rgb(20, 20, 20);
  border: none;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0px 0px 0px 4px rgba(180, 160, 255, 0.253);
  cursor: pointer;
  transition-duration: 0.3s;
  overflow: hidden;
  position: relative;
}

/* 箭头图标：默认朝下 */
.svgIcon {
  width: 12px;
  transition-duration: 0.3s;
  transform: rotate(180deg); /* SVG 路径原本朝上，旋转 180° 朝下 */
}

.svgIcon path {
  fill: white;
}

/* hover 时展开为胶囊并上移箭头 */
.button:hover {
  width: 140px;
  border-radius: 50px;
  transition-duration: 0.3s;
  background-color: rgb(181, 160, 255);
  align-items: center;
}

.button:hover .svgIcon {
  transition-duration: 0.3s;
  transform: rotate(180deg) translateY(-200%);
}

/* hover 前后显示的文字 */
.button::before {
  position: absolute;
  bottom: -20px;
  content: "learn more";
  color: white;
  font-size: 0px; /* 默认隐藏 */
}

.button:hover::before {
  font-size: 13px;
  opacity: 1;
  bottom: unset;
  transition-duration: 0.3s;
}

/* =========================
   7. 场景 2：上滑 + 第二句歌词
   ========================= */

/* 给要上滑的层加上这个类 */
/* 场景2：视频和歌词分别用不同的上滑动画 */

/* 视频容器：从 0 → -120% 上滑 */
.bg-video-wrapper.scene2-slide-up {
  animation: scene2-video-up 1.2s ease-in forwards;
}

/* 第一句歌词容器：在保持 top:50% + translateY(-50%) 的基础上往上飞 */
.lyric-wrapper.scene2-slide-up {
  animation: scene2-lyric-up 1.2s ease-in forwards;
}

/* 视频上滑动画 */
@keyframes scene2-video-up {
  from {
    transform: translateY(0);
    opacity: 1;
  }
  to {
    transform: translateY(-120%);
    opacity: 0;
  }
}

/* 歌词上滑动画：起点就是你当前的居中位置，终点再往上飞一大段 */
@keyframes scene2-lyric-up {
  from {
    transform: translateY(-50%) translateY(0);      /* 等价于居中位置 */
    opacity: 1;
  }
  to {
    transform: translateY(-50%) translateY(-120%);  /* 在此基础上再往上飞 */
    opacity: 0;
  }
}



/* 左侧第二句歌词，初始不可见 */
.lyric-wrapper-second {
  position: absolute;
  top: 50%;
  left: 12%;   /* 与卡片原本 left:12% 对称 */
  transform: translateY(-50%);
  opacity: 0;
  pointer-events: none;
  z-index: 2;
  transition: opacity 1.2s ease, transform 1.2s ease;
}

/* 场景2激活后淡入显示 */
.container.scene2-active .lyric-wrapper-second {
  opacity: 1;
}

/* 第二句整行样式（PC 默认更大一些） */
.second-lyric-line {
  margin: 0;
  font-size: 48px;
  font-weight: 700;
  white-space: nowrap;
  color: rgb(224, 193, 104);
}

/* 如果第二句用 span.lyric-char + 引号，可以复用动画效果 */
.lyric-wrapper-second .lyric-char,
.lyric-wrapper-second .lyric-quote {
  color: rgb(224, 193, 104);
}


/* =========================
   8. 响应式：手机端适配
   ========================= */

@media (max-width: 768px) {

  /* 首页：整体从顶部开始排，给 wave 预留空间 */
  .music-page {
    justify-content: flex-start;
    padding-top: 120px;
    padding-bottom: 32px;
    gap: 24px;
  }

  .music-wave {
    top: 16px;
  }

  /* 手机端缩小专辑卡片，让两行更容易都出现在一屏里 */
  .album-card {
    width: 38vw;
    height: 38vw;
    border-radius: 16px;
  }

  /* 黑色页面内纵向排，整体居中 */
  .container {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 16px;
  }

  /* 第一场景：卡片 + 第一行歌词，出现后改为上下布局 */
  .black-card-wrapper.card-visible,
  .lyric-wrapper.lyric-visible {
    position: static;
    top: auto;
    left: auto;
    right: auto;
    transform: none;
    text-align: center;
  }

  .black-card-wrapper.card-visible {
    margin-bottom: 48px;
  }

  .card {
    width: 82vw;
    height: 82vw;
    max-width: 420px;
    max-height: 420px;
    border-radius: 20px;
  }

  .card__content {
    padding: 20px;
  }

  .lyric-line {
    font-size: 20px;
    line-height: 1.6;
    text-align: center;
  }

  /* 场景 2：手机端让卡片和第二句歌词亦上下排布 */
  .container.scene2-active {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 16px;
  }

  .container.scene2-active .black-card-wrapper,
  .container.scene2-active .lyric-wrapper-second {
    position: static;
    transform: none;
    text-align: center;
  }

  .container.scene2-active .black-card-wrapper {
    margin-bottom: 32px;
  }

  .second-lyric-line {
    font-size: 22px;
    line-height: 1.7;
  }

  /* 场景2中的箭头固定在底部中间 */
  .container.scene2-active .scroll-arrow {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
  }
}

/* =========================
   9. 宽屏适配（>=1200px）
   ========================= */

@media (min-width: 1200px) {

  /* 首页：缩小专辑封面，不要太占屏 */
  .music-page {
    padding: 32px 0;
    gap: 28px;
  }

  .album-card {
    width: 240px;
    height: 240px;
    border-radius: 20px;
  }

  .album-strip {
    gap: 6px;
  }

  .music-wave {
    top: 64px;
  }

  /* Scene 1：卡片 + 第一行歌词整体略微缩小 */
  .black-card-wrapper {
    left: 8%;
  }

  .lyric-wrapper {
    right: 8%;
  }

  .card {
    width: 520px;
    height: 520px;
    border-radius: 22px;
  }

  .card__content {
    padding: 28px;
  }

  .card__title {
    font-size: 26px;
  }

  .card__description {
    font-size: 15px;
    line-height: 1.6;
  }

  .lyric-line {
    font-size: 32px;
    line-height: 2.0;
  }

  .lyric-quote {
    font-size: 36px;
  }

  /* Scene 2：PC 布局下卡片右侧 / 第二句歌词左侧对称 */
  

  .container.scene2-active .lyric-wrapper-second {
    left: 10%;
  }

  .second-lyric-line {
    font-size: 36px;
    line-height: 2.0;
  }
}

/* =========================
   10. 超宽屏适配（>=1600px，4K 等级）
   ========================= */

@media (min-width: 1600px) {

  /* Scene 1：卡片再大一点，文字再大一点，距离稍微拉开 */
  .black-card-wrapper {
    left: 12%;
  }

  .lyric-wrapper {
    right: 12%;
  }

  .card {
    width: 620px;
    height: 620px;
    border-radius: 24px;
  }

  .lyric-line {
    font-size: 40px;
    line-height: 2.0;
  }

  .lyric-quote {
    font-size: 48px;
  }

  /* Scene 2：保持对称，字体更大一些 */
  

  .container.scene2-active .lyric-wrapper-second {
    left: 10%;
  }

  .second-lyric-line {
    font-size: 40px;
  }
}