/* =====================================================================
   三國 · 墨 —— 設計 token + 水墨畫框 + 全屏分鏡
   純原生，零依賴；水墨/朱砂/描金皆由 CSS 與 SVG 生成，無任何圖片素材
   ===================================================================== */

/* ---------- 設計 token ---------- */
:root{
  --ink:#0d0b08;        /* 墨底 */
  --ink-2:#14100a;      /* 次墨 */
  --ink-3:#1d160d;      /* 淺墨 */
  --paper:#ede4d3;      /* 宣紙 */
  --paper-dim:rgba(237,228,211,.74);
  --paper-faint:rgba(237,228,211,.46);
  --paper-ghost:rgba(237,228,211,.22);
  --vermilion:#9e2b25;  /* 朱砂 */
  --vermilion-bright:#c43a2c;
  --gold:#c8a45c;       /* 描金 */
  --gold-bright:#e6c47c;
  --indigo:#4f7d80;     /* 青黛 */

  /* 三條精神主線色族（每幕由 data-thread 覆寫 --accent） */
  --c-loyalty:#c4452f;
  --c-martial:#d4ad5e;
  --c-wisdom:#5f9296;
  --accent:var(--c-martial);
  --accent-soft:rgba(212,173,94,.5);

  --ff-serif:'Noto Serif SC','Songti SC','STSong','SimSun',serif;
  --ff-kai:'Ma Shan Zheng','STKaiti','Kaiti SC','KaiTi',cursive;
  --ff-latin:'Cinzel','Times New Roman',serif;

  --ease:cubic-bezier(.2,.7,.2,1);
}

[data-thread="loyalty"]{ --accent:var(--c-loyalty); --accent-soft:rgba(196,69,47,.5); }
[data-thread="martial"]{ --accent:var(--c-martial); --accent-soft:rgba(212,173,94,.5); }
[data-thread="wisdom"]  { --accent:var(--c-wisdom);  --accent-soft:rgba(95,146,150,.5); }

/* ---------- 基底 ---------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{
  scroll-behavior:smooth;
  scroll-snap-type:y mandatory;
  -webkit-text-size-adjust:100%;
}
body{
  font-family:var(--ff-serif);
  background:var(--ink);
  color:var(--paper);
  line-height:1.9;
  overflow-x:hidden;
  opacity:0;
  animation:boot 1.4s var(--ease) .25s forwards;
  -webkit-font-smoothing:antialiased;
}
@keyframes boot{ to{ opacity:1; } }

.defs{ position:absolute; width:0; height:0; overflow:hidden; }

/* ---------- 水墨畫框 ---------- */
.grain{
  position:fixed; inset:0; z-index:60; pointer-events:none; opacity:.42;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain .5s steps(3) infinite;
}
@keyframes grain{
  0%{transform:translate(0,0)} 33%{transform:translate(-4px,3px)}
  66%{transform:translate(3px,-2px)} 100%{transform:translate(0,0)}
}
.vignette{
  position:fixed; inset:0; z-index:55; pointer-events:none;
  background:radial-gradient(125% 100% at 50% 45%, transparent 52%, rgba(0,0,0,.55) 86%, rgba(0,0,0,.9) 100%);
}
.edge{ position:fixed; left:0; right:0; z-index:56; pointer-events:none; height:7vh; }
.edge--top{ top:0; background:linear-gradient(var(--ink),transparent); }
.edge--bottom{ bottom:0; background:linear-gradient(transparent,var(--ink)); }

/* ---------- 頂部題額 ---------- */
.mast{
  position:fixed; inset:0 0 auto 0; z-index:50;
  display:flex; justify-content:space-between; align-items:center;
  padding:1.5rem clamp(1.2rem,3vw,2.6rem);
}
.mast__brand{
  font-family:var(--ff-kai); color:var(--gold);
  font-size:clamp(1.05rem,1.4vw,1.25rem); letter-spacing:.18em;
  text-decoration:none; text-shadow:0 1px 12px rgba(0,0,0,.7);
}
.mast__counter{
  font-family:var(--ff-latin); color:var(--paper-faint);
  font-size:.82rem; letter-spacing:.22em; display:flex; gap:.5em; align-items:center;
}
.mast__counter i{ font-style:normal; opacity:.4; }
.mast__counter #actNow{ color:var(--gold-bright); }

