/* =====================================================================
   tm-shuttle.css — 酒店接駁車交通動畫（tm-motion 的附加檔）
   和其他交通一樣是一條 30px 高的動畫小條：
   小型接駁車駛到酒店門口 → 停車、側門滑開 → 行李箱跳進酒店 → 開走
   ===================================================================== */
@layer tm-motion {

.tm-track.tm-t-shuttle, .tm-t-shuttle {
  position: relative; width: 100%; height: 30px; overflow: hidden; border-radius: 6px;
}
/* 路面 */
.tm-t-shuttle::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 6px;
  background: var(--tm-line, #EADFCC); border-radius: 3px;
}
.tm-t-shuttle .tm-hotel { position: absolute; right: 4px; bottom: 4px; }
.tm-t-shuttle .tm-hotel .tm-hdoor { animation: tm-sh-hdoor 6s steps(1) infinite; }

/* 接駁車：靜止時停在酒店前 */
.tm-t-shuttle .tm-rider {
  position: absolute; left: calc(100% - 80px); bottom: 4px;
  animation: tm-sh-drive 6s cubic-bezier(.45,0,.3,1) infinite;
}
.tm-t-shuttle .tm-rider svg { display: block; }
.tm-t-shuttle .tm-van  { animation: tm-sh-bump .32s ease-in-out infinite alternate; }
.tm-t-shuttle .tm-sdoor { animation: tm-sh-door 6s ease-in-out infinite; }
.tm-t-shuttle .tm-wheel { transform-box: fill-box; transform-origin: center; animation: tm-sh-wheels 6s cubic-bezier(.45,0,.3,1) infinite;  /* 停車時輪子也停 */ }

/* 行李箱：從車門跳進酒店 */
.tm-t-shuttle .tm-bag {
  position: absolute; left: calc(100% - 50px); bottom: 7px; opacity: 0;
  animation: tm-sh-bag 6s ease-in-out infinite;
}

@keyframes tm-sh-drive {
  0%       { left: -50px; opacity: 1; }
  38%      { left: calc(100% - 80px); }
  80%      { left: calc(100% - 80px); opacity: 1; }
  92%, 100%{ left: calc(100% + 10px); opacity: 1; }
}
@keyframes tm-sh-door {
  0%, 42%  { transform: none; }
  48%, 70% { transform: translateX(-6px); }
  76%, 100%{ transform: none; }
}
@keyframes tm-sh-bag {
  0%, 50%  { opacity: 0; left: calc(100% - 50px); bottom: 7px; }
  52%      { opacity: 1; left: calc(100% - 50px); bottom: 7px; }
  58%      { opacity: 1; left: calc(100% - 36px); bottom: 15px; }
  64%      { opacity: 1; left: calc(100% - 23px); bottom: 5px; }
  68%, 100%{ opacity: 0; left: calc(100% - 23px); bottom: 5px; }
}
@keyframes tm-sh-hdoor { 0%, 60% { opacity: .7; } 61%, 70% { opacity: 1; } 71%, 100% { opacity: .7; } }
@keyframes tm-sh-bump  { to { transform: translateY(-1px); } }
@keyframes tm-sh-wheels { 0% { transform: rotate(0); } 38%, 80% { transform: rotate(1440deg); } 92%, 100% { transform: rotate(1800deg); } }

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

}