/* =====================================================================
   tm-motion.css — 旅遊 App 動畫模組
   ---------------------------------------------------------------------
   • 全部 class / keyframes 以 tm- 開頭，不會和現有樣式撞名
   • 不設定任何全域樣式（不碰 body、button、* 等）
   • 放在 @layer tm-motion 內：你原本的 CSS 永遠優先
   • 顏色只用 --tm-* 變數；在你自己的 CSS 把它們指向現有配色即可：
       :root { --tm-accent: var(--your-primary); ... }
   ===================================================================== */

@layer tm-motion {

/* ---------- 顏色與節奏（預設值，請在你自己的 CSS 覆寫） ---------- */
:root {
  --tm-accent:   #3E5C9A;  /* 主色：分頁指示條、按鈕 */
  --tm-warm:     #E07B4C;  /* 暖色：進行中、圖釘、錢包 */
  --tm-success:  #6E9A5B;  /* 完成打勾 */
  --tm-gold:     #D9A93B;  /* 太陽、硬幣、的士 */
  --tm-pink:     #F2A7B8;  /* 花瓣 */
  --tm-sea:      #7DB3D6;  /* 海、巴士、雨 */
  --tm-surface:  #FFFFFF;  /* 卡片底色 */
  --tm-bg:       #FFFCF6;  /* 頁面底色 */
  --tm-ink:      #3A3530;  /* 線條、文字 */
  --tm-muted:    #8A7F72;
  --tm-line:     #EADFCC;  /* 軌道、骨架 */
  --tm-on-accent:#FFFFFF;

  --tm-spring: cubic-bezier(.34,1.45,.64,1);
  --tm-soft:   cubic-bezier(.22,.8,.3,1);
  --tm-sheet-ease: cubic-bezier(.2,.95,.28,1.04);
  --tm-sheet-in:  680ms;   /* 詳情頁彈出時間：想更慢就加大 */
  --tm-sheet-out: 320ms;
  --tm-stagger-step: 60ms; /* 卡片依序出現的間隔 */
}

/* ---------- ① 切換日期／分頁轉場 ---------- */
.tm-vt { view-transition-name: tm-view; }
::view-transition-old(tm-view) { animation: tm-vt-out .28s var(--tm-soft) both; }
::view-transition-new(tm-view) { animation: tm-vt-in  .38s var(--tm-soft) both; }
.tm-vt-in { animation: tm-vt-in .38s var(--tm-soft) both; }   /* 不支援 View Transitions 的瀏覽器 */
@keyframes tm-vt-out { to   { opacity: 0; transform: translateX(calc(var(--tm-dir, 1) * -24px)); } }
@keyframes tm-vt-in  { from { opacity: 0; transform: translateX(calc(var(--tm-dir, 1) *  24px)); } }

/* 分頁滑動指示條（由 TM.tabPill 建立） */
.tm-pill-host > :not(.tm-pill) { position: relative; z-index: 1; }
.tm-pill {
  position: absolute; left: 0; top: 0; z-index: 0; pointer-events: none;
  background: var(--tm-accent); border-radius: 12px;
  transition: transform .45s var(--tm-spring), width .45s var(--tm-spring), height .3s;
}

/* ---------- ② 依序出現 + 時間軸線畫出來 ---------- */
[data-tm~="stagger"] > * { animation: tm-rise .5s var(--tm-soft) both; }
[data-tm~="stagger"] > :nth-child(1)  { animation-delay: calc(var(--tm-stagger-step) * 0  + 80ms); }
[data-tm~="stagger"] > :nth-child(2)  { animation-delay: calc(var(--tm-stagger-step) * 1  + 80ms); }
[data-tm~="stagger"] > :nth-child(3)  { animation-delay: calc(var(--tm-stagger-step) * 2  + 80ms); }
[data-tm~="stagger"] > :nth-child(4)  { animation-delay: calc(var(--tm-stagger-step) * 3  + 80ms); }
[data-tm~="stagger"] > :nth-child(5)  { animation-delay: calc(var(--tm-stagger-step) * 4  + 80ms); }
[data-tm~="stagger"] > :nth-child(6)  { animation-delay: calc(var(--tm-stagger-step) * 5  + 80ms); }
[data-tm~="stagger"] > :nth-child(7)  { animation-delay: calc(var(--tm-stagger-step) * 6  + 80ms); }
[data-tm~="stagger"] > :nth-child(8)  { animation-delay: calc(var(--tm-stagger-step) * 7  + 80ms); }
[data-tm~="stagger"] > :nth-child(9)  { animation-delay: calc(var(--tm-stagger-step) * 8  + 80ms); }
[data-tm~="stagger"] > :nth-child(10) { animation-delay: calc(var(--tm-stagger-step) * 9  + 80ms); }
[data-tm~="stagger"] > :nth-child(n+11) { animation-delay: calc(var(--tm-stagger-step) * 10 + 80ms); }
@keyframes tm-rise { from { opacity: 0; transform: translateY(10px) scale(.98); } }

/* 加在時間軸那條直線的元素上，由上往下畫出來 */
[data-tm~="draw-y"] { transform-origin: top; animation: tm-draw-y .7s var(--tm-soft) both; }
@keyframes tm-draw-y { from { transform: scaleY(0); } }

/* ---------- ③ 進行中：呼吸小圓點 ---------- */
.tm-pulse {
  display: inline-block; position: relative; width: 10px; height: 10px; flex: none;
  border-radius: 50%; background: var(--tm-warm); vertical-align: middle;
}
.tm-pulse::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--tm-warm);
  animation: tm-breathe 2.2s ease-out infinite;
}
@keyframes tm-breathe { 0% { transform: scale(1); opacity: .55; } 100% { transform: scale(2.6); opacity: 0; } }