/* ---------- 右側幕次導航點 ---------- */
.dots{
  position:fixed; right:clamp(.9rem,2vw,1.7rem); top:50%; transform:translateY(-50%);
  z-index:50; display:flex; flex-direction:column; gap:.85rem;
}
.dots__btn{
  width:10px; height:10px; padding:0; border:none; border-radius:50%; cursor:pointer;
  background:rgba(237,228,211,.18); position:relative;
  transition:transform .35s var(--ease), background .35s var(--ease), box-shadow .35s var(--ease);
}
.dots__btn::after{
  content:""; position:absolute; inset:-7px; border-radius:50%;
  border:1px solid transparent; transition:border-color .35s var(--ease);
}
.dots__btn:hover{ background:var(--paper-dim); }
.dots__btn.is-active{
  background:var(--accent);
  box-shadow:0 0 12px var(--accent-soft);
  transform:scale(1.25);
}
.dots__btn.is-active::after{ border-color:var(--accent-soft); }
/* 啟動態導航點按當前幕精神色族變色 */
.dots__btn[data-thread="loyalty"]{ --accent:var(--c-loyalty); --accent-soft:rgba(196,69,47,.5); }
.dots__btn[data-thread="martial"]{ --accent:var(--c-martial); --accent-soft:rgba(212,173,94,.5); }
.dots__btn[data-thread="wisdom"]{ --accent:var(--c-wisdom); --accent-soft:rgba(95,146,150,.5); }

/* ---------- 左側進度金線 ---------- */
.progress{
  position:fixed; left:clamp(.9rem,2vw,1.7rem); top:50%; transform:translateY(-50%);
  z-index:50; width:2px; height:38vh; background:rgba(200,164,92,.16); border-radius:2px;
}
.progress i{
  display:block; width:100%; height:0; border-radius:2px;
  background:linear-gradient(var(--gold-bright),var(--gold) 60%,transparent);
  box-shadow:0 0 10px var(--accent-soft);
}

/* ---------- 左下精神主線圖例 ---------- */
.legend{
  position:fixed; left:clamp(1.2rem,3vw,2.6rem); bottom:1.5rem; z-index:50;
  display:flex; flex-direction:column; gap:.35rem;
  font-size:.7rem; letter-spacing:.25em; color:var(--paper-ghost);
}
.legend__item{ display:flex; align-items:center; gap:.5em; }
.legend__item::before{
  content:""; width:7px; height:7px; border-radius:50%; background:var(--accent);
}
.legend__item[data-thread="loyalty"]::before{ background:var(--c-loyalty); }
.legend__item[data-thread="martial"]::before{ background:var(--c-martial); }
.legend__item[data-thread="wisdom"]::before{ background:var(--c-wisdom); }

/* ---------- 共用：分鏡幕 ---------- */
.scene,.act{
  position:relative; min-height:100svh;
  scroll-snap-align:start; scroll-snap-stop:always;
  display:flex; align-items:center; overflow:hidden;
  padding:12vh clamp(1.4rem,6vw,6rem);
}

