/* ==========================================================================
   lyrics.css —— 仅作用于 #markly 歌词区
   其余区块完全沿用原站 style.min.css。
   ========================================================================== */

/* 原站字体（本地化复用） */
@font-face{
  font-family:"FZKai-Z03S";
  src:url("../fonts/fzkt-zy.ttf") format("truetype");
  font-weight:normal; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"SHSerifCN";
  src:url("../fonts/SourceHanSerifCN-SemiBold-zy.otf") format("opentype");
  font-weight:normal; font-style:normal; font-display:swap;
}

/* 覆盖原歌词区的灰色底，改为全屏暮色舞台 */
#markly{
  background-color:#0b1020;
  padding:0;
  position:relative;
  overflow:hidden;
  isolation:isolate;
}

/* 舞台容器：位于正常流中，随歌词长度自然增高 */
.lstage{
  position:relative;
  width:100%;
  min-height:100vh;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* 1) 背景图片层 */
.lstage__photo{
  position:absolute; inset:-4% -2%;
  z-index:0;
  background-image:url("../images/lyrics-bg.jpg");
  background-size:cover;
  background-position:center 32%;
  background-repeat:no-repeat;
  transform:scale(1.06);
  filter:saturate(1.06) contrast(1.02) brightness(.96);
  animation:lstageDrift 48s ease-in-out infinite alternate;
  will-change:transform;
}
@keyframes lstageDrift{
  from{ transform:scale(1.06) translate3d(0,0,0); }
  to  { transform:scale(1.11) translate3d(-1.6%, -1.2%, 0); }
}

/* 2) 星河 / 烟火 canvas（在图片之上、光晕之下） */
.lstage__sky{
  position:absolute; inset:0;
  z-index:1;
  width:100%; height:100%;
  display:block;
  pointer-events:none;
}

