/* 字體 @font-face 由 tool/build_web.py 依語系寫進各頁 <style>，
   因為日文與簡繁的字符集不同，子集必須分開。 */

:root {
  --ink: #0b0908;
  --paper: #e9dcc3;
  --gold: #c9a96a;
  --gold-dim: #8a744d;
  --crimson: #8e2f2a;
  --serif: "SengokuSerif", "Noto Serif TC", "Hiragino Mincho ProN", "Yu Mincho", serif;
}

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

html { scroll-behavior: auto; }

body {
  background: var(--ink);
  color: var(--paper);
  font-family: var(--serif);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* 紙紋顆粒（會動的底片顆粒），蓋在整頁最上層 */
body::after {
  content: "";
  position: fixed;
  inset: -60px;
  z-index: 40;
  pointer-events: none;
  opacity: 0.055;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 0.9s steps(6) infinite;
}
@keyframes grain {
  0% { transform: translate(0, 0); }
  20% { transform: translate(-24px, 16px); }
  40% { transform: translate(18px, -30px); }
  60% { transform: translate(-30px, -10px); }
  80% { transform: translate(26px, 22px); }
  100% { transform: translate(0, 0); }
}

/* 電影暗角：四角壓暗，畫面自帶鏡頭感 */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 35;
  pointer-events: none;
  background:
    radial-gradient(ellipse 118% 108% at center, rgba(0,0,0,0) 62%, rgba(0,0,0,0.42)),
    linear-gradient(to bottom, rgba(0,0,0,0.22), rgba(0,0,0,0) 7%, rgba(0,0,0,0) 93%, rgba(0,0,0,0.22));
}

/* ── 語言切換 ───────────────────────────
   跟章節側軌同一側、同一套細線與金色，直排。 */

#lang { display: none; }
/* 語系鈕：右上一顆，顯示目前語系，點一下換下一個 */
html.fx #lang {
  position: fixed;
  right: 20px;
  top: 26px;
  z-index: 46;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  padding: 12px 8px;
  border: 1px solid rgba(196, 162, 94, 0.4);
  border-radius: 999px;
  color: var(--gold);
  text-decoration: none;
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  writing-mode: vertical-rl;
  background: rgba(11, 9, 8, 0.32);
  backdrop-filter: blur(2px);
}
/* 顏色固定，不隨滑鼠或焦點變 */
html.fx #lang:hover, html.fx #lang:focus-visible, html.fx #lang:active {
  color: var(--gold);
  border-color: rgba(196, 162, 94, 0.4);
  outline: none;
}

@media (max-width: 720px) {
  html.fx #lang { right: 9px; top: 16px; font-size: 0.68rem; padding: 10px 6px; }
}

/* ── 主題曲圓鈕 ───────────────────────
   左下角一顆圓鈕，裡面四根聲條。
   播放時起伏，停止時齊平。 */

#bgm { display: none; }
html.fx #bgm {
  position: fixed;
  left: 26px;
  bottom: 5vh;
  z-index: 46;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(201, 169, 106, 0.4);
  border-radius: 50%;
  background: rgba(11, 9, 8, 0.62);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  cursor: pointer;
  color: var(--gold-dim);
  transition: color 0.5s ease, border-color 0.5s ease, background 0.5s ease, box-shadow 0.5s ease;
  -webkit-tap-highlight-color: transparent;
}
html.fx #bgm:hover,
html.fx #bgm:focus-visible {
  color: var(--gold);
  border-color: var(--gold);
  background: rgba(11, 9, 8, 0.85);
  box-shadow: 0 0 26px rgba(201, 169, 106, 0.22);
  outline: none;
}
html.fx #bgm[aria-pressed="true"] { color: var(--gold); border-color: rgba(201, 169, 106, 0.75); }

