/* 晴晞影音 · 系列專頁與總覽長卷軸 · films-series.css v1 · 115.08.25
   疊加於 films.css / read.css 之上；不改動既有檔。
   涵蓋：總覽長卷軸（hub-roll）／直式影片框／程序進度條（proc）／
   歌詞逐句跟播（film-lyrics）／系列一光漸亮・系列二卷宗標籤 簽名元素／深色版。 */

/* ═══ 1. 直式影片（系列三 9:16）═══ */
.film-video-wrap--portrait { display: flex; justify-content: center; background: transparent; }
.film-video-wrap--portrait video,
.film-video-wrap video.film-video--portrait {
  width: 100%; max-width: min(400px, 86vw); height: auto;
  display: block; margin: 0 auto;
}

/* ═══ 2. 總覽長卷軸 ═══ */
.hub-roll { max-width: 1020px; margin: 0 auto; padding: 3.4rem 2rem 4rem; position: relative; }
.hub-line {
  position: absolute; top: .8rem; bottom: 0; left: 50%;
  width: 1px; background: linear-gradient(to bottom, rgba(201,168,76,0), rgba(201,168,76,.55) 8%, rgba(201,168,76,.55) 92%, rgba(201,168,76,0));
  pointer-events: none;
}
.hub-seg {
  position: relative; display: grid; grid-template-columns: 1.05fr .95fr;
  gap: 3rem; align-items: center;
  background: var(--cream, #f8f5ef);
  padding: 3.2rem 2.4rem; margin-bottom: 3.5rem;
  text-decoration: none; color: inherit;
  border: 1px solid rgba(201,168,76,.22);
  transition: border-color .3s, transform .3s;
}
.hub-seg:hover { border-color: rgba(201,168,76,.55); }
.hub-seg:hover .hub-enter { letter-spacing: 5px; color: var(--gold, #c9a84c); }
.hub-dot {
  position: absolute; left: 50%; top: -3.05rem; transform: translateX(-50%);
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--gold, #c9a84c); box-shadow: 0 0 10px 2px rgba(201,168,76,.35);
}
.hub-eyebrow {
  font-family: 'Cormorant Garamond', serif; font-style: italic;
  font-size: 15px; letter-spacing: 4px; color: var(--gold, #c9a84c);
  display: block; margin-bottom: .6rem;
}
.hub-title {
  font-family: 'Noto Serif TC', serif; font-weight: 300;
  font-size: clamp(24px, 3vw, 32px); letter-spacing: 6px;
  color: var(--blue-deep, #2C4A5A); margin: 0 0 1.1rem;
}
.hub-verse {
  font-family: 'Noto Serif TC', serif; font-weight: 300;
  font-size: 18px; line-height: 2.1; letter-spacing: 2px;
  color: var(--text-mid, #3d5060); margin: 0 0 1.2rem;
}
.hub-meta { font-size: 13px; letter-spacing: 2px; color: var(--text-muted, #6b8090); margin: 0 0 1.6rem; }
.hub-enter {
  font-size: 14px; letter-spacing: 3px; color: var(--text-mid, #3d5060);
  border-bottom: 1px solid rgba(201,168,76,.5); padding-bottom: 3px;
  transition: letter-spacing .3s, color .3s;
}
.hub-art img { width: 100%; height: auto; display: block; border: 1px solid var(--cream-dark, #ede8de); }
.hub-art--portrait { max-width: 300px; margin-left: auto; }
.hub-art--portrait img { height: 400px; object-fit: cover; object-position: center top; }

/* 浮動目錄加寬：系列頁曲名（如「同一件事的另一種說法」）單行不折 */
@media (min-width: 901px) {
  .p-series1 .films-toc, .p-series2 .films-toc, .p-series3 .films-toc { max-width: 252px; }
  .p-series1 .films-toc a, .p-series2 .films-toc a, .p-series3 .films-toc a { white-space: nowrap; }
}

/* ═══ 3. 程序進度條（系列三專頁）═══ */
.proc { max-width: 760px; margin: 0 auto 2rem; padding: 2.5rem 2rem 1rem; text-align: center; }
.proc-title {
  font-family: 'Noto Serif TC', serif; font-weight: 300;
  font-size: clamp(20px, 2.6vw, 26px); letter-spacing: 5px;
  color: var(--blue-deep, #2C4A5A); margin: 0 0 .6rem;
}
.proc-sub { font-size: 13.5px; letter-spacing: 2px; color: var(--text-muted, #6b8090); margin: 0 0 1.6rem; }
/* 金線站點式（115.08.26 律師定案）：一條橫向金線、六個站點；
   點選後金線流光填至該站、圓點發亮。行動版轉直式站點列。 */
.proc-rail { position: relative; display: flex; justify-content: space-between; align-items: flex-start; padding: 6px 8px 0; }
.proc-line {
  position: absolute; left: 24px; right: 24px; top: 13px; height: 1px;
  background: rgba(201,168,76,.3); pointer-events: none;
}
.proc-line-fill {
  position: absolute; left: 0; top: -0.5px; height: 2px; width: 0;
  background: linear-gradient(to right, rgba(201,168,76,.35), var(--gold, #c9a84c));
  box-shadow: 0 0 8px rgba(201,168,76,.45);
  transition: width .7s cubic-bezier(.22,.61,.36,1);
}
.proc-stop {
  position: relative; z-index: 1; flex: 1;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  background: transparent; border: 0; padding: 0; cursor: pointer;
}
.proc-dot {
  width: 15px; height: 15px; border-radius: 50%;
  background: var(--cream, #f8f5ef);
  border: 1.5px solid rgba(201,168,76,.65);
  transition: all .3s;
}
.proc-stop:hover .proc-dot { border-color: var(--gold, #c9a84c); box-shadow: 0 0 8px rgba(201,168,76,.35); }
.proc-stop.is-active .proc-dot {
  background: var(--gold, #c9a84c); border-color: var(--gold, #c9a84c);
  box-shadow: 0 0 14px 3px rgba(201,168,76,.5);
}
.proc-label {
  font-family: 'Noto Sans TC', sans-serif; font-weight: 300;
  font-size: 13.5px; letter-spacing: 1px; line-height: 1.5;
  color: var(--text-muted, #6b8090); max-width: 9.5em; padding: 0 4px;
  transition: color .3s;
}
.proc-stop:hover .proc-label { color: var(--text-mid, #3d5060); }
.proc-stop.is-active .proc-label { color: var(--gold, #b58a2f); }
/* 階段卡（115.08.26 律師二輪定案：封面淡底金句卡——只剩共感語＋歌名，
   整卡可點捲至該曲；浮現時金色邊框自左上順時針描邊 0.8s） */
.proc-panel[hidden] { display: none; }
.proc-panel {
  position: relative; display: block; overflow: hidden;
  margin-top: 1.8rem; min-height: 168px;
  padding: 2.1rem 2rem 1.6rem; text-align: left;
  background: rgba(255,255,255,.4); text-decoration: none;
}
.proc-bg {
  position: absolute; top: 0; right: 0; bottom: 0; width: 46%;
  height: 100%; object-fit: cover; object-position: center 30%;
  opacity: .55; pointer-events: none;
}
.proc-panel::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to right, var(--cream, #f8f5ef) 46%, rgba(248,245,239,.55) 62%, rgba(248,245,239,0) 100%);
}
.proc-border {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 2;
}
.proc-border-rect {
  fill: none; stroke: var(--gold, #c9a84c); stroke-width: 1.6;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 1; stroke-dashoffset: 1;
}
.proc-border-rect.is-draw { transition: stroke-dashoffset .8s cubic-bezier(.22,.61,.36,1); stroke-dashoffset: 0; }
.proc-empath {
  position: relative; z-index: 1; display: block; max-width: 62%;
  font-family: 'Noto Serif TC', serif; font-weight: 300;
  font-size: clamp(18px, 2.2vw, 22px); line-height: 2; letter-spacing: 2px;
  color: var(--text-dark, #1a2430); margin: 0 0 1.2rem;
}
.proc-meta {
  position: relative; z-index: 1; display: block;
  font-family: 'Noto Serif TC', serif; font-weight: 300;
  font-size: 13px; letter-spacing: 2px; color: var(--gold, #b58a2f);
  transition: letter-spacing .3s;
}
.proc-panel:hover .proc-meta { letter-spacing: 3px; }
.proc-links { display: flex; flex-wrap: wrap; gap: 1.5rem; }
.proc-link {
  font-size: 14px; letter-spacing: 1.5px; color: var(--text-mid, #3d5060);
  text-decoration: none; border-bottom: 1px solid rgba(201,168,76,.5); padding-bottom: 2px;
  transition: color .25s;
}
.proc-link:hover { color: var(--gold, #c9a84c); }
.proc-link--warm { color: var(--gold, #b58a2f); }
.series-outro-cta { display: inline-block; margin-top: 1.2rem; }
.film-node.is-spot .film-frame { outline: 2px solid rgba(201,168,76,.65); outline-offset: 8px; transition: outline-color .4s; }

/* ═══ 3b. 迷你封面卡列（三系列專頁頂部快速選曲；115.08.26 律師定案）═══ */
.snav {
  display: flex; justify-content: center; gap: 14px;
  max-width: 860px; margin: 2.6rem auto 0; padding: 0 2rem;
}
.snav-item {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  text-decoration: none; width: 96px; flex: 0 0 auto;
}
.snav-thumb {
  display: block; width: 84px; aspect-ratio: 3 / 4; overflow: hidden;
  border: 1px solid rgba(201,168,76,.4);
  transition: border-color .3s, transform .3s;
}
.p-series1 .snav-thumb, .p-series2 .snav-thumb { width: 96px; aspect-ratio: 16 / 10; }
.snav-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.snav-item:hover .snav-thumb { border-color: var(--gold, #c9a84c); transform: translateY(-3px); }
.snav-num {
  font-family: 'Cormorant Garamond', serif; font-style: italic;
  font-size: 12px; letter-spacing: 2px; color: var(--gold, #b58a2f); line-height: 1;
}
.snav-name {
  font-family: 'Noto Serif TC', serif; font-weight: 300;
  font-size: 12.5px; letter-spacing: .5px; line-height: 1.5; text-align: center;
  color: var(--text-mid, #3d5060);
}
.snav-item:hover .snav-name { color: var(--blue-deep, #2C4A5A); }

/* ═══ 4. 歌詞逐句跟播（單曲子頁）═══ */
.film-lyrics { max-width: 640px; margin: 3.5rem auto 0; padding: 0 2rem; }
.fl-head { text-align: center; margin-bottom: 1.4rem; }
.fl-title {
  font-family: 'Noto Serif TC', serif; font-weight: 300;
  font-size: 19px; letter-spacing: 5px; color: var(--blue-deep, #2C4A5A);
  margin: 0 0 .5rem;
}
.fl-title::after { content: ''; display: block; width: 28px; height: 1px; background: var(--gold, #c9a84c); margin: .8rem auto 0; }
.fl-hint { font-size: 12.5px; letter-spacing: 1.5px; color: var(--text-muted, #6b8090); }
.fl-wrap { position: relative; max-height: 300px; overflow: hidden; }
.fl-wrap.is-open { max-height: 440px; overflow-y: auto; scrollbar-width: thin; }
.fl-fade {
  position: absolute; left: 0; right: 0; bottom: 0; height: 90px;
  background: linear-gradient(to bottom, rgba(248,245,239,0), var(--cream, #f8f5ef));
  pointer-events: none;
}
.fl-wrap.is-open .fl-fade { display: none; }
.fl-list { list-style: none; margin: 0; padding: 0; text-align: center; }
.fl-list li {
  font-family: 'Noto Serif TC', serif; font-weight: 300;
  font-size: 16.5px; line-height: 2; letter-spacing: 1.5px;
  color: var(--text-muted, #6b8090);
  padding: 3px 10px; cursor: pointer;
  transition: color .3s, background .3s;
}
.fl-list li:hover { color: var(--blue-deep, #2C4A5A); }
.fl-list li.is-past { color: var(--text-mid, #3d5060); }
.fl-list li.is-current {
  color: var(--text-dark, #1a2430);
  background: rgba(201,168,76,.14);
}
.fl-toggle {
  display: block; margin: 1.1rem auto 0;
  font-family: 'Noto Sans TC', sans-serif; font-weight: 300;
  font-size: 13px; letter-spacing: 2px;
  color: var(--gold, #b58a2f); background: transparent;
  border: 1px solid rgba(201,168,76,.5); border-radius: 999px;
  padding: 7px 22px; cursor: pointer; transition: all .25s;
}
.fl-toggle:hover { border-color: var(--gold, #c9a84c); background: rgba(201,168,76,.08); }
html:not(.js) .fl-wrap { max-height: none; overflow: visible; }
html:not(.js) .fl-fade, html:not(.js) .fl-toggle { display: none; }

/* ═══ 5. 系列簽名元素 ═══ */
/* 系列一：暖光依曲序漸亮 */
.p-series1 .film-frame { isolation: isolate; }
.p-series1 .film-frame::before {
  content: ''; position: absolute; inset: -22px; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, rgba(226,196,122,var(--s1glow, .07)), transparent 78%);
}
.p-series1 .film-node:nth-of-type(1) { --s1glow: .06; }
.p-series1 .film-node:nth-of-type(2) { --s1glow: .12; }
.p-series1 .film-node:nth-of-type(3) { --s1glow: .18; }
.p-series1 .film-node:nth-of-type(4) { --s1glow: .26; }
/* 系列二：卷宗側標籤 */
.p-series2 .film-head { border-left: 3px solid var(--gold, #c9a84c); padding-left: 16px; border-radius: 0; }
.p-series2 .film-frame::before {
  content: ''; position: absolute; top: -9px; left: 0; width: 56px; height: 9px;
  background: var(--gold, #c9a84c); opacity: .28; pointer-events: none;
}

/* ═══ 6. 行動版 ═══ */
@media (max-width: 768px) {
  .hub-roll { padding: .5rem 1.2rem 3rem; }
  .hub-line { left: 20px; }
  .hub-seg { grid-template-columns: 1fr; gap: 1.6rem; padding: 2.2rem 1.4rem; margin-bottom: 2.6rem; margin-left: 14px; }
  .hub-dot { left: 6px; top: 50%; transform: translate(-50%, -50%); }
  .hub-verse { font-size: 16.5px; }
  .hub-art--portrait { max-width: 100%; margin-left: 0; }
  .hub-art--portrait img { height: 300px; }
  .proc { padding: 2rem 1.2rem .6rem; }
  /* 行動版：站點轉直式列（金線改直） */
  .proc-rail { flex-direction: column; align-items: stretch; gap: 18px; padding: 4px 0 0 6px; }
  .proc-line { left: 13px; right: auto; top: 10px; bottom: 10px; width: 1px; height: auto; }
  .proc-line-fill { left: -0.5px; top: 0; width: 2px; height: 0; transition: height .7s cubic-bezier(.22,.61,.36,1); }
  .proc-stop { flex-direction: row; gap: 14px; align-items: center; text-align: left; }
  .proc-label { max-width: none; font-size: 14px; }
  .proc-panel { min-height: 150px; padding: 1.7rem 1.3rem 1.3rem; }
  .proc-bg { width: 56%; opacity: .4; }
  .proc-panel::after { background: linear-gradient(to right, var(--cream, #f8f5ef) 36%, rgba(248,245,239,.6) 58%, rgba(248,245,239,.12) 100%); }
  .proc-empath { max-width: 78%; font-size: 17px; }
  /* 迷你封面卡列：橫向滑動 */
  .snav { justify-content: flex-start; overflow-x: auto; padding: 0 1.2rem 6px; gap: 12px;
          scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .snav::-webkit-scrollbar { display: none; }
  .snav-item { scroll-snap-align: start; width: 84px; }
  .snav-thumb { width: 72px; }
  .p-series1 .snav-thumb, .p-series2 .snav-thumb { width: 92px; }
  .film-lyrics { padding: 0 1.2rem; }
}

/* ═══ 7. 降低動態 ═══ */
@media (prefers-reduced-motion: reduce) {
  .hub-seg, .hub-enter, .proc-link, .proc-meta, .fl-list li { transition: none; }
  .proc-border-rect, .proc-border-rect.is-draw { transition: none; stroke-dashoffset: 0; }
}

/* ═══ 8. 夜幕紙卷（沿用 films.css 深色變數；僅螢幕）═══ */
@media screen and (prefers-color-scheme: dark) {
  body.p-films .hub-seg { background: var(--fd-card, #201911); border-color: rgba(226,196,122,.28); }
  body.p-films .hub-title { color: var(--fd-head, #f0e9da); }
  body.p-films .hub-verse { color: var(--fd-text, rgba(240,233,218,.87)); }
  body.p-films .hub-meta { color: var(--fd-mut, rgba(240,233,218,.66)); }
  body.p-films .hub-enter { color: var(--fd-mut, rgba(240,233,218,.66)); }
  body.p-films .hub-seg:hover .hub-enter { color: #e2c47a; }
  body.p-films .proc-title { color: var(--fd-head, #f0e9da); }
  body.p-films .proc-sub { color: var(--fd-mut, rgba(240,233,218,.66)); }
  body.p-films .proc-dot { background: var(--fd-paper, #171209); border-color: rgba(226,196,122,.55); }
  body.p-films .proc-stop.is-active .proc-dot { background: #e2c47a; border-color: #e2c47a; }
  body.p-films .proc-label { color: var(--fd-mut, rgba(240,233,218,.66)); }
  body.p-films .proc-stop:hover .proc-label { color: var(--fd-text, rgba(240,233,218,.87)); }
  body.p-films .proc-stop.is-active .proc-label { color: #e2c47a; }
  body.p-films .proc-panel { background: rgba(255,255,255,.05); }
  body.p-films .proc-panel::after { background: linear-gradient(to right, var(--fd-paper, #171209) 46%, rgba(23,18,9,.55) 62%, rgba(23,18,9,0) 100%); }
  body.p-films .proc-bg { opacity: .5; }
  body.p-films .proc-meta { color: #e2c47a; }
  body.p-films .proc-border-rect { stroke: #e2c47a; }
  body.p-films .snav-name { color: var(--fd-mut, rgba(240,233,218,.66)); }
  body.p-films .snav-item:hover .snav-name { color: var(--fd-text, rgba(240,233,218,.87)); }
  body.p-films .snav-num { color: #e2c47a; }
  body.p-films .snav-thumb { border-color: rgba(226,196,122,.35); }
  
  body.p-films .proc-empath { color: var(--fd-text, rgba(240,233,218,.87)); }
  body.p-films .proc-link { color: var(--fd-mut, rgba(240,233,218,.66)); }
  body.p-films .proc-link--warm, body.p-films .fl-toggle { color: #e2c47a; }
  body.p-films .fl-title { color: var(--fd-head, #f0e9da); }
  body.p-films .fl-hint { color: var(--fd-mut, rgba(240,233,218,.66)); }
  body.p-films .fl-list li { color: rgba(240,233,218,.45); }
  body.p-films .fl-list li.is-past { color: rgba(240,233,218,.66); }
  body.p-films .fl-list li:hover { color: #e2c47a; }
  body.p-films .fl-list li.is-current { color: #f0e9da; background: rgba(226,196,122,.16); }
  body.p-films .fl-fade { background: linear-gradient(to bottom, rgba(23,18,9,0), var(--fd-paper, #171209)); }
  body.p-films .proc-empath, body.p-films .proc-panel { border-radius: 0; }
}