/* 不佔任何空間的版本：直接加在你「現有」的時間線圓點上
   <span class="你的圓點" data-tm="pulse"></span>
   只用 box-shadow 畫擴散的光圈，不改大小、位置、顏色，也不用 ::before/::after */
[data-tm~="pulse"] { animation: tm-ring 2.2s ease-out infinite; }
@keyframes tm-ring {
  0%   { box-shadow: 0 0 0 0   color-mix(in srgb, var(--tm-warm) 55%, transparent); }
  100% { box-shadow: 0 0 0 12px color-mix(in srgb, var(--tm-warm) 0%,  transparent); }
}

/* ---------- ④ 記帳：硬幣 ---------- */
.tm-coin { position: fixed; z-index: 9999; width: 24px; height: 24px; pointer-events: none; }
.tm-count { font-variant-numeric: tabular-nums; }

/* ---------- ⑤ 天氣小插圖 ---------- */
.tm-wx { display: inline-block; width: 40px; height: 40px; flex: none; vertical-align: middle; }
.tm-wx svg { width: 100%; height: 100%; display: block; }
.tm-wx .tm-rays    { transform-origin: 20px 20px; animation: tm-spin 14s linear infinite; }
.tm-wx .tm-sm-rays { transform-origin: 14px 14px; animation: tm-spin 14s linear infinite; }
.tm-wx .tm-cl      { animation: tm-drift 4s ease-in-out infinite alternate; }
.tm-wx .tm-drop    { animation: tm-drop 1.2s ease-in infinite; }
.tm-wx .tm-drop:nth-of-type(2) { animation-delay: .4s; }
.tm-wx .tm-drop:nth-of-type(3) { animation-delay: .8s; }
.tm-wx .tm-flake   { animation: tm-flake 2.4s linear infinite; }
.tm-wx .tm-flake:nth-of-type(2) { animation-delay: .8s; }
.tm-wx .tm-flake:nth-of-type(3) { animation-delay: 1.6s; }
@keyframes tm-spin  { to { transform: rotate(360deg); } }
@keyframes tm-drift { to { transform: translateX(3px); } }
@keyframes tm-drop  { 0% { transform: translateY(-2px); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(8px); opacity: 0; } }
@keyframes tm-flake { 0% { transform: translate(0,-3px); opacity: 0; } 25% { opacity: 1; } 100% { transform: translate(2px,9px); opacity: 0; } }

