/* ── 晴晞影音（qingxilaw_films）· 捲動地圖版面 ────────────────────
   建檔 115.07.20。僅本頁使用，不影響 qingmo.css / 其他頁面。
   金線動線、作品節點、浮動目錄、播放互動。
   ---------------------------------------------------------------- */

/* ═══ 1. 頁首引言 ═══ */
.films-intro {
  max-width: 640px; margin: 4.5rem auto 1rem; padding: 0 2rem;
  text-align: center;
}
.films-intro p {
  font-family: 'Noto Serif TC', serif; font-weight: 300;
  font-size: 17px; line-height: 2.2; color: var(--text-mid);
  letter-spacing: 1px; margin-bottom: 1.4rem;
}
.films-intro p:last-child { margin-bottom: 0; }

/* ═══ 2. 地圖容器與金線 ═══ */
.films-map {
  position: relative;
  max-width: 1120px; margin: 0 auto; padding: 3rem 2rem 5rem;
}

/* 金線 SVG：桌機置中、行動版靠左 24px */
.goldline {
  position: absolute; top: 0; bottom: 0; left: 50%;
  width: 120px; margin-left: -60px; height: 100%;
  pointer-events: none; z-index: 0; overflow: visible;
}
.goldline-path {
  fill: none; stroke: var(--gold); stroke-width: 1.5;
  stroke-linecap: round; opacity: .55;
}
/* 生長：path 設 pathLength="1"，故 dash 值與實際長度無關 */
.goldline-path.gl-anim { stroke-dasharray: 1; stroke-dashoffset: 1; }

/* 生長由 JS 以 rAF 推進（見頁內 script §2 的撤除說明）；
   無 JS 或 prefers-reduced-motion 時 .gl-anim 不掛上，金線靜態全顯。 */

/* 金點：JS 依節點實座標放置 */
.gl-dot {
  position: absolute; width: 8px; height: 8px; border-radius: 50%;
  margin: -4px 0 0 -4px; z-index: 1; pointer-events: none;
  background: var(--cream); border: 1px solid var(--gold);
  transition: background .6s cubic-bezier(.22,.61,.36,1),
              box-shadow .6s cubic-bezier(.22,.61,.36,1),
              transform .6s cubic-bezier(.22,.61,.36,1);
}
.gl-dot.is-on {
  background: var(--gold);
  box-shadow: 0 0 14px 3px rgba(201,168,76,.35);
}
.gl-dot.is-playing { transform: scale(1.6); box-shadow: 0 0 22px 6px rgba(201,168,76,.5); }

/* ═══ 3. 系列與層級容器 ═══ */
.film-series { position: relative; z-index: 1; }
.film-season, .film-theme { position: relative; }
/* 錨點跳轉補償固定 navbar 高度（68px＋餘裕；比照 qingmo.css .a-h2 先例） */
.film-node, .series-card { scroll-margin-top: 84px; }

.series-card {
  text-align: center; max-width: 620px;
  margin: 0 auto 1rem; padding: 3.5rem 2rem 2.5rem;
}

/* 主題區塊小標卡：比系列標題卡低一級（系列 > 主題 > 作品） */
.theme-card {
  text-align: center; max-width: 560px;
  margin: 2.5rem auto 0; padding: 2rem 2rem 0;
}
.theme-eyebrow {
  display: block; font-size: 11.5px; letter-spacing: 4px;
  color: var(--gold); margin-bottom: .8rem;
}
.theme-title {
  font-family: 'Noto Serif TC', serif; font-weight: 400;
  font-size: 25px; letter-spacing: 3px; color: var(--blue-deep);
  margin: 0 0 1rem;
}
.theme-title::after {
  content: ''; display: block; width: 28px; height: 1px;
  background: var(--gold); opacity: .5; margin: 1rem auto 0;
}
.theme-desc {
  font-family: 'Noto Serif TC', serif; font-weight: 300;
  font-size: 14.5px; line-height: 2.05; color: var(--text-muted);
  letter-spacing: .8px; margin-bottom: .3rem;
}
.series-eyebrow {
  display: block; font-family: 'Cormorant Garamond', serif; font-style: italic;
  font-size: 13px; letter-spacing: 3px; color: var(--gold); margin-bottom: .9rem;
}
.series-title {
  font-family: 'Noto Serif TC', serif; font-weight: 400;
  font-size: 30px; letter-spacing: 4px; color: var(--blue-deep); margin-bottom: .7rem;
}
.series-sub {
  font-size: 14px; letter-spacing: 2px; color: var(--gold); margin-bottom: 1.6rem;
}
.series-desc {
  font-family: 'Noto Serif TC', serif; font-weight: 300;
  font-size: 15.5px; line-height: 2.1; color: var(--text-mid); letter-spacing: .8px;
}
.series-rule { width: 40px; height: 1px; background: var(--gold); margin: 1.6rem auto 0; opacity: .6; }