.bgm-bars {
  display: flex;
  align-items: center;
  gap: 3px;
  height: 18px;
}
.bgm-bars i {
  display: block;
  width: 2px;
  height: 4px;
  background: currentColor;
  border-radius: 1px;
  transition: height 0.45s ease;
}
#bgm[aria-pressed="true"] .bgm-bars i { animation: bgm-wave 1.05s ease-in-out infinite; }
#bgm[aria-pressed="true"] .bgm-bars i:nth-child(2) { animation-delay: 0.16s; }
#bgm[aria-pressed="true"] .bgm-bars i:nth-child(3) { animation-delay: 0.34s; }
#bgm[aria-pressed="true"] .bgm-bars i:nth-child(4) { animation-delay: 0.5s; }
@keyframes bgm-wave {
  0%, 100% { height: 4px; }
  50% { height: 18px; }
}

@media (max-width: 720px) {
  html.fx #bgm { left: 14px; bottom: 3.5vh; width: 46px; height: 46px; }
}

/* ── 3D 舞台層 ─────────────────────────
   每幕的背景圖在空間裡立成一面六折屏風，由 scene3d.js 繪製。
   接手成功才掛 html.gl；掛不上就完全維持原本的 2D 版本。 */

#stage {
  position: fixed;
  inset: 0;
  z-index: 0;
  display: none;
  pointer-events: none;
}
html.gl #stage { display: block; }

/* 背景圖改由 3D 畫，DOM 這層只留文字與壓黑層。
   隱藏也順便讓 lazy 圖不再重複下載一次。 */
html.gl .bg { display: none; }
html.gl .hero,
html.gl .scene,
html.gl .gazes2,
html.gl .finale { background: transparent; }

/* 穿越幕自己是不透明的：黑底改掛在 pin 上，收尾才能整塊淡出溶進下一幕 */
html.gl .warp { background: transparent; }
html.gl .warp .pin { background: #000; }

/* 壓黑層原本跟著 sticky 一起滑，畫面是固定的 3D 就會在交界露出一條橫向色階。
   改成固定滿版，並由 --scrim 依各幕佔畫面的比例交叉淡入淡出，總量恆為一層。 */
html.gl .hero .pin::before,
html.gl .scene .pin::before,
html.gl .finale .pin::before {
  position: fixed;
  inset: 0;
  opacity: var(--scrim, 1);
}

/* ── 分幕通用 ───────────────────────────── */

.act { position: relative; }

.pin {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bg {
  position: absolute;
  inset: 0;
}
.bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--pos, center);
  transform: scale(var(--s, 1.12)) translate3d(var(--mx, 0px), calc(var(--ty, 0%) + var(--my, 0px)), 0);
  will-change: transform;
  filter: brightness(var(--br, 0.8)) saturate(0.92);
}
/* 場景上下壓黑，讓字浮得住 */
.scene .pin::before,
.finale .pin::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(to bottom, rgba(11,9,8,0.88), rgba(11,9,8,0) 28%,
      rgba(11,9,8,0) 66%, rgba(11,9,8,0.92)),
    radial-gradient(ellipse at center, rgba(11,9,8,0) 52%, rgba(11,9,8,0.5));
}

.line {
  position: relative;
  z-index: 2;
  font-size: clamp(1.6rem, 4.2vw, 3rem);
  letter-spacing: 0.3em;
  text-indent: 0.3em;
  font-weight: 400;
  color: var(--paper);
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.8);
  opacity: var(--o, 1);
  transform: translateY(var(--ly, 0)) translate3d(var(--lmx, 0px), var(--lmy, 0px), 0);
  padding: 0 0.5em;
  text-align: center;
  line-break: strict;
  max-width: 96vw;
  margin: 0 auto;
}
.line .ch {
  display: inline-block;
  will-change: opacity, transform;
}
/* 展示句的斷點：一組 .seg 是一個不可拆的意群（依標點切）。
   寬螢幕排成一行，不夠寬時只能折在標點後面，絕不折在詞中間。
   尾字的字距要吃掉，否則每行都白白多佔一個字寬還會偏心。 */
.line .seg {
  display: inline-block;
  white-space: nowrap;
}
.line .seg:last-child .ch:last-child { margin-right: -0.3em; }
@media (max-width: 900px) {
  .line .seg { display: block; }
  .line .seg + .seg { margin-top: 0.42em; }
  .line { line-height: 1.5; }
}

