/* ============================================================
   hero-journey.css — 首頁主視覺「三步旅程」動畫
   情境：免費考照 → 證照登錄 → 自家佣金自己賺（約 3 秒播完，只播一次）
   部署位置：/Content/css/hero-journey.css（於 site.css 之後載入）
   依賴：site.css 的 --tw-navy / --tw-sky / --tw-gold 等 token
   規則：
   1. 只動 transform / opacity，不觸發 reflow，不產生 CLS。
   2. 預設（無 JS、或使用者開啟「減少動態效果」）= 直接顯示最終靜態畫面。
   3. 只有 JS 加上 .hj-ready 才進入「待播放」隱藏態；.hj-play 才開始播放。
   ============================================================ */

.hj {
  --hj-node: 48px;            /* 圓形節點直徑 */
  --hj-step: .9s;             /* 每一步的間隔 */
  list-style: none; margin: 0 0 24px; padding: 0;
  display: flex; align-items: flex-start; max-width: 34em;
}
.hj-step {
  position: relative; flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; align-items: center;
  text-align: center; gap: 6px;
}

/* 節點 */
.hj-node {
  position: relative; z-index: 1;
  width: var(--hj-node); height: var(--hj-node); border-radius: 50%;
  display: grid; place-items: center;
  background: #fff; color: var(--tw-navy);
  box-shadow: 0 4px 14px rgba(0,0,0,.22);
}
.hj-node svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.hj-step:last-child .hj-node { background: var(--tw-gold); color: #24180a; box-shadow: 0 4px 14px rgba(217,164,65,.45); }

/* 文字 */
.hj-label { display: block; font-size: 15px; font-weight: 700; line-height: 1.35; color: #fff; }
.hj-sub   { display: block; font-size: 12.5px; line-height: 1.4; color: #cfe4ff; }

/* 連接線：第 n 步往左連到第 n-1 步的圓心；::before 為底軌、::after 為填色 */
.hj-step + .hj-step::before,
.hj-step + .hj-step::after {
  content: ""; position: absolute; z-index: 0;
  top: calc(var(--hj-node) / 2 - 1.5px); right: 50%; width: 100%; height: 3px; border-radius: 2px;
}
.hj-step + .hj-step::before { background: rgba(255,255,255,.22); }
.hj-step + .hj-step::after  { background: linear-gradient(90deg, var(--tw-sky), var(--tw-gold)); transform-origin: left center; }

/* 終點光環（最後一個節點） */
.hj-step:last-child .hj-node::after {
  content: ""; position: absolute; inset: -2px; border-radius: 50%;
  border: 2px solid var(--tw-gold); opacity: 0; pointer-events: none;
}

/* ── 待播放狀態（僅在 JS 確認可播放時才套用） ── */
.hj-ready .hj-node  { opacity: 0; transform: scale(.4); }
.hj-ready .hj-label,
.hj-ready .hj-sub   { opacity: 0; transform: translateY(8px); }
.hj-ready .hj-step + .hj-step::after { transform: scaleX(0); }

/* ── 播放 ── */
.hj-ready.hj-play .hj-node {
  animation: hj-pop .55s cubic-bezier(.2, 1.4, .4, 1) both;
  animation-delay: calc(var(--i) * var(--hj-step) + .15s);
}
.hj-ready.hj-play .hj-label,
.hj-ready.hj-play .hj-sub {
  animation: hj-rise .45s ease-out both;
  animation-delay: calc(var(--i) * var(--hj-step) + .3s);
}
.hj-ready.hj-play .hj-step + .hj-step::after {
  animation: hj-draw .5s ease-in-out both;
  animation-delay: calc((var(--i) - 1) * var(--hj-step) + .55s);
}
.hj-ready.hj-play .hj-step:last-child .hj-node::after {
  animation: hj-ring 1.2s ease-out 2 both;
  animation-delay: 2.5s;
}
/* 主要 CTA：旅程播完後掃光一次，把視線帶到「免費輔導諮詢」 */
.hj-ready.hj-play ~ .hero-actions .btn-primary { position: relative; overflow: hidden; }
.hj-ready.hj-play ~ .hero-actions .btn-primary::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent);
  transform: translateX(0) skewX(-20deg);
  animation: hj-shine .9s ease-in-out 3s 1 both;
  pointer-events: none;
}

@keyframes hj-pop   { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: scale(1); } }
@keyframes hj-rise  { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes hj-draw  { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes hj-ring  { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(1.7); } }
@keyframes hj-shine { from { transform: translateX(0) skewX(-20deg); } to { transform: translateX(475%) skewX(-20deg); } }

/* 窄螢幕：維持橫排（避免把 CTA 擠出首屏），縮小節點 */
@media (max-width: 480px) {
  .hj { --hj-node: 42px; margin-bottom: 20px; }
  .hj-node svg { width: 21px; height: 21px; }
  .hj-label { font-size: 14px; }
  .hj-sub { font-size: 12px; }
}

/* 使用者偏好：減少動態效果 → 一律顯示靜態完成態 */
@media (prefers-reduced-motion: reduce) {
  .hj-ready .hj-node, .hj-ready .hj-label, .hj-ready .hj-sub { opacity: 1; transform: none; animation: none; }
  .hj-ready .hj-step + .hj-step::after { transform: none; animation: none; }
  .hj-step:last-child .hj-node::after, .hj-ready.hj-play ~ .hero-actions .btn-primary::after { animation: none; display: none; }
}