/* 過場引導文 */
.film-lead {
  text-align: center; max-width: 520px; margin: 4.5rem auto 2.5rem; padding: 0 2rem;
  font-family: 'Noto Serif TC', serif; font-weight: 300; font-style: normal;
  font-size: 16px; line-height: 2; letter-spacing: 2px; color: var(--text-muted);
}

/* ═══ 4. 作品節點 ═══ */
.film-node {
  position: relative; display: grid; gap: 2.5rem 3.5rem;
  align-items: center; margin: 0 auto 1rem; max-width: 1040px;
}
/* 首作置中放大 */
.film-node--center { grid-template-columns: 1fr; max-width: 760px; text-align: center; }
.film-node--center .film-meta { text-align: center; }
.film-node--center .film-quote { display: inline-block; text-align: left; }
/* 交錯：影片左／文字右 */
.film-node--left  { grid-template-columns: 1.15fr .85fr; }
.film-node--left  .film-frame { grid-column: 1; }
.film-node--left  .film-meta  { grid-column: 2; }
/* 交錯：文字左／影片右 */
.film-node--right { grid-template-columns: .85fr 1.15fr; }
.film-node--right .film-meta  { grid-column: 1; }
.film-node--right .film-frame { grid-column: 2; }

/* 播放中：其餘節點文字淡化 */
.films-map.is-playing .film-node:not(.is-active) .film-meta,
.films-map.is-playing .film-node:not(.is-active) .film-head { opacity: .6; }
.film-meta, .film-head { transition: opacity .5s cubic-bezier(.22,.61,.36,1); }

/* 4-1 標頭 */
.film-head { margin-bottom: 1.2rem; }
.film-num {
  display: block; font-family: 'Cormorant Garamond', serif; font-style: italic;
  font-size: 46px; line-height: 1; color: var(--gold); opacity: .38; margin-bottom: .2rem;
}
.film-name {
  font-family: 'Noto Serif TC', serif; font-weight: 500;
  font-size: 28px; letter-spacing: 3px; color: var(--blue-deep); margin: 0 0 .5rem;
}
.film-tag { font-size: 12px; letter-spacing: 3px; color: var(--gold); }

/* 4-2 影片框 */
.film-frame { position: relative; }
.film-video-wrap {
  position: relative; background: var(--cream-dark);
  border: .5px solid var(--cream-dark); overflow: hidden;
  box-shadow: 0 2px 20px rgba(44,74,90,.07);
}
.film-video-wrap video {
  display: block; width: 100%; height: auto; background: var(--cream);
}
/* 自訂播放鈕（JS 掛上；無 JS 時沿用原生 controls） */
.film-play {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: 0; cursor: pointer; padding: 0;
}
.film-play::before {
  content: ''; width: 62px; height: 62px; border-radius: 50%;
  border: 1px solid var(--gold); background: rgba(248,245,239,.58);
  box-shadow: 0 2px 14px rgba(44,74,90,.16);   /* 亮部海報上仍可辨（設計體檢第 5 項） */
  transition: background .45s cubic-bezier(.22,.61,.36,1),
              box-shadow .45s cubic-bezier(.22,.61,.36,1),
              transform .45s cubic-bezier(.22,.61,.36,1);
}
.film-play::after {
  content: ''; position: absolute;
  border-style: solid; border-width: 8px 0 8px 13px;
  border-color: transparent transparent transparent var(--gold);
  margin-left: 4px;
}
.film-play:hover::before, .film-play:focus-visible::before {
  background: rgba(201,168,76,.16); transform: scale(1.08);
  box-shadow: 0 0 34px 12px rgba(201,168,76,.22);
}
.film-play:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.film-dur {
  margin-top: .7rem; font-size: 12px; letter-spacing: 1.5px;
  color: var(--text-light); font-family: 'Cormorant Garamond', serif;
}