/* ── 第零幕：黑、標題 ──────────────────── */

.hero { height: 170vh; background: var(--ink); }
.hero .bg img { --br: 0.62; }
/* 首屏壓暗：標題區再沉一層，月色只當底 */
.hero .pin::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(ellipse 72% 58% at center 46%, rgba(11,9,8,0.52), rgba(11,9,8,0.1) 70%),
    linear-gradient(to bottom, rgba(11,9,8,0.6), rgba(11,9,8,0) 30%,
      rgba(11,9,8,0) 62%, rgba(11,9,8,0.9));
}
.hero-inner, .scroll-hint { position: relative; z-index: 2; }
.scroll-hint { position: absolute; }

.hero-inner {
  text-align: center;
  opacity: var(--o, 1);
  transform: translateY(var(--ly, 0)) translate3d(var(--lmx, 0px), var(--lmy, 0px), 0);
}

.title {
  font-family: "SengokuBrush", var(--serif);
  font-size: clamp(2.8rem, 9vw, 6.2rem);
  font-weight: 400;
  letter-spacing: 0.18em;
  text-indent: 0.18em;
  color: var(--paper);
  animation: ink-in 2.6s cubic-bezier(0.2, 0.6, 0.2, 1) both,
    breathe 7s 3s ease-in-out infinite;
}
@keyframes breathe {
  0%, 100% { text-shadow: 0 0 0 rgba(233, 220, 195, 0); }
  50% { text-shadow: 0 0 34px rgba(201, 169, 106, 0.35); }
}

.subtitle {
  margin-top: 1.6em;
  font-size: clamp(0.85rem, 2vw, 1.05rem);
  letter-spacing: 0.9em;
  text-indent: 0.9em;
  color: var(--gold);
  animation: ink-in 2.6s 0.7s cubic-bezier(0.2, 0.6, 0.2, 1) both;
}

@keyframes ink-in {
  from {
    opacity: 0;
    filter: blur(14px);
    letter-spacing: 0.6em;
  }
  to {
    opacity: 1;
    filter: blur(0);
  }
}

.scroll-hint {
  position: absolute;
  bottom: 4.5vh;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  color: var(--gold-dim);
  font-size: 0.72rem;
  letter-spacing: 0.5em;
  text-indent: 0.5em;
  writing-mode: vertical-rl;
  opacity: 0;
  animation: hint-in 1.8s 2.4s ease both;
}
.scroll-hint i {
  width: 1px;
  height: 56px;
  background: linear-gradient(to bottom, var(--gold-dim), transparent);
  animation: hint-drop 2.4s ease-in-out infinite;
  transform-origin: top;
}
@keyframes hint-in { to { opacity: 0.85; } }
@keyframes hint-drop {
  0% { transform: scaleY(0); }
  45% { transform: scaleY(1); }
  100% { transform: scaleY(1); opacity: 0; }
}

/* ── 第一幕：穿越 ──────────────────────── */

.warp { height: 340vh; background: #000; }

#warpCanvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.era {
  position: relative;
  z-index: 2;
  font-size: clamp(2.2rem, 7vw, 4.6rem);
  font-weight: 700;
  letter-spacing: 0.5em;
  text-indent: 0.5em;
  color: var(--paper);
  text-shadow: 0 0 34px rgba(201, 169, 106, 0.55);
  opacity: 0;
}

