/* =====================================================================
   tm-plane.css — 飛機交通小插圖（tm-motion 的附加檔）
   • 與 tm-motion.css 一起用時，自動使用同一套 --tm-* 顏色
   • 單獨使用也可以：每個顏色都有預設值
   • 同樣放在 @layer tm-motion，不會蓋過你原本的樣式
   ===================================================================== */
@layer tm-motion {

.tm-track.tm-t-plane, .tm-t-plane {
  position: relative; width: 100%; height: 48px; overflow: hidden; border-radius: 6px;
}

/* 跑道：底線 + 中線虛線 + 會閃的跑道燈 */
.tm-t-plane .tm-runway {
  position: absolute; left: 0; width: 46%; bottom: 0; height: 6px; border-radius: 3px;
  background: var(--tm-line, #EADFCC);
}
.tm-t-plane .tm-runway::after {
  content: ""; position: absolute; left: 6px; right: 6px; top: 2.5px; height: 1px;
  background: repeating-linear-gradient(90deg, var(--tm-bg, #FFFCF6) 0 6px, transparent 6px 12px);
}
.tm-t-plane .tm-lights { position: absolute; left: 47%; bottom: 1px; display: flex; gap: 4px; }
.tm-t-plane .tm-lights i {
  width: 4px; height: 4px; border-radius: 50%; background: var(--tm-gold, #D9A93B);
  animation: tm-plane-blink 1.2s steps(2) infinite;
}
.tm-t-plane .tm-lights i:nth-child(2) { animation-delay: .2s; }
.tm-t-plane .tm-lights i:nth-child(3) { animation-delay: .4s; }

/* 雲：慢慢由右飄到左 */
.tm-t-plane .tm-cloud {
  position: absolute; top: 4px; right: -40px;
  animation: tm-plane-cloud 9s linear infinite;
}
.tm-t-plane .tm-cloud.tm-c2 { top: 14px; animation-duration: 13s; animation-delay: -6s; opacity: .7; }

/* 飛機：滑行 → 拉起 → 收輪子 → 爬升飛出 */
.tm-t-plane .tm-rider {
  position: absolute; left: 40%; bottom: 14px;          /* 靜止（關閉動畫）時的位置 */
  transform: rotate(-10deg); transform-origin: 30% 80%;
  animation: tm-plane-takeoff 6s cubic-bezier(.45,0,.4,1) infinite;
}
.tm-t-plane .tm-rider svg { display: block; }
.tm-t-plane .tm-body  { animation: tm-plane-bob .5s ease-in-out infinite alternate; }
.tm-t-plane .tm-gear  { animation: tm-plane-gear 6s linear infinite; }
.tm-t-plane .tm-trail { opacity: 0; animation: tm-plane-trail 6s linear infinite; }
.tm-t-plane .tm-trail line { animation: tm-plane-flick .25s linear infinite alternate; }
.tm-t-plane .tm-trail line:nth-child(2) { animation-delay: .12s; }

/* 降落版：由左上方下降 → 放輪子 → 着陸 → 滑行減速停下（跑道在右邊） */
.tm-t-plane.tm-land .tm-runway { left: auto; right: 0; }
.tm-t-plane.tm-land .tm-lights { left: calc(54% - 22px); }
.tm-t-plane.tm-land .tm-rider {
  left: calc(100% - 84px); bottom: 6px; transform: none;   /* 靜止時：停在跑道上 */
  animation: tm-plane-landing 7s cubic-bezier(.4,0,.5,1) infinite;
}
.tm-t-plane.tm-land .tm-gear  { animation: tm-plane-gear-down 7s linear infinite; }
.tm-t-plane.tm-land .tm-trail { animation: tm-plane-trail-land 7s linear infinite; }

@keyframes tm-plane-landing {
  0%   { left: -70px; bottom: 34px; transform: rotate(7deg);  opacity: 1; }
  12%  { left: 6%;    bottom: 30px; transform: rotate(7deg); }
  38%  { left: 40%;   bottom: 15px; transform: rotate(6deg); }
  47%  { left: 53%;   bottom: 7px;  transform: rotate(-3deg); }   /* 拉平 */
  53%  { left: 59%;   bottom: 6px;  transform: rotate(0); }       /* 着陸 */
  78%  { left: calc(100% - 84px); bottom: 6px; transform: rotate(0); opacity: 1; }
  92%  { left: calc(100% - 84px); bottom: 6px; opacity: 1; }
  99%, 100% { left: calc(100% - 84px); bottom: 6px; opacity: 0; }
}
@keyframes tm-plane-gear-down  { 0%, 24% { opacity: 0; } 32%, 100% { opacity: 1; } }
@keyframes tm-plane-trail-land { 0%, 4% { opacity: 0; } 10%, 40% { opacity: 1; } 48%, 100% { opacity: 0; } }

@keyframes tm-plane-takeoff {
  0%   { left: -60px; bottom: 6px;  transform: rotate(0); }
  12%  { left: 2%;    bottom: 6px;  transform: rotate(0); }
  36%  { left: 34%;   bottom: 6px;  transform: rotate(0); }
  44%  { left: 44%;   bottom: 10px; transform: rotate(-10deg); }
  66%  { left: 72%;   bottom: 26px; transform: rotate(-13deg); }
  82%  { left: calc(100% + 12px); bottom: 34px; transform: rotate(-8deg); }
  100% { left: calc(100% + 12px); bottom: 34px; transform: rotate(-8deg); }
}
@keyframes tm-plane-gear  { 0%, 46% { opacity: 1; } 52%, 100% { opacity: 0; } }
@keyframes tm-plane-trail { 0%, 42% { opacity: 0; } 50%, 78% { opacity: 1; } 84%, 100% { opacity: 0; } }
@keyframes tm-plane-bob   { to { transform: translateY(-.6px); } }
@keyframes tm-plane-flick { to { opacity: .25; } }
@keyframes tm-plane-blink { 50% { opacity: .25; } }
@keyframes tm-plane-cloud { to { transform: translateX(calc(-100cqw - 80px)); } }
.tm-t-plane { container-type: inline-size; }

/* 關閉動畫：系統「減少動態效果」或 TM.setMotion(false) */
@media (prefers-reduced-motion: reduce) {
  .tm-t-plane, .tm-t-plane * { animation: none !important; }
  .tm-t-plane .tm-cloud { right: 30%; }
  .tm-t-plane .tm-cloud.tm-c2 { right: 58%; }
  .tm-t-plane.tm-land .tm-trail { opacity: 0; }
}
:root[data-tm-motion="off"] .tm-t-plane,
:root[data-tm-motion="off"] .tm-t-plane * { animation: none !important; }
:root[data-tm-motion="off"] .tm-t-plane .tm-cloud { right: 30%; }
:root[data-tm-motion="off"] .tm-t-plane .tm-cloud.tm-c2 { right: 58%; }

}