/* ---------- 序 · 臨江仙 ---------- */
.scene--intro{ justify-content:center; text-align:center; }
.intro__ink{
  position:absolute; inset:-12%; z-index:0;
  background:
    radial-gradient(48% 42% at 28% 38%, rgba(200,164,92,.10), transparent 62%),
    radial-gradient(40% 46% at 74% 70%, rgba(158,43,37,.12), transparent 62%),
    radial-gradient(130% 120% at 50% 130%, rgba(0,0,0,.7), transparent 70%),
    linear-gradient(155deg, var(--ink-2), var(--ink) 70%);
  animation:drift 22s var(--ease) infinite alternate;
}
.intro__scroll{
  position:absolute; top:50%; left:clamp(1rem,8vw,9rem); transform:translateY(-50%);
  z-index:1; writing-mode:vertical-rl; text-orientation:upright;
  font-family:var(--ff-serif); font-weight:300;
  font-size:clamp(.95rem,1.4vw,1.2rem); color:var(--paper-faint);
  letter-spacing:.4em; line-height:2.6;
}
.intro__scroll p{ opacity:0; animation:lineIn 1s var(--ease) forwards; }
.intro__scroll p:nth-child(1){ animation-delay:1.4s; }
.intro__scroll p:nth-child(2){ animation-delay:1.9s; }
.intro__scroll p:nth-child(3){ animation-delay:2.4s; }
.intro__scroll p:nth-child(4){ animation-delay:2.9s; }
.intro__scroll p:nth-child(5){ animation-delay:3.4s; }
@keyframes lineIn{ to{ opacity:1; } }

.intro__title-wrap{ position:relative; z-index:2; }
.intro__title{
  font-family:var(--ff-kai); font-weight:900;
  font-size:clamp(7rem,24vw,22rem); line-height:.9; letter-spacing:.06em;
  color:var(--gold);
  text-shadow:0 0 60px rgba(200,164,92,.25), 0 6px 30px rgba(0,0,0,.8);
  position:relative;
}
.intro__title::after{
  content:attr(data-text); position:absolute; inset:0;
  color:transparent; -webkit-text-stroke:1px var(--vermilion);
  transform:translate(.5rem,.5rem); opacity:.55; z-index:-1;
}
.intro__sub{
  margin-top:1.6rem; font-family:var(--ff-serif); font-weight:300;
  font-size:clamp(.8rem,1.2vw,1rem); letter-spacing:.5em;
  color:var(--paper-faint);
}
.intro__cue{
  position:absolute; bottom:8vh; left:50%; transform:translateX(-50%);
  z-index:2; display:flex; flex-direction:column; align-items:center; gap:.7rem;
  font-size:.78rem; letter-spacing:.5em; color:var(--paper-faint);
}
.intro__cue i{
  width:1px; height:46px; background:linear-gradient(var(--gold),transparent);
  animation:cue 2s var(--ease) infinite;
}
@keyframes cue{ 0%,100%{ opacity:.3; transform:scaleY(.7);} 50%{ opacity:1; transform:scaleY(1);} }