.flash {
  position: absolute;
  inset: 0;
  z-index: 3;
  background: radial-gradient(circle at center, #fff7e2, #e9dcc3 45%, rgba(233, 220, 195, 0.6));
  opacity: 0;
  pointer-events: none;
}

/* ── 場景卷 ────────────────────────────── */

.scene { height: 240vh; background: var(--ink); }

/* ── 凝視：黑暗中浮現的臉 ─────────────── */

.gazes2 { background: var(--ink); }
html.fx .gazes2 { height: 2160vh; }

.soul { position: relative; }
html.fx .soul {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}

.soul img {
  display: block;
  height: 108vh;
  height: 108svh;
  filter: brightness(0.95) saturate(0.92);
  -webkit-mask-image: radial-gradient(ellipse 54% 66% at center, #000 28%, transparent 67%);
  mask-image: radial-gradient(ellipse 54% 66% at center, #000 28%, transparent 67%);
  transform: scale(var(--zs, 1));
  will-change: transform;
}
html.fx .soul img {
  position: absolute;
  top: 50%;
  /* --sy 是每張圖的基準下移（%），用來校正人物在畫面裡的高低差 */
  transform: translateY(calc(-50% + var(--sy, 0%))) scale(var(--zs, 1)) translate3d(var(--mx, 0px), var(--my, 0px), 0);
}
html.fx .s-l img { left: 10vw; }
html.fx .s-r img { right: 10vw; }

.vline {
  writing-mode: vertical-rl;
  letter-spacing: 0.42em;
  font-size: clamp(1.2rem, 2.4vw, 1.75rem);
  color: var(--paper);
  text-shadow: 0 2px 26px rgba(0, 0, 0, 0.9);
  opacity: var(--vo, 1);
}
/* 斷行只照標點：每個 span 一柱，由右往左讀 */
.vline span { display: block; }
.vline span + span { margin-right: 1.1em; margin-top: 2.2em; }

/* 英文不直排：改回橫排、左右對齊人物 */
body.lat .vline {
  writing-mode: horizontal-tb;
  max-width: 22ch;
  letter-spacing: 0.06em;
  line-height: 1.9;
  text-align: left;
}
body.lat .vline span + span { margin-right: 0; margin-top: 0.3em; }
body.lat .line { letter-spacing: 0.08em; text-indent: 0; }
/* 英文的 .seg 是「一個單字」，窄螢幕不要一詞一行，照空格自然斷 */
body.lat .line .seg { display: inline-block; }
body.lat .line .seg:last-child .ch:last-child { margin-right: 0; }
@media (max-width: 900px) {
  body.lat .line .seg { display: inline-block; }
  body.lat .line .seg + .seg { margin-top: 0; }
}
body.lat .subtitle { letter-spacing: 0.5em; text-indent: 0.5em; }
body.lat .scroll-hint { writing-mode: horizontal-tb; letter-spacing: 0.3em; text-indent: 0.3em; }
html.fx .vline {
  position: absolute;
  top: 50%;
  transform: translateY(-50%) translate3d(var(--lmx, 0px), var(--lmy, 0px), 0);
  height: max-content;
}
html.fx .s-l .vline { right: 27vw; }
html.fx .s-r .vline { left: 27vw; }

/* ── 終章：天下人 ─────────────────────
   最後一位不走前七人的直式剪影，改成滿版電影構圖：
   畫填滿整個視窗，四邊壓黑收邊，台詞讓到左側空處。 */

html.fx .soul.lord img {
  position: absolute;
  inset: 0;
  top: 0;
  left: 0;
  right: auto;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 42%;
  -webkit-mask-image: none;
  mask-image: none;
  filter: brightness(0.92) saturate(0.95);
  transform: scale(var(--zs, 1)) translate3d(var(--mx, 0px), var(--my, 0px), 0);
}
html.fx .soul.lord::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(to right, rgba(11,9,8,0.9), rgba(11,9,8,0.22) 42%, rgba(11,9,8,0) 62%),
    radial-gradient(ellipse 96% 88% at 62% 42%, rgba(11,9,8,0) 38%, rgba(11,9,8,0.72)),
    linear-gradient(to bottom, rgba(11,9,8,0.7), rgba(11,9,8,0) 22%, rgba(11,9,8,0) 74%, rgba(11,9,8,0.86));
}
html.fx .soul.lord .vline {
  z-index: 2;
  left: 9vw;
  right: auto;
}

@media (max-width: 720px) {
  html.fx .soul.lord img { object-position: 64% 38%; }
  html.fx .soul.lord .vline { left: 6vw; right: auto; }
  html.fx .soul.lord::after {
    background:
      radial-gradient(ellipse 120% 70% at 64% 34%, rgba(11,9,8,0) 30%, rgba(11,9,8,0.78)),
      linear-gradient(to bottom, rgba(11,9,8,0.72), rgba(11,9,8,0) 24%, rgba(11,9,8,0) 66%, rgba(11,9,8,0.9));
  }
}

/* 無動效環境的直向排版後備 */
.soul {
  min-height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6vw;
}

/* ── 終幕 ─────────────────────────────── */

.finale { height: 190vh; }
.finale .bg img { --br: 0.62; }

.finale-inner {
  position: relative;
  z-index: 2;
  text-align: center;
  opacity: var(--o, 1);
  transform: translateY(var(--ly, 0)) translate3d(var(--lmx, 0px), var(--lmy, 0px), 0);
}

.title-s {
  font-family: "SengokuBrush", var(--serif);
  font-size: clamp(2.2rem, 6.2vw, 4rem);
  font-weight: 400;
  letter-spacing: 0.22em;
  text-indent: 0.22em;
  text-shadow: 0 2px 30px rgba(0, 0, 0, 0.85);
}

.enter {
  position: relative;
  overflow: hidden;
  display: inline-block;
  margin-top: 7vh;
  padding: 0.9em 3.4em;
  font-family: var(--serif);
  font-size: clamp(1rem, 2.2vw, 1.2rem);
  letter-spacing: 0.7em;
  text-indent: 0.7em;
  color: var(--paper);
  text-decoration: none;
  border: 1px solid var(--gold-dim);
  background: rgba(11, 9, 8, 0.35);
  transition: background 0.5s ease, border-color 0.5s ease, box-shadow 0.5s ease;
}
.enter::after {
  content: "";
  position: absolute;
  top: 0;
  left: -60%;
  width: 40%;
  height: 100%;
  background: linear-gradient(105deg, transparent, rgba(233, 220, 195, 0.16), transparent);
  animation: sheen 4.5s 2s ease-in-out infinite;
}
@keyframes sheen {
  0% { left: -60%; }
  35%, 100% { left: 130%; }
}
.enter:hover,
.enter:focus-visible {
  border-color: var(--gold);
  background: rgba(142, 47, 42, 0.55);
  box-shadow: 0 0 34px rgba(201, 169, 106, 0.25);
  outline: none;
}

/* ── 頁尾 ─────────────────────────────── */

footer {
  background: #000;
  text-align: center;
  padding: 6vh 1rem 7vh;
  font-size: 0.74rem;
  letter-spacing: 0.22em;
  color: var(--gold-dim);
}
footer nav { margin-bottom: 1.2em; }
footer a {
  color: var(--gold-dim);
  text-decoration: none;
  transition: color 0.4s ease;
}
footer a:hover { color: var(--gold); }
footer span { margin: 0 0.6em; }

/* ── 動效啟用時的初始狀態（由 JS 掛 fx class）── */

html.fx .scene .line { --o: 0; --ly: 24px; }
html.fx .hero-inner,
html.fx .finale-inner { will-change: opacity, transform; }

/* ── 手機 ─────────────────────────────── */

@media (max-width: 720px) {
  .line { letter-spacing: 0.2em; text-indent: 0.2em; }
  .warp { height: 300vh; }
  .scene { height: 210vh; }
  .soul img { height: 74vh; }
  html.fx .s-l img, html.fx .s-r img { left: 50%; right: auto; transform: translate(-50%, -50%) scale(var(--zs, 1)); }
  /* 手機一律靠左，八個人統一，不左右跳 */
  html.fx .s-l .vline, html.fx .s-r .vline { left: 4vw; right: auto; }
  .vline { font-size: 1.05rem; letter-spacing: 0.3em; }
}

/* ── 減少動態 ─────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .title, .subtitle, .scroll-hint { animation: none; opacity: 1; }
  .scroll-hint i { animation: none; }
  .bg img { transform: none; }
}