/* 4-3 文字側 */
/* 一句一段（律師 115.07.20 指示）：段距略收，讀起來才是分句而非分節 */
.film-desc {
  font-family: 'Noto Serif TC', serif; font-weight: 300;
  font-size: 15.5px; line-height: 2.05; color: var(--text-mid);
  letter-spacing: .8px; margin-bottom: .75rem;
}
.film-desc:last-of-type { margin-bottom: 0; }
.series-desc + .series-desc { margin-top: .4rem; }
.film-quote {
  border-left: 1px solid var(--gold); padding: .3rem 0 .3rem 1.2rem;
  margin: 1.6rem 0; font-family: 'Noto Serif TC', serif; font-weight: 300;
  font-size: 15px; line-height: 2.1; letter-spacing: 1.5px; color: var(--blue-mid);
}
/* 揭露三段各自成行，不讓它在欄寬內亂折 */
.film-credit {
  margin-top: 1.6rem; font-size: 11.5px; line-height: 2;
  letter-spacing: .5px; color: var(--text-light);
}
.film-credit span { display: block; }

/* ═══ 5. 收束語與系列過場 ═══ */
.series-outro {
  text-align: center; max-width: 620px; margin: 4rem auto 0; padding: 0 2rem;
}
.series-outro p {
  font-family: 'Noto Serif TC', serif; font-weight: 300;
  font-size: 16px; line-height: 2.2; letter-spacing: 1.5px;
  color: var(--text-mid); margin-bottom: 1rem;
}

/* 系列切換過場。金線在此收住並留白，於另一側重新起筆（D 案交界），
   上下留白即是那段刻意的靜默。 */
.series-transition { text-align: center; padding: 7rem 2rem 7rem; }
.series-transition p {
  font-family: 'Noto Serif TC', serif; font-weight: 300;
  font-size: 16px; line-height: 2.2; letter-spacing: 2px; color: var(--text-muted);
}
/* 金線於此段轉虛線並淡化 */
.goldline-path.gl-dashed { stroke-dasharray: 3 6; opacity: .3; }