/* ---------- 名場面幕 ---------- */
.act__ink{
  position:absolute; inset:-12%; z-index:0;
  background:
    radial-gradient(55% 50% at 32% 40%, var(--accent-soft), transparent 62%),
    radial-gradient(46% 52% at 76% 66%, rgba(200,164,92,.08), transparent 62%),
    radial-gradient(130% 120% at 50% 125%, rgba(0,0,0,.66), transparent 72%),
    linear-gradient(160deg, var(--ink-2), var(--ink) 72%);
  animation:drift 20s var(--ease) infinite alternate;
}
/* 變體墨色：餘燼 / 青霧 / 烈焰 */
.act__ink--ember{
  background:
    radial-gradient(50% 46% at 34% 42%, rgba(196,69,47,.24), transparent 62%),
    radial-gradient(40% 44% at 72% 64%, rgba(120,60,30,.18), transparent 62%),
    radial-gradient(130% 120% at 50% 125%, rgba(0,0,0,.6), transparent 72%),
    linear-gradient(160deg, #1a110a, var(--ink) 72%);
}
.act__ink--mist{
  background:
    radial-gradient(52% 48% at 30% 40%, rgba(95,146,150,.22), transparent 62%),
    radial-gradient(42% 46% at 74% 64%, rgba(60,90,100,.16), transparent 62%),
    radial-gradient(130% 120% at 50% 125%, rgba(0,0,0,.62), transparent 72%),
    linear-gradient(160deg, #0f1416, var(--ink) 72%);
}
.act__ink--fire{
  background:
    radial-gradient(60% 55% at 50% 88%, rgba(255,120,40,.30), transparent 60%),
    radial-gradient(46% 44% at 70% 70%, rgba(196,69,47,.28), transparent 62%),
    radial-gradient(130% 110% at 50% 125%, rgba(0,0,0,.5), transparent 70%),
    linear-gradient(165deg, #1c0f06, var(--ink) 70%);
}
@keyframes drift{ from{ transform:scale(1) } to{ transform:scale(1.14) } }

.act__glow{
  position:absolute; z-index:1; width:42vmax; height:42vmax; border-radius:50%;
  top:50%; left:50%; transform:translate(-50%,-50%);
  background:radial-gradient(circle, var(--accent-soft), transparent 68%);
  filter:blur(40px); opacity:.5; pointer-events:none;
}
.act__glow--fire{ width:55vmax; height:55vmax; opacity:.6; }

.act__spirit{
  position:absolute; z-index:1; pointer-events:none; user-select:none;
  font-family:var(--ff-kai); font-weight:900;
  font-size:clamp(16rem,42vw,44rem); line-height:.8;
  color:var(--accent); opacity:.085;
  top:50%; right:6%; transform:translateY(-50%);
}
.act--right .act__spirit{ right:auto; left:5%; }
.act__spirit--epic{ opacity:.12; }

.act__inner{
  position:relative; z-index:3; max-width:min(640px,52vw);
  margin-left:0;
}
.act--right .act__inner{ margin-left:auto; text-align:right; }
.act--center .act__inner{ margin:0 auto; text-align:center; max-width:780px; }

.act__label{
  display:flex; align-items:center; gap:.85rem;
  font-family:var(--ff-latin); color:var(--accent);
  font-size:.78rem; letter-spacing:.32em; margin-bottom:1.6rem;
}
.act__label b{ font-weight:600; }
.act__label i{ display:inline-block; width:46px; height:1px; background:var(--accent-soft); }
.act__label span{ font-family:var(--ff-serif); color:var(--paper-faint); letter-spacing:.2em; }
.act--right .act__label{ justify-content:flex-end; }
.act--center .act__label{ justify-content:center; }

.act__title{
  font-family:var(--ff-kai); font-weight:900;
  font-size:clamp(2.6rem,5.6vw,5.4rem); line-height:1.08; letter-spacing:.04em;
  color:var(--paper);
  text-shadow:0 4px 28px rgba(0,0,0,.7);
  margin-bottom:1.6rem;
}
.act__title--epic{ font-size:clamp(3rem,6.8vw,6.6rem); color:var(--gold-bright); }

.act__quote{
  font-family:var(--ff-kai); font-style:normal;
  font-size:clamp(1.1rem,1.9vw,1.6rem); line-height:1.9;
  color:var(--gold-bright); letter-spacing:.05em;
  border-left:2px solid var(--accent); padding-left:1.2rem;
  margin-bottom:1.8rem;
  text-shadow:0 1px 14px rgba(0,0,0,.6);
}
.act--right .act__quote{ border-left:none; border-right:2px solid var(--accent); padding-left:0; padding-right:1.2rem; }
.act--center .act__quote{ border:none; padding:0; }

.act__note{
  font-family:var(--ff-serif); font-weight:300;
  font-size:clamp(.96rem,1.15vw,1.12rem); line-height:2.1;
  color:var(--paper-dim); letter-spacing:.04em;
  max-width:46ch;
}
.act--right .act__note{ margin-left:auto; }
.act--center .act__note{ margin:0 auto; max-width:60ch; }

/* ---------- 朱砂印章 ---------- */
.act__seal{ position:absolute; bottom:13vh; right:clamp(1.4rem,6vw,6rem); }
.act--right .act__seal{ right:auto; left:clamp(1.4rem,6vw,6rem); }
.act--center .act__seal{ left:50%; right:auto; transform:translateX(-50%); }
.seal{
  width:clamp(64px,5vw,86px); aspect-ratio:1; border-radius:6px;
  display:grid; place-items:center;
  background:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,.12), transparent 55%),
    var(--vermilion);
  color:#f5ead6; font-family:var(--ff-kai);
  font-size:clamp(1.2rem,1.8vw,1.7rem); letter-spacing:.04em;
  box-shadow:inset 0 0 0 3px rgba(245,234,214,.22), 0 8px 24px rgba(0,0,0,.55);
  transform:rotate(-5deg);
  filter:contrast(1.05);
}
.seal span{ line-height:1; }
.seal::after{ /* 印泥不均的細微顆粒 */
  content:""; position:absolute; inset:0; border-radius:6px; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cfilter id='s'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23s)'/%3E%3C/svg%3E");
  mix-blend-mode:screen; opacity:.16;
}
.seal--lg{ width:120px; transform:rotate(-3deg); font-size:2.1rem; }

