/* ============================================================
   flow-journey.css — 「免費輔導，五步到位」有聲導覽（旁白＋音樂＋字幕＋卡片同步）
   部署位置：/Content/css/flow-journey.css（於 site.css 之後載入）
   依賴：site.css 的 --tw-navy / --tw-sky / --tw-sky-soft / --tw-gold / --tw-ink / --tw-line / --radius / --shadow
   規則：
   1. 播放器 .fj 預設 hidden；JS 載入成功才顯示（無 JS 時頁面與原本完全相同）。
   2. 只在 JS 為區塊加上 .fj-enhanced 之後，才會改變既有 .flow-steps 卡片外觀。
   3. 動畫只用 transform / opacity（不改版面尺寸，不產生 CLS）。
   4. prefers-reduced-motion：關閉所有過渡與動畫，但狀態（高亮／已完成）仍照常切換。
   ============================================================ */

/* ── 播放器 ── */
.fj { display: grid; grid-template-columns: auto 1fr auto; gap: 12px 14px; align-items: center;
  max-width: 760px; margin: 0 auto 18px; padding: 12px 14px;
  background: #fff; border: 1px solid var(--tw-line); border-radius: 14px; box-shadow: var(--shadow); }
.fj[hidden] { display: none; }
.fj button { font-family: var(--font-sans); cursor: pointer; }
.fj button:focus-visible { outline: 3px solid var(--tw-sky); outline-offset: 2px; }

.fj-play { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 20px 0 16px;
  border: 0; border-radius: 999px; background: var(--tw-navy); color: #fff; font-size: 15.5px; font-weight: 700;
  box-shadow: 0 4px 12px rgba(11,61,145,.28); transition: transform .15s; }
.fj-play:active { transform: translateY(1px); }
.fj-play svg { width: 20px; height: 20px; fill: currentColor; flex: none; }
.fj-play .fj-i-pause, .fj-play .fj-i-redo { display: none; }
.fj[data-state="playing"] .fj-i-play, .fj[data-state="finished"] .fj-i-play { display: none; }
.fj[data-state="playing"] .fj-i-pause { display: block; }
.fj[data-state="finished"] .fj-i-redo { display: block; }

.fj-main { min-width: 0; }
.fj-cap { min-height: 3.2em; margin: 0 0 8px; font-size: 15.5px; line-height: 1.6; color: var(--tw-ink); }
.fj-cap b { color: var(--tw-navy); }
.fj-bar { height: 5px; border-radius: 3px; background: var(--tw-line); overflow: hidden; }
.fj-bar i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, var(--tw-sky), var(--tw-navy));
  transform: scaleX(0); transform-origin: left center; }
.fj.fj-nocc .fj-cap { visibility: hidden; }

.fj-tools { display: flex; gap: 6px; }
.fj-tools button { width: 44px; height: 44px; border: 1px solid var(--tw-line); border-radius: 50%; background: #fff;
  color: var(--tw-navy); font-size: 15px; font-weight: 700; display: grid; place-items: center; }
.fj-tools button svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.fj-tools button[aria-pressed="false"] { color: #8a96ab; background: #f2f4f8; }
.fj-tools button[aria-pressed="false"]::after { content: ""; position: absolute; }
.fj-tools button { position: relative; }
.fj-tools .fj-mus[aria-pressed="false"] svg, .fj-tools .fj-cc[aria-pressed="false"] svg { opacity: .55; }
.fj-note { grid-column: 1 / -1; margin: -4px 0 0; font-size: 12.5px; color: var(--tw-ink-soft); }
.fj-note:empty { display: none; }

/* 卡片在 <860px 時直向堆疊：播放器黏在頁首下方，字幕與控制鈕不會隨捲動消失（68px＝站內 .exam-toolbar 的同一算法） */
@media (max-width: 859px) {
  .fj { position: -webkit-sticky; position: sticky; top: 68px; z-index: 10; }
}
@media (max-width: 560px) {
  .fj { grid-template-columns: 1fr auto; gap: 8px 10px; padding: 10px 12px; }
  .fj-play { grid-column: 1; grid-row: 1; justify-content: center; min-height: 44px; }
  .fj-tools { grid-column: 2; grid-row: 1; }
  .fj-main { grid-column: 1 / -1; grid-row: 2; }
  .fj-cap { font-size: 14.5px; margin-bottom: 6px; }
  .fj-note { grid-row: 3; }
}

/* ── 五步卡片同步效果（僅在 JS 啟用後） ── */
.flow-band.fj-enhanced .flow-steps li { position: relative; transition: transform .35s ease, opacity .35s ease; }
.flow-band.fj-enhanced .flow-steps li::after {            /* 金色外框 */
  content: ""; position: absolute; inset: 0; border: 2px solid var(--tw-gold); border-radius: var(--radius);
  opacity: 0; transition: opacity .3s ease; pointer-events: none; }
.flow-band.fj-enhanced .flow-steps li::before {           /* 已完成勾 */
  content: "\2713"; position: absolute; top: 6px; right: 8px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--tw-navy); color: #fff; font-size: 12px; line-height: 20px; text-align: center; font-weight: 700;
  opacity: 0; transform: scale(.4); transition: opacity .3s ease, transform .3s cubic-bezier(.2, 1.4, .4, 1); }
.flow-band.fj-enhanced .flow-steps b { transition: transform .35s cubic-bezier(.2, 1.4, .4, 1), background-color .3s ease, color .3s ease; }

.flow-band.fj-enhanced .flow-steps li.fj-done::before { opacity: 1; transform: scale(1); }
.flow-band.fj-enhanced .flow-steps li.fj-on { transform: translateY(-4px) scale(1.03); z-index: 1; }
.flow-band.fj-enhanced .flow-steps li.fj-on::after { opacity: 1; }
.flow-band.fj-enhanced .flow-steps li.fj-on b { background: var(--tw-gold); color: #24180a; transform: scale(1.18); }

/* 導覽進行中：未輪到的卡片稍微淡出，把視線集中在目前這一步 */
.flow-band.fj-guided .flow-steps li { opacity: .5; }
.flow-band.fj-guided .flow-steps li.fj-done { opacity: .85; }
.flow-band.fj-guided .flow-steps li.fj-on { opacity: 1; }
.flow-band.fj-guided.fj-allDone .flow-steps li { opacity: 1; }

/* 結尾：主要按鈕脈動提示（只跑 4 次） */
.flow-band .btn-primary.fj-cta-on { animation: fj-pulse 1.4s ease-in-out 4; }
@keyframes fj-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }

@media (prefers-reduced-motion: reduce) {
  .fj-play, .flow-band.fj-enhanced .flow-steps li, .flow-band.fj-enhanced .flow-steps li::after,
  .flow-band.fj-enhanced .flow-steps li::before, .flow-band.fj-enhanced .flow-steps b { transition: none; }
  .flow-band .btn-primary.fj-cta-on { animation: none; }
  .flow-band.fj-enhanced .flow-steps li.fj-on { transform: none; }
  .flow-band.fj-enhanced .flow-steps li.fj-on b { transform: none; }
}