/* ---------- ⑤ 交通小插圖 ---------- */
.tm-track { position: relative; height: 30px; overflow: hidden; border-radius: 6px; width: 100%; }
.tm-track .tm-rider { position: absolute; bottom: 6px; left: 0; }
.tm-track svg { display: block; }
@keyframes tm-bob   { to { transform: translateY(-1px); } }
@keyframes tm-flick { to { opacity: .2; } }

/* 電車 */
.tm-t-train::before { content: ""; position: absolute; left: 0; right: 0; bottom: 4px; height: 2px; background: var(--tm-line); }
.tm-t-train .tm-rider { animation: tm-ride 6s ease-in-out infinite; }
.tm-t-train .tm-rider svg { animation: tm-bob .4s ease-in-out infinite alternate; }
@keyframes tm-ride { 0% { left: 0; } 45%, 55% { left: calc(100% - 40px); } 100% { left: 0; } }

/* 新幹線 */
.tm-t-shin::before, .tm-t-shin::after { content: ""; position: absolute; left: 0; right: 0; height: 2px; background: var(--tm-line); }
.tm-t-shin::before { bottom: 4px; } .tm-t-shin::after { bottom: 1px; opacity: .6; }
.tm-t-shin .tm-rider { animation: tm-zoom 2.6s cubic-bezier(.7,0,.3,1) infinite; }
.tm-t-shin .tm-speed line { animation: tm-flick .25s linear infinite alternate; }
.tm-t-shin .tm-speed line:nth-child(2) { animation-delay: .1s; }
@keyframes tm-zoom { 0% { left: -100px; } 100% { left: calc(100% + 10px); } }

/* 踴子號：沿海岸 */
.tm-t-odo { height: 38px; }
.tm-t-odo .tm-sea { position: absolute; left: 0; bottom: 0; width: 200%; height: 10px; animation: tm-waves 4s linear infinite; }
.tm-t-odo::before { content: ""; position: absolute; left: 0; right: 0; bottom: 12px; height: 2px; background: var(--tm-line); }
.tm-t-odo .tm-rider { bottom: 14px; animation: tm-ride 8s ease-in-out infinite; }
.tm-t-odo .tm-rider svg { animation: tm-bob .6s ease-in-out infinite alternate; }
.tm-t-odo .tm-gull { position: absolute; top: 2px; right: 18%; animation: tm-glide 5s ease-in-out infinite alternate; }
@keyframes tm-waves { to { transform: translateX(-50%); } }
@keyframes tm-glide { to { transform: translate(-24px, 4px); } }

/* 步行 */
.tm-t-walk::before { content: ""; position: absolute; left: 0; right: 0; bottom: 4px; border-top: 2px dotted var(--tm-line); }
.tm-t-walk .tm-steps { position: absolute; inset: 0 0 6px 0; display: flex; align-items: flex-end; justify-content: space-around; }
.tm-t-walk .tm-steps svg { opacity: 0; animation: tm-step 3.2s ease-out infinite; animation-delay: calc(var(--tm-k) * .35s); }
.tm-t-walk .tm-steps svg:nth-child(even) { transform: translateY(-6px); }
@keyframes tm-step { 0%, 8% { opacity: 0; } 14% { opacity: 1; } 70% { opacity: .85; } 100% { opacity: 0; } }