/* ---------- 尾聲 ---------- */
.scene--outro{ justify-content:center; text-align:center; flex-direction:column; }
.outro__ink{
  position:absolute; inset:-12%; z-index:0;
  background:
    radial-gradient(50% 44% at 50% 40%, rgba(200,164,92,.10), transparent 64%),
    radial-gradient(130% 120% at 50% 130%, rgba(0,0,0,.75), transparent 70%),
    linear-gradient(180deg, var(--ink-2), var(--ink) 75%);
  animation:drift 26s var(--ease) infinite alternate;
}
.outro__inner{ position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; gap:1.4rem; }
.outro__lead{ font-family:var(--ff-serif); font-weight:300; letter-spacing:.5em; color:var(--paper-faint); font-size:clamp(.9rem,1.4vw,1.1rem); }
.outro__big{
  font-family:var(--ff-kai); font-weight:900;
  font-size:clamp(2.4rem,6vw,5.6rem); line-height:1.2; letter-spacing:.05em;
  color:var(--gold-bright); text-shadow:0 4px 30px rgba(0,0,0,.7);
}
.outro__credit{ margin-top:1rem; font-size:.78rem; letter-spacing:.18em; color:var(--paper-ghost); }
.outro__back{
  margin-top:.6rem; text-decoration:none; color:var(--paper-dim);
  font-family:var(--ff-kai); font-size:1rem; letter-spacing:.15em;
  border:1px solid var(--paper-ghost); padding:.7rem 1.8rem; border-radius:2px;
  transition:color .4s var(--ease), border-color .4s var(--ease), background .4s var(--ease);
}
.outro__back:hover{ color:var(--ink); background:var(--gold); border-color:var(--gold); }

/* ---------- 滾動浮現系統（html.js 鉤子：無 JS 時元素可見，零依賴安全） ---------- */
html.js .fade{ opacity:0; transform:translateY(30px); transition:opacity 1s var(--ease), transform 1s var(--ease); }
html.js .fade.in{ opacity:1; transform:none; }
html.js .fade[data-delay="1"]{ transition-delay:.12s; }
html.js .fade[data-delay="2"]{ transition-delay:.24s; }
html.js .fade[data-delay="3"]{ transition-delay:.36s; }
html.js .fade[data-delay="4"]{ transition-delay:.48s; }

/* ---------- 響應式 ---------- */
@media (max-width:760px){
  .scene,.act{ padding:11vh 1.3rem; }
  .intro__scroll{ left:.6rem; font-size:.82rem; }
  .act__inner{ max-width:100%; }
  .act--right .act__inner{ text-align:left; margin-left:0; }
  .act--right .act__quote{ border-left:2px solid var(--accent); border-right:none; padding-left:1.2rem; padding-right:0; }
  .act--right .act__label{ justify-content:flex-start; }
  .act__seal,.act--right .act__seal{ bottom:auto; top:auto; position:relative; margin-top:2rem; left:auto; right:auto; transform:translateX(0) rotate(-5deg); }
  .act--center .act__seal{ transform:rotate(-5deg); }
  .act__spirit{ font-size:42vw; opacity:.07; }
  .legend{ display:none; }
  .intro__cue{ bottom:5vh; }
}

/* ---------- 降級：減少動效 ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation:none !important; transition:none !important; }
  html{ scroll-behavior:auto; scroll-snap-type:none; }
  html.js .fade{ opacity:1; transform:none; }
}