/* =====================================================================
   tm-ropeway.css — 纜車交通動畫（tm-motion 的附加檔）
   和其他交通一樣是一條 30px 高的動畫小條：
   車廂沿斜纜索上山 → 到站輕搖 → 下山 → 到站輕搖
   ===================================================================== */
@layer tm-motion {

.tm-track.tm-t-rope, .tm-t-rope {
  position: relative; width: 100%; height: 30px; overflow: hidden; border-radius: 6px;
}
.tm-t-rope .tm-cable { position: absolute; inset: 0; width: 100%; height: 100%; }

/* 纜索：(0, 12px) → (100%, 3px)；車廂吊在纜索上 */
.tm-t-rope .tm-rider {
  position: absolute; left: 50%; top: 7.5px; margin-left: -8px;   /* 靜止時在中段 */
  animation: tm-rope-move 7s cubic-bezier(.55,0,.45,1) infinite;
}
.tm-t-rope .tm-rider svg {
  display: block; transform-origin: 50% 0;
  animation: tm-rope-sway 7s ease-in-out infinite;
}
@keyframes tm-rope-move {
  0%, 8%   { left: 6%;  top: 11.5px; }   /* 下站 */
  48%, 56% { left: 94%; top: 3.5px; }    /* 上站 */
  100%     { left: 6%;  top: 11.5px; }
}
@keyframes tm-rope-sway {
  0%   { transform: rotate(0); }
  10%  { transform: rotate(5deg); }
  14%  { transform: rotate(-2deg); }
  18%, 42% { transform: rotate(1deg); }
  48%  { transform: rotate(-6deg); }
  52%  { transform: rotate(3deg); }
  56%  { transform: rotate(-4deg); }
  60%  { transform: rotate(2deg); }
  64%, 92% { transform: rotate(-1deg); }
  100% { transform: rotate(6deg); }
}

@media (prefers-reduced-motion: reduce) { .tm-t-rope, .tm-t-rope * { animation: none !important; } }
:root[data-tm-motion="off"] .tm-t-rope,
:root[data-tm-motion="off"] .tm-t-rope * { animation: none !important; }

}