/* 的士 */
.tm-t-taxi::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 8px; background: var(--tm-line); border-radius: 4px; }
.tm-t-taxi::after  { content: ""; position: absolute; left: 0; right: 0; bottom: 3.5px; height: 1px; background: repeating-linear-gradient(90deg, var(--tm-bg) 0 8px, transparent 8px 16px); animation: tm-road .6s linear infinite; }
.tm-t-taxi .tm-rider { bottom: 6px; animation: tm-drive 5s cubic-bezier(.45,0,.25,1) infinite; }
.tm-t-taxi .tm-car   { animation: tm-bob .3s ease-in-out infinite alternate; }
.tm-t-taxi .tm-lamp  { animation: tm-flick .8s steps(2) infinite; }
.tm-t-taxi .tm-flag  { position: absolute; right: 6px; bottom: 8px; }
@keyframes tm-drive { 0% { left: -50px; } 70%, 85% { left: calc(100% - 64px); } 100% { left: calc(100% + 10px); } }
@keyframes tm-road  { to { background-position: -16px 0; } }
.tm-wheel { transform-box: fill-box; transform-origin: center; animation: tm-spin .5s linear infinite; }

/* 巴士：進站、車身下沉、開門、開走 */
.tm-t-bus::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 8px; background: var(--tm-line); border-radius: 4px; }
.tm-t-bus .tm-rider   { bottom: 6px; animation: tm-busgo 6s cubic-bezier(.45,0,.3,1) infinite; }
.tm-t-bus .tm-busbody { transform-box: fill-box; transform-origin: 80% 100%; animation: tm-kneel 6s ease-in-out infinite; }
.tm-t-bus .tm-door    { animation: tm-door 6s steps(1) infinite; }
.tm-t-bus .tm-stop    { position: absolute; left: 62%; bottom: 8px; }
.tm-t-bus .tm-wait    { transform-box: fill-box; transform-origin: 50% 100%; animation: tm-waitp 6s ease-in-out infinite; }
@keyframes tm-busgo { 0% { left: -64px; } 38%, 62% { left: calc(62% - 52px); } 100% { left: calc(100% + 10px); } }
@keyframes tm-kneel { 0%, 38%, 62%, 100% { transform: none; } 44%, 56% { transform: rotate(1.6deg) translateY(1px); } }
@keyframes tm-door  { 0%, 44% { opacity: 0; } 45%, 56% { opacity: 1; } 57% { opacity: 0; } }
@keyframes tm-waitp { 0%, 46% { opacity: 1; transform: none; } 52% { opacity: 1; transform: translateX(-8px); } 54%, 100% { opacity: 0; transform: translateX(-10px); } }

/* ---------- ⑥ 打勾：勾勾畫出來 + 花瓣星星 ---------- */
.tm-checkmark { display: block; }
.tm-checkmark path {
  fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 20; stroke-dashoffset: 20; transition: stroke-dashoffset .15s;
}
.tm-on .tm-checkmark path, .tm-on.tm-checkmark path { stroke-dashoffset: 0; transition: stroke-dashoffset .3s .1s ease-out; }
.tm-pop { animation: tm-pop .35s var(--tm-spring); }
@keyframes tm-pop { 0% { transform: scale(.7); } 100% { transform: scale(1); } }

.tm-bit { position: fixed; z-index: 9999; width: 8px; height: 8px; pointer-events: none; animation: tm-burst .75s ease-out forwards; }
.tm-bit.tm-petal { border-radius: 60% 0 60% 0; }
.tm-bit.tm-star  { width: 10px; height: 10px; clip-path: polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%); }
@keyframes tm-burst {
  from { transform: translate(-50%,-50%) rotate(0) scale(1); opacity: 1; }
  to   { transform: translate(calc(-50% + var(--tm-x)), calc(-50% + var(--tm-y))) rotate(var(--tm-r, 220deg)) scale(.4); opacity: 0; }
}

/* 進度條（TM.progress）：外層用你自己的樣式，填色條加 data-tm-fill */
[data-tm-fill] { transition: width .5s var(--tm-spring); }
.tm-shine { animation: tm-shine 1s ease-out; }
@keyframes tm-shine { 40% { filter: brightness(1.35); } }

/* ---------- ⑦ 骨架載入、空白插圖漂浮、下拉重新整理 ---------- */
.tm-skeleton {
  border-radius: 14px; min-height: 16px;
  background: linear-gradient(100deg, var(--tm-surface) 30%, var(--tm-line) 50%, var(--tm-surface) 70%) 0 0 / 300% 100%;
  animation: tm-shimmer 1.2s linear infinite;
}
.tm-skeleton-list { display: flex; flex-direction: column; gap: 12px; }
@keyframes tm-shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }

.tm-float { animation: tm-float 3.6s ease-in-out infinite; }
@keyframes tm-float { 50% { transform: translateY(-6px) rotate(-2deg); } }

.tm-pull {
  height: 0; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  gap: 2px; font-size: 12px; color: var(--tm-muted); transition: height .35s var(--tm-spring);
}
.tm-pull.tm-dragging { transition: none; }
.tm-mochi { transform-origin: 50% 100%; }
.tm-pull.tm-ready   .tm-mochi { animation: tm-wiggle .5s ease-in-out infinite alternate; }
.tm-pull.tm-loading .tm-mochi { animation: tm-hop .5s var(--tm-spring) infinite alternate; }
.tm-pull.tm-loading .tm-eye   { transform-box: fill-box; transform-origin: center; animation: tm-blink 1.6s infinite; }
@keyframes tm-wiggle { from { transform: rotate(-6deg); } to { transform: rotate(6deg); } }
@keyframes tm-hop    { from { transform: translateY(0) scale(1.06,.92); } to { transform: translateY(-8px) scale(.96,1.04); } }
@keyframes tm-blink  { 0%, 90%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }

/* ---------- ⑧ 詳情頁內的小動畫 ---------- */
/* 地圖插圖的圖釘落下、路線流動（若你的詳情頁有用到 TM.miniMap） */
.tm-map { position: relative; border-radius: 16px; overflow: hidden; background: color-mix(in srgb, var(--tm-accent) 12%, var(--tm-bg)); height: 130px; }
.tm-map svg { width: 100%; height: 100%; display: block; }
.tm-map .tm-route { stroke-dasharray: 6 6; animation: tm-march 1s linear infinite; }
.tm-map .tm-pin   { transform-box: fill-box; transform-origin: 50% 100%; animation: tm-pindrop .7s var(--tm-spring) .5s both; }
.tm-map .tm-ring  { transform-box: fill-box; transform-origin: center; animation: tm-breathe 2s ease-out 1.1s infinite; }
@keyframes tm-march   { to { stroke-dashoffset: -12; } }
@keyframes tm-pindrop { 0% { transform: translateY(-40px) scale(.8); opacity: 0; } 60% { opacity: 1; } 100% { transform: none; } }
.tm-ghost { position: fixed; z-index: 9998; margin: 0; pointer-events: none; }

/* ---------- 關閉動畫：系統「減少動態效果」或 TM.setMotion(false) ---------- */
@media (prefers-reduced-motion: reduce) {
  [class*="tm-"], [class*="tm-"]::before, [class*="tm-"]::after,
  [class*="tm-"] *, [data-tm] > *, [data-tm-fill], [data-tm~="pulse"], [data-tm~="draw-y"] {
    animation: none !important; transition: none !important;
  }
}
:root[data-tm-motion="off"] [class*="tm-"],
:root[data-tm-motion="off"] [class*="tm-"]::before,
:root[data-tm-motion="off"] [class*="tm-"]::after,
:root[data-tm-motion="off"] [class*="tm-"] *,
:root[data-tm-motion="off"] [data-tm] > *,
:root[data-tm-motion="off"] [data-tm-fill],
:root[data-tm-motion="off"] [data-tm~="pulse"],
:root[data-tm-motion="off"] [data-tm~="draw-y"] {
  animation: none !important; transition: none !important;
}
@media (prefers-reduced-motion: reduce) { .tm-t-walk .tm-steps svg { opacity: 1; } }
:root[data-tm-motion="off"] .tm-t-walk .tm-steps svg { opacity: 1; }
:root[data-tm-motion="off"] ::view-transition-group(*),
:root[data-tm-motion="off"] ::view-transition-old(*),
:root[data-tm-motion="off"] ::view-transition-new(*) { animation: none !important; }

} /* end @layer tm-motion */