/* 3) 暮色光晕层：上下与页面同色柔和过渡 + 中部压暗提对比 */
.lstage__veil{
  position:absolute; inset:0;
  z-index:2;
  pointer-events:none;
  background:
    linear-gradient(180deg,
      #fdfdfd 0%,
      rgba(253,253,253,.86) 6%,
      rgba(253,253,253,0) 17%,
      rgba(253,253,253,0) 83%,
      rgba(253,253,253,.86) 94%,
      #fdfdfd 100%),
    linear-gradient(180deg,
      rgba(9,14,32,.34) 0%,
      rgba(9,14,32,.46) 38%,
      rgba(9,14,32,.40) 68%,
      rgba(9,14,32,.30) 100%);
}

/* 4) 内容层 */
.lstage__inner{
  position:relative;
  z-index:3;
  width:min(1000px, 92vw);
  margin:0 auto;
  padding:14vh 0 15vh;
  text-align:center;
}

.lstage__head{ margin-bottom:clamp(28px, 4.6vh, 56px); }

.ltitle{
  font-family:"SHSerifCN","FZKai-Z03S",serif;
  font-size:clamp(30px, 4.4vw, 56px);
  letter-spacing:.24em;
  text-indent:.24em;
  color:#fdfaf3;
  margin:0;
  text-shadow:0 2px 26px rgba(255,214,150,.35), 0 0 60px rgba(160,190,255,.18);
}
.lmeta{
  margin:.9em 0 0;
  font-family:"FZKai-Z03S","SHSerifCN",serif;
  font-size:clamp(12px, 1.35vw, 16px);
  letter-spacing:.16em;
  color:rgba(233,238,252,.72);
}

.llyrics{
  max-width:910px;
  margin:0 auto;
  text-align:left;
}

.lstanza{ margin-bottom:clamp(26px, 4.2vh, 52px); }
.lstanza:last-child{ margin-bottom:0; }

.lline{
  font-family:"FZKai-Z03S","SHSerifCN",serif;
  font-size:clamp(15px, 1.62vw, 22px);
  line-height:2;
  letter-spacing:.045em;
  color:rgba(240,244,255,.9);
  margin:0 0 .35em;
  opacity:0;
  transform:translateY(22px);
  filter:blur(5px);
  transition:opacity 1.05s ease, transform 1.05s cubic-bezier(.22,.61,.36,1), filter 1.05s ease, color .6s ease, text-shadow .6s ease;
}
.lline.is-in{
  opacity:1;
  transform:translateY(0);
  filter:blur(0);
}
/* 正在吟唱的一行：暖金微光 */
.lline.is-now{
  color:#ffe9c2;
  text-shadow:0 0 22px rgba(255,206,140,.55), 0 0 44px rgba(255,190,120,.25);
  transform:translateY(0) scale(1.012);
}

/* 舞台底部：播放按钮 + 均衡器 */
.lstage__foot{
  margin-top:clamp(34px, 5.4vh, 64px);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:18px;
}

.lplay{
  -webkit-appearance:none; appearance:none;
  display:inline-flex; align-items:center; gap:.7em;
  padding:.62em 1.5em .62em 1.15em;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.28);
  background:rgba(255,255,255,.08);
  color:#fbf7ef;
  font-family:"FZKai-Z03S","SHSerifCN",serif;
  font-size:15px;
  letter-spacing:.14em;
  cursor:pointer;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  box-shadow:0 10px 30px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.18);
  transition:background .35s ease, border-color .35s ease, transform .35s ease, box-shadow .35s ease;
}
.lplay:hover{
  background:rgba(255,255,255,.16);
  border-color:rgba(255,255,255,.44);
  transform:translateY(-1px);
  box-shadow:0 14px 36px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.24);
}
.lplay__ico{
  width:0; height:0;
  border-style:solid;
  border-width:7px 0 7px 12px;
  border-color:transparent transparent transparent #ffe4b8;
  transition:all .25s ease;
}
.lplay.is-playing .lplay__ico{
  width:11px; height:14px;
  border:0;
  background:linear-gradient(180deg,#ffe6bd,#f3c98a);
  border-radius:2px;
  clip-path:polygon(0 0,38% 0,38% 100%,0 100%,0 0,100% 0,100% 100%,62% 100%,62% 0,100% 0);
}

/* 均衡器：播放时呼吸起伏 */
.lviz{
  display:flex; align-items:flex-end; gap:5px;
  height:26px;
}
.lviz span{
  width:4px; height:22%;
  border-radius:3px;
  background:linear-gradient(180deg, #ffe9c2, #8fb6c9);
  opacity:.55;
  transition:height .4s ease;
}
#lstage.is-playing .lviz span{
  animation:lvizPulse 1.05s ease-in-out infinite;
  opacity:.85;
}
#lstage.is-playing .lviz span:nth-child(2){ animation-delay:.16s; }
#lstage.is-playing .lviz span:nth-child(3){ animation-delay:.32s; }
#lstage.is-playing .lviz span:nth-child(4){ animation-delay:.1s; }
#lstage.is-playing .lviz span:nth-child(5){ animation-delay:.26s; }
@keyframes lvizPulse{
  0%,100%{ height:20%; }
  50%    { height:100%; }
}

/* 播放时标题的极轻呼吸 */
#lstage.is-playing .ltitle{
  animation:ltitleBreath 5.6s ease-in-out infinite;
}
@keyframes ltitleBreath{
  0%,100%{ text-shadow:0 2px 26px rgba(255,214,150,.30), 0 0 60px rgba(160,190,255,.16); }
  50%    { text-shadow:0 2px 32px rgba(255,214,150,.52), 0 0 78px rgba(170,200,255,.26); }
}

/* 移动端 */
@media (max-width:640px){
  .lstage__photo{ background-position:center 28%; }
  .lstage__inner{ padding:11vh 0 12vh; }
  .llyrics{ text-align:center; }
  .lline{ line-height:1.95; }
  .ltitle{ letter-spacing:.18em; text-indent:.18em; }
}

/* 无障碍：尊重减弱动效 */
@media (prefers-reduced-motion: reduce){
  .lstage__photo{ animation:none; }
  .lline{ filter:none; transform:none; transition:opacity .5s ease; }
  #lstage.is-playing .lviz span,
  #lstage.is-playing .ltitle{ animation:none; }
}