/* ═══ 6. 浮動目錄 ═══ */
.films-toc {
  position: fixed; top: 50%; right: 2.2rem; transform: translateY(-50%);
  z-index: 90; background: rgba(255,255,255,.9);
  border: .5px solid #ede8de; border-left: 2px solid #c9a84c;
  padding: 1.1rem 1.3rem; max-width: 200px;
  backdrop-filter: blur(6px);
}
.films-toc-title {
  font-size: 11px; letter-spacing: 2px; color: #c9a84c;
  margin-bottom: .7rem; font-weight: 400;
}
.films-toc-group { font-size: 12px; letter-spacing: 1.5px; color: #9ab0bc; margin: .9rem 0 .2rem; }
.films-toc-group:first-of-type { margin-top: 0; }
.films-toc-sub {
  font-size: 11px; letter-spacing: 1px; color: #b9c6cf;
  margin: .2rem 0 .1rem; padding-left: 8px;
}
.films-toc a {
  display: block; font-size: 14px; color: #3d5060; text-decoration: none;
  line-height: 2.1; letter-spacing: .5px; transition: color .2s;
}
.films-toc a::before { content: '·'; color: #c9a84c; margin-right: 8px; }
.films-toc a:hover { color: #2C4A5A; }
.films-toc a.is-current { color: #c9a84c; }
.films-toc-toggle { display: none; }

/* ═══ 7. 頁尾 AI 揭露 ═══ */
.films-disclosure {
  max-width: 760px; margin: 0 auto; padding: 3.5rem 2rem 4.5rem;
  border-top: .5px solid var(--cream-dark); text-align: center;
}
/* 逐句分行置中（律師 115.07.20 指示） */
.films-disclosure p {
  font-size: 12.5px; line-height: 2.3; letter-spacing: .8px;
  color: var(--text-muted); text-align: center;
}
.films-disclosure .films-copy {
  margin-top: 1.4rem; padding-top: 1.2rem; color: var(--text-light);
  border-top: .5px solid var(--cream-dark); display: inline-block;
  font-family: 'Cormorant Garamond', serif; font-size: 13px; letter-spacing: 1.5px;
}

/* ═══ 8. 捲動進場（本頁自有 IO，不依賴 qingmo.js 白名單） ═══
   初始透明只在 html.js 下生效（head 內一行 script 掛旗標）：
   無 JS 或 script 中途失敗時內容一律可讀（115.07.21 技術體檢缺陷 1）。 */
html.js .film-reveal {
  opacity: 0; transform: translateY(24px);
  transition: opacity .9s cubic-bezier(.22,.61,.36,1),
              transform .9s cubic-bezier(.22,.61,.36,1);
}
html.js .film-reveal.is-in { opacity: 1; transform: translateY(0); }
/* 無 JS 時金線不重算路徑，預設置中路徑會壓過內容，直接收掉 */
html:not(.js) .goldline, html:not(.js) .gl-dot { display: none; }

/* ═══ 9. 行動版 ═══ */
@media (max-width: 900px) {
  .films-map { padding: 2rem 1.2rem 3rem 3.2rem; }
  .goldline { left: 24px; margin-left: -60px; }
  .film-node, .film-node--left, .film-node--right, .film-node--center {
    grid-template-columns: 1fr; max-width: 100%; text-align: left; gap: 1.6rem;
  }
  .film-node--left .film-frame, .film-node--right .film-frame,
  .film-node--left .film-meta,  .film-node--right .film-meta { grid-column: 1; }
  .film-node--left .film-frame, .film-node--right .film-frame { grid-row: 2; }
  .film-node--left .film-meta,  .film-node--right .film-meta  { grid-row: 3; }
  .film-node--center { text-align: left; }
  .film-node--center .film-meta { text-align: left; }
  .film-lead { text-align: left; margin: 2.5rem 0 1.5rem; padding: 0; }
  .series-card, .theme-card { text-align: left; padding: 2.5rem 0 1.5rem; }
  .series-rule { margin-left: 0; }
  .series-outro { text-align: left; padding: 0; }
  .film-num { font-size: 38px; }
  .film-name { font-size: 24px; }

  /* 目錄收合為右下角圓鈕 */
  .films-toc {
    top: auto; bottom: 1.4rem; right: 1.4rem; transform: none;
    max-width: calc(100vw - 2.8rem); padding: 0; border: 0; background: transparent;
    backdrop-filter: none;
  }
  .films-toc-toggle {
    display: flex; align-items: center; justify-content: center;
    width: 48px; height: 48px; margin-left: auto; border-radius: 50%;
    background: rgba(255,255,255,.94); border: 1px solid var(--gold);
    color: var(--gold); font-size: 11px; letter-spacing: 1px; cursor: pointer;
    box-shadow: 0 2px 14px rgba(44,74,90,.14);
  }
  .films-toc-panel {
    display: none; margin-bottom: .7rem; padding: 1.1rem 1.3rem;
    background: rgba(255,255,255,.95); backdrop-filter: blur(8px);
    border: .5px solid #ede8de; border-left: 2px solid #c9a84c;
    box-shadow: 0 2px 18px rgba(44,74,90,.12);
  }
  .films-toc.is-open .films-toc-panel { display: block; }
}

/* ═══ 10. 無障礙：降低動態 ═══ */
@media (prefers-reduced-motion: reduce) {
  html.js .film-reveal { opacity: 1; transform: none; transition: none; }
  .goldline-path.gl-anim { stroke-dasharray: none; stroke-dashoffset: 0; }
  .gl-dot { background: var(--gold); transition: none; }
  .film-play::before, .film-play::after { transition: none; }
  html { scroll-behavior: auto; }
}

/* ── 目錄收合制（115.07.21 優化二）：曲目僅所在區塊展開 ── */
.films-toc-group {
  display: block; width: 100%; text-align: left;
  background: transparent; border: 0; padding: 0; cursor: pointer;
  font-family: inherit;
}
.films-toc-group::after { content: ' ▾'; color: #c9a84c; font-size: 10px; }
.films-toc-group[aria-expanded="false"]::after { content: ' ▸'; }
.films-toc-songs { display: none; }
.films-toc-songs.is-open { display: block; }

/* ── 頁尾柔性過場句（115.07.21 律師採案二）── */
.films-farewell {
  margin: 2rem 0 0; font-family: 'Noto Serif TC', serif; font-weight: 300;
  font-size: 15px; letter-spacing: 2px; color: var(--text-mid) !important;
  text-align: center;
}