:root {
  --bg: #0a0608;
  --fg: #ede3cf;
  --dim: rgba(237,227,207,0.30);
  --done: rgba(237,227,207,0.55);
  --hi: #f5c77e;
  --hi-glow: rgba(212,115,42,0.7);
  --accent: #4fa8b5;
  --line: rgba(237,227,207,0.08);
  --pump-period: 2.18s;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; background: var(--bg); color: var(--fg);
  font-family: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased; }

/* === Cinema mode (?cinema=1) === */
body.cinema { cursor: none !important; }
body.cinema #title,
body.cinema #hud,
body.cinema #controls { display: none !important; }
body.cinema #stage { cursor: none !important; }
body.cinema #lyrics { padding-bottom: 7vh; }

#stage {
  position: fixed; inset: 0;
  background: #000;
  cursor: pointer;
  overflow: hidden;
  perspective: 1200px;
}

.bg-blur {
  position: absolute; inset: -8%;
  background-size: cover;
  background-position: center;
  filter: blur(48px) brightness(0.42) saturate(1.35);
  opacity: 0;
  transition: opacity 0.9s ease-in-out;
  z-index: 0;
  will-change: opacity;
}
.bg-blur.show { opacity: 1; }

.frame-slot {
  position: absolute; inset: 0;
  opacity: 0;
  z-index: 1;
  will-change: opacity, transform, clip-path, filter;
  display: flex;
  align-items: center;
  justify-content: center;
}
.frame-slot.show { opacity: 1; }

.frame-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  background: transparent;
  will-change: transform;
  transform-origin: center center;
}

.frame-img.kb0 { animation: kb-zoom-in   var(--dur,4s) ease-out forwards; }
.frame-img.kb1 { animation: kb-zoom-out  var(--dur,4s) ease-in  forwards; }
.frame-img.kb2 { animation: kb-pan-r     var(--dur,4s) linear   forwards; }
.frame-img.kb3 { animation: kb-pan-l     var(--dur,4s) linear   forwards; }
.frame-img.kb4 { animation: kb-pan-d     var(--dur,4s) linear   forwards; }
.frame-img.kb5 { animation: kb-pan-u     var(--dur,4s) linear   forwards; }
.frame-img.kb6 { animation: kb-zoom-tl   var(--dur,4s) ease-out forwards; }
.frame-img.kb7 { animation: kb-zoom-br   var(--dur,4s) ease-out forwards; }

@keyframes kb-zoom-in   { from { transform: scale(1.00); }
                          to   { transform: scale(1.07); } }
@keyframes kb-zoom-out  { from { transform: scale(1.07); }
                          to   { transform: scale(1.00); } }
@keyframes kb-pan-r     { from { transform: scale(1.05) translate(-1.5%, 0); }
                          to   { transform: scale(1.05) translate( 1.5%, 0); } }
@keyframes kb-pan-l     { from { transform: scale(1.05) translate( 1.5%, 0); }
                          to   { transform: scale(1.05) translate(-1.5%, 0); } }
@keyframes kb-pan-d     { from { transform: scale(1.05) translate(0, -1.5%); }
                          to   { transform: scale(1.05) translate(0,  1.5%); } }
@keyframes kb-pan-u     { from { transform: scale(1.05) translate(0,  1.5%); }
                          to   { transform: scale(1.05) translate(0, -1.5%); } }
@keyframes kb-zoom-tl   { from { transform: scale(1.00) translate(0, 0); }
                          to   { transform: scale(1.07) translate( 1.5%,  1.5%); } }
@keyframes kb-zoom-br   { from { transform: scale(1.00) translate(0, 0); }
                          to   { transform: scale(1.07) translate(-1.5%, -1.5%); } }

/* fade-in animations (fade-out handled by JS WAAPI for cross-fade) */
/* 2026-07-30: 淡入時間必須與 mv_player.js 的 TRANS_MS 表逐項對齊 —— 兩邊脫鉤就不是交叉淡入。
   同時整體拉長: 靜態圖沒有動態承接剪點, 短淡入看起來就是「圖被換掉」而不是「畫面流過去」。 */
.frame-slot.t-fade.show       { animation: t-fade 1.2s ease-in-out forwards; }
.frame-slot.t-fade-slow.show  { animation: t-fade 2.2s ease-in-out forwards; }
.frame-slot.t-fade-fast.show  { animation: t-fade 0.65s ease-in-out forwards; }
.frame-slot.t-cut.show        { animation: t-fade 0.35s linear forwards; }
/* 2026-07-30 真正的硬切。原有 t-cut 是 0.35s 淡入, 對「同一時刻的反應鏡頭」和「同機位
   前後對照」來說太柔 —— 那兩種剪點要的是時間重擊, 柔轉場會把它變成情緒延續。60ms 幾乎
   等於瞬切, 但仍留一格避免 WAAPI cross-fade 收尾時閃黑。 */
.frame-slot.t-hardcut.show    { animation: t-fade 0.06s linear forwards; }
.frame-slot.t-iris.show       { animation: t-iris 0.85s cubic-bezier(.5,0,.3,1) forwards; }
.frame-slot.t-zoom-blur.show  { animation: t-zoom-blur 0.7s ease-out forwards; }
.frame-slot.t-slide-l.show    { animation: t-slide-l 0.55s cubic-bezier(.3,.7,.2,1) forwards; }
.frame-slot.t-slide-r.show    { animation: t-slide-r 0.55s cubic-bezier(.3,.7,.2,1) forwards; }
.frame-slot.t-slide-u.show    { animation: t-slide-u 0.55s cubic-bezier(.3,.7,.2,1) forwards; }
.frame-slot.t-slide-d.show    { animation: t-slide-d 0.55s cubic-bezier(.3,.7,.2,1) forwards; }
.frame-slot.t-fade-black.show { animation: t-fade 1.4s ease-in 0.2s forwards; }
.frame-slot.t-flash.show      { animation: t-flash 0.45s ease-out forwards; }
.frame-slot.t-tilt.show       { animation: t-tilt 0.7s cubic-bezier(.3,.7,.2,1) forwards; }

@keyframes t-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes t-iris {
  0%   { opacity: 1; clip-path: circle(0% at 50% 50%); }
  100% { opacity: 1; clip-path: circle(150% at 50% 50%); }
}
@keyframes t-zoom-blur {
  from { opacity: 0; filter: blur(18px); transform: scale(1.18); }
  to   { opacity: 1; filter: blur(0);    transform: scale(1.0); }
}
@keyframes t-slide-l {
  from { opacity: 0; transform: translateX( 6%); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes t-slide-r {
  from { opacity: 0; transform: translateX(-6%); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes t-slide-u {
  from { opacity: 0; transform: translateY( 6%); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes t-slide-d {
  from { opacity: 0; transform: translateY(-6%); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes t-flash {
  0%   { opacity: 0; filter: brightness(2.2); }
  35%  { opacity: 1; filter: brightness(1.4); }
  100% { opacity: 1; filter: brightness(1.0); }
}
@keyframes t-tilt {
  from { opacity: 0; transform: rotate(-2deg) scale(1.04); }
  to   { opacity: 1; transform: rotate(0)     scale(1.00); }
}

/* sidechain pump — period set via --pump-period per song */
#stage::before {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(212,115,42,0.05) 0%, transparent 70%);
  mix-blend-mode: screen;
  animation: pump var(--pump-period) ease-in-out infinite;
  z-index: 4;
}
@keyframes pump {
  0%, 100% { opacity: 0.25; }
  50% { opacity: 0.6; }
}

#stage::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,0.45) 100%),
    repeating-linear-gradient(0deg, rgba(255,255,255,0.010) 0px, rgba(255,255,255,0.010) 1px, transparent 1px, transparent 2px);
  z-index: 5;
}

#lyrics {
  position: fixed; left: 0; right: 0; bottom: 0;
  padding: 0 5vw 5vh;
  display: flex; flex-direction: column; justify-content: flex-end;
  align-items: center;
  z-index: 6;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(10,6,8,0.0) 55%,
    rgba(10,6,8,0.55) 100%);
  pointer-events: none;
  text-align: center;
}
.line {
  display: block;
  margin: 0.18em 0;
  line-height: 1.4;
  transition: opacity 0.4s, transform 0.4s, font-size 0.4s, color 0.4s, filter 0.4s;
  pointer-events: auto;
  max-width: 92vw;
  white-space: nowrap;
  letter-spacing: 0.04em;
  text-shadow:
    0 0 16px rgba(0,0,0,0.95),
    0 0 4px rgba(0,0,0,0.95),
    0 1px 2px rgba(0,0,0,0.95);
}
.line.prev { opacity: 0.30; font-size: 16px; color: var(--done); transform: translateY(-4px); }
.line.cur  { opacity: 1;    font-size: 32px; color: var(--fg);  transform: translateY(0);
             font-weight: 700; }
.line.cur.hook { color: var(--hi);
             text-shadow: 0 0 22px var(--hi-glow), 0 0 8px rgba(245,199,126,0.5),
                          0 0 4px rgba(0,0,0,0.95), 0 1px 2px rgba(0,0,0,0.95); }
.line.cur.final { color: var(--fg); font-size: 38px; letter-spacing: 0.10em;
             text-shadow: 0 0 28px var(--hi-glow), 0 0 10px rgba(79,168,181,0.35),
                          0 0 6px rgba(0,0,0,0.95), 0 1px 2px rgba(0,0,0,0.95); }
.line.next { opacity: 0.30; font-size: 16px; color: var(--dim); transform: translateY(4px); }
.line.section { opacity: 0.55; font-size: 12px; color: var(--accent);
             letter-spacing: 0.5em; text-transform: uppercase; font-weight: 500;
             text-shadow: 0 0 8px rgba(0,0,0,0.95); }
.line.cur.section { opacity: 0.85; font-size: 14px; color: var(--accent);
             letter-spacing: 0.5em; text-transform: uppercase; font-weight: 500;
             text-shadow: 0 0 12px rgba(79,168,181,0.45), 0 0 4px rgba(0,0,0,0.95); }

.word {
  display: inline-block;
  padding: 0 1px;
  transition: color 0.18s, text-shadow 0.2s, filter 0.2s;
  cursor: pointer;
  pointer-events: auto;
}
.word.cur {
  color: var(--hi);
  text-shadow: 0 0 18px var(--hi-glow), 0 0 6px rgba(245,199,126,0.5),
               0 0 4px rgba(0,0,0,0.95);
  filter: brightness(1.18);
}

#hud {
  position: fixed; top: 12px; right: 12px;
  z-index: 10;
  font-family: "JetBrains Mono", "Consolas", monospace;
  font-size: 10px; color: var(--dim);
  background: rgba(10,6,8,0.5);
  padding: 5px 9px;
  border: 1px solid var(--line);
  border-radius: 4px;
  backdrop-filter: blur(8px);
  letter-spacing: 0.06em;
}
#hud .t { color: var(--hi); }

#title {
  position: fixed; top: 12px; left: 12px;
  z-index: 10;
  background: rgba(10,6,8,0.5);
  padding: 7px 13px;
  border: 1px solid var(--line);
  border-radius: 4px;
  backdrop-filter: blur(8px);
  font-size: 12px;
  letter-spacing: 0.06em;
}
#title .main { font-weight: 700; color: var(--fg); }
#title .sub { font-size: 9px; color: var(--dim); margin-top: 2px;
              letter-spacing: 0.18em; text-transform: uppercase;
              font-family: "JetBrains Mono", monospace; }

#controls {
  position: fixed; bottom: 0; left: 0; right: 0;
  z-index: 8;
  background: linear-gradient(180deg, transparent 0%, rgba(10,6,8,0.92) 100%);
  padding: 14px 16px 12px;
  display: flex; align-items: center; gap: 12px;
  font-family: "JetBrains Mono", "Consolas", monospace;
  font-size: 11px; color: var(--dim);
  transition: opacity 0.4s, transform 0.4s;
}
#controls.hidden { opacity: 0; transform: translateY(100%); pointer-events: none; }
#controls button {
  background: transparent; border: 1px solid var(--line); color: var(--dim);
  padding: 5px 10px; border-radius: 4px; cursor: pointer; font-size: 11px;
  font-family: inherit; transition: color 0.2s, border-color 0.2s, background 0.2s;
  letter-spacing: 0.04em;
}
#controls button:hover { color: var(--hi); border-color: var(--hi); }
#progress {
  flex: 1;
  height: 4px;
  background: rgba(237,227,207,0.1);
  border-radius: 2px;
  cursor: pointer;
  position: relative;
  margin: 0 4px;
}
#progress-fill {
  position: absolute; top: 0; left: 0; bottom: 0;
  width: 0%;
  background: linear-gradient(90deg, var(--hi) 0%, var(--accent) 100%);
  border-radius: 2px;
}
#progress-fill::after {
  content: "";
  position: absolute; right: -4px; top: 50%; transform: translateY(-50%);
  width: 8px; height: 8px;
  background: var(--hi);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--hi-glow);
}
.time { color: var(--fg); min-width: 44px; text-align: center; }
.time.t { color: var(--hi); }

@media (max-width: 768px) {
  .line.cur { font-size: 22px; }
  .line.cur.final { font-size: 26px; }
  .line.prev, .line.next { font-size: 13px; }
  #lyrics { padding: 0 4vw 8vh; }
  #title .main { font-size: 11px; }
  #controls button { padding: 4px 8px; font-size: 10px; }
}

/* 靜態站：隱藏除錯 HUD */
#hud { display: none !important; }
body.cinema .back-album { display:none !important; }
.back-album { position: fixed; top: 58px; left: 12px; z-index: 10; font: 12px/1 'Noto Sans TC', system-ui, sans-serif; color: rgba(255,255,255,.75); text-decoration: none; padding: 6px 10px; border-radius: 4px; background: rgba(10,6,8,.35); backdrop-filter: blur(6px); letter-spacing: .06em; }
.back-album:hover { color:#fff; background: rgba(10,6,8,.6); }