/* Transport switches v4 (by Hamed) — site integration build. Core: upload.html <style> minus demo stage rules. */
/* ==================================================================
   سوییچ وسایل حمل‌ونقل — نسخه ۴ (هسته مشترک)
   هر سوییچ = یک صحنه SVG کامل (زمین واقعی + وسیله + تجهیزات کاربردی).
   اندازه کل سوییچ فقط با --ts-k عوض می‌شود (۱ = ۱۸۴×۸۰ پیکسل).
   ================================================================== */
:root {
  --ts-k: 1;                                   /* ضریب اندازه */
  --ts-w: calc(184px * var(--ts-k));           /* عرض صحنه */
  --ts-h: calc(80px * var(--ts-k));            /* ارتفاع صحنه */
  --ts-dur: .95s;                              /* زمان حرکت وسیله */
  --ts-ease: cubic-bezier(.55, .06, .22, 1.02);/* شتاب‌گیری و ترمز نرم */
  --ts-led-1: #ffb340;                         /* حلقه LED نارنجی */
  --ts-led-2: #ff7d00;
  --ts-led-3: #f96302;
}

.cp-ts, .cp-ts *, .cp-ts *::before, .cp-ts *::after { box-sizing: border-box; }

/* ---------- ردیف هر سوییچ (مجزا و مستقل) ---------- */
.ts-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 2px; border-top: 1px dashed rgba(255,255,255,.1);
}
.ts-meta { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ts-name { font-size: 14.5px; font-weight: 800; color: #f1f5f9; }
.ts-st {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; font-weight: 700; color: #7d8aa3; line-height: 1.6; transition: color .3s;
}
.ts-st::before {
  content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%;
  background: #3b4558; box-shadow: inset 0 1px 1px rgba(0,0,0,.5); transition: background .3s, box-shadow .3s;
}
.ts-row.is-on .ts-st { color: #ff9a1f; }
.ts-row.is-on .ts-st::before { background: #ff9a1f; box-shadow: 0 0 6px 1px rgba(255,140,30,.75); }

/* ---------- خود سوییچ ---------- */
.ts { position: relative; display: inline-block; flex: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.ts input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }

/* قاب بیضی فلزی + حلقه LED */
.ts-frame {
  position: relative; display: block; padding: 5px; border-radius: 999px;
  background: linear-gradient(180deg, #56627b 0%, #1a2131 48%, #10151f 62%, #2a3449 100%);
  box-shadow: 0 12px 24px -10px rgba(0,0,0,.7),
              inset 0 1px 0 rgba(255,255,255,.28),
              inset 0 -2px 5px rgba(0,0,0,.65);
  transition: box-shadow .45s ease;
}
.ts-frame::before {             /* LED نارنجی دور صحنه */
  content: ""; position: absolute; inset: 2px; border-radius: inherit;
  background: linear-gradient(135deg, var(--ts-led-1), var(--ts-led-2) 55%, var(--ts-led-3));
  opacity: 0; transition: opacity .45s ease;
}
.ts-track {
  position: relative; z-index: 1; display: block; width: var(--ts-w); height: var(--ts-h);
  border-radius: 999px; overflow: hidden; isolation: isolate; background: #0d1424;
  transform: translateZ(0); transition: transform .2s ease;
}
.ts-scene { display: block; width: 100%; height: 100%; }
.ts-track::after {              /* شیشه محافظ: عمق داخلی + انعکاس */
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,.13) 0%, rgba(255,255,255,.03) 34%, transparent 35%);
  box-shadow: inset 0 3px 8px rgba(0,0,0,.65), inset 0 -2px 4px rgba(0,0,0,.45), inset 0 0 0 1px rgba(0,0,0,.5);
}
.ts :checked + .ts-frame::before { opacity: 1; }
.ts :checked + .ts-frame {
  box-shadow: 0 12px 30px -8px rgba(255,125,0,.55), 0 0 0 1px rgba(255,150,50,.35),
              inset 0 1px 0 rgba(255,255,255,.28), inset 0 -2px 5px rgba(0,0,0,.65);
}
.ts:active .ts-track { transform: translateZ(0) scale(.985); }
.ts :focus-visible + .ts-frame { outline: 2px solid var(--ts-led-1); outline-offset: 3px; }

/* ---------- ابزارهای مشترک صحنه ---------- */
.ts-scene * { transform-box: view-box; transform-origin: 0 0; }
.ts-dim { fill: #050912; opacity: .44; transition: opacity .6s ease; }
.ts :checked + .ts-frame .ts-dim { opacity: 0; }
.ts-veh { transition: transform var(--ts-dur) var(--ts-ease); }
.ts-roll { transition: transform var(--ts-dur) var(--ts-ease); }
.ts-spin { animation: ts-spin .5s linear infinite paused; }
.ts :checked + .ts-frame .ts-spin { animation-play-state: running; }
.ts-run { animation-play-state: paused !important; }
.ts :checked + .ts-frame .ts-run { animation-play-state: running !important; }
.ts-lit { opacity: 0; transition: opacity .35s ease; }
.ts :checked + .ts-frame .ts-lit { opacity: 1; }
.ts-unlit { transition: opacity .35s ease; }
.ts :checked + .ts-frame .ts-unlit { opacity: 0; }
@keyframes ts-spin { to { transform: rotate(-360deg); } }
@keyframes ts-blink { 0%, 62%, 100% { opacity: 0; } 66%, 74% { opacity: 1; } }

/* ---------- خروجی متصل (نمایش داده‌ای که به فرم/بک‌اند می‌رود) ---------- */
.ts-out {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 6px;
  padding: 10px 12px; border-radius: 12px; background: rgba(0,0,0,.25); border: 1px solid rgba(255,255,255,.06);
}
.ts-out-k { font-size: 11.5px; font-weight: 700; color: #94a3b8; }
.ts-out-v { direction: ltr; font: 600 11.5px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; color: #ffb35a; }

@media (prefers-reduced-motion: reduce) {
  :root { --ts-dur: .01s; }
  .ts-scene *, .ts-scene *::before { animation: none !important; transition-duration: .01s !important; transition-delay: 0s !important; }
}

/* ---------- حمل هوایی: هواپیما / باند فرودگاه ---------- */
.ts--air .ts-veh { transition-duration: 1.1s; transition-timing-function: cubic-bezier(.55, 0, .35, 1); transition-delay: .25s; }
.ts--air .ar-flow { animation: ar-flow .2s linear infinite; }          /* سرعت برخاست */
.ts--air .ar-exh { animation: ar-heat .18s steps(2) infinite; }

/* خاموش: فرود → چرخ‌ها باز، ارتفاع صفر، سایه کامل */
.ts--air .ar-lift { transition: transform .55s cubic-bezier(.4, 0, .6, 1) .1s; }
.ts--air .ar-shd { transition: transform .55s ease .1s, opacity .55s ease .1s; }
.ts--air .ar-gear, .ts--air .ar-ngear { transition: transform .3s ease, opacity .3s ease; }
.ts--air .ar-float { animation: none; }
.ts--air .ar-bcn-g, .ts--air .ar-bcn-w, .ts--air .ar-bcn, .ts--air .ar-strobe { opacity: 0; }

/* روشن: ۱) چراغ‌ها  ۲) دویدن روی باند  ۳) چرخش دماغه و جدا شدن  ۴) جمع شدن چرخ‌ها */
.ts--air :checked + .ts-frame .ts-veh { transform: translateX(-90px); transition-delay: .3s; }
.ts--air :checked + .ts-frame .ar-lift { transform: translateY(-11px) rotate(5deg); transition: transform .75s cubic-bezier(.3, 0, .3, 1) .85s; }
.ts--air :checked + .ts-frame .ar-shd { transform: scale(.7, .6); opacity: .35; transition: transform .75s ease .85s, opacity .75s ease .85s; }
.ts--air :checked + .ts-frame .ar-gear { transform: scaleY(.1); opacity: 0; transition-delay: 1.45s; }
.ts--air :checked + .ts-frame .ar-ngear { transform: rotate(80deg) scale(.6); opacity: 0; transition-delay: 1.45s; }
.ts--air :checked + .ts-frame .ar-float { animation: ar-float 2.8s ease-in-out 1.7s infinite; }
.ts--air :checked + .ts-frame .ar-bcn-g { animation: ar-flash 1.6s linear infinite; }
.ts--air :checked + .ts-frame .ar-bcn-w { animation: ar-flash 1.6s linear .8s infinite; }
.ts--air :checked + .ts-frame .ar-bcn { animation: ts-blink 1.3s linear infinite; }
.ts--air :checked + .ts-frame .ar-strobe { animation: ar-strobe 1.5s linear .3s infinite; }

@keyframes ar-flow { to { transform: translateX(20px); } }
@keyframes ar-heat { 50% { opacity: .55; } }
@keyframes ar-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-.6px); } }
@keyframes ar-flash { 0%, 100% { opacity: 0; } 8%, 20% { opacity: 1; } 30% { opacity: 0; } }
@keyframes ar-strobe { 0%, 100% { opacity: 0; } 4% { opacity: 1; } 8% { opacity: 0; } 14% { opacity: 1; } 18% { opacity: 0; } }

/* ---------- حمل زمینی: کامیون / جاده ---------- */
.ts--road .ts-spin { animation-duration: .64s; }                  /* هم‌سرعت با حرکت خط‌کشی */
.ts--road .rd-flow { animation: rd-flow .3s linear infinite; }
.ts--road .rd-flow-far { animation: rd-flow-far .4s linear infinite; }  /* پارالاکس دور */
.ts--road .rd-flow-near { animation: rd-flow-near .24s linear infinite; }
.ts--road .rd-beacon { animation: ts-blink 2.4s linear infinite; }
.ts--road .rd-puff { opacity: 0; animation: rd-puff 1.3s ease-out infinite; }
.ts--road .rd-puff2 { animation-delay: .65s; }

/* روشن: اول چراغ سبز و چراغ‌های کامیون، بعد حرکت */
.ts--road :checked + .ts-frame .ts-veh { transform: translateX(-92px); transition-delay: .25s; }
.ts--road :checked + .ts-frame .ts-roll { transform: rotate(-976deg); transition-delay: .25s; }  /* ۹۲ ÷ محیط چرخ */
.ts--road.ts-touched .rd-pitch { animation: rd-back var(--ts-dur) ease-in-out; }
.ts--road.ts-touched :checked + .ts-frame .rd-pitch { animation: rd-go var(--ts-dur) ease-in-out .25s; }

@keyframes rd-flow { to { transform: translateX(16px); } }
@keyframes rd-flow-far { to { transform: translateX(12px); } }
@keyframes rd-flow-near { to { transform: translateX(14px); } }
@keyframes rd-puff {
  0% { opacity: .6; transform: translate(0, 0) scale(.5); }
  100% { opacity: 0; transform: translate(9px, -6px) scale(1.9); }
}
/* فیزیک تعلیق: شتاب = بلند شدن دماغه، ترمز = شیرجه */
@keyframes rd-go { 0% { transform: rotate(0); } 22% { transform: rotate(1.1deg); } 55% { transform: rotate(.2deg); } 78% { transform: rotate(-.9deg); } 92% { transform: rotate(.25deg); } 100% { transform: rotate(0); } }
@keyframes rd-back { 0% { transform: rotate(0); } 22% { transform: rotate(-.8deg); } 78% { transform: rotate(.7deg); } 92% { transform: rotate(-.2deg); } 100% { transform: rotate(0); } }

/* ---------- حمل ریلی: لوکوموتیو برقی / ریل ---------- */
.ts--rail .ts-veh, .ts--rail .ts-roll { transition-duration: 1.05s; transition-timing-function: cubic-bezier(.6, .02, .25, 1); }
.ts--rail .ts-spin { animation-duration: .52s; }                   /* هم‌سرعت با تراورس‌ها */
.ts--rail .rl-flow { animation: rl-flow .14s linear infinite; }
.ts--rail .rl-flow-near { animation: rl-flow-near .19s linear infinite; }

/* پانتوگراف: حالت خاموش = جمع‌شده روی سقف (بعد از برگشت قطار پایین می‌آید) */
.ts--rail .rl-plo, .ts--rail .rl-pup, .ts--rail .rl-phd { transition: transform .45s cubic-bezier(.4, 0, .2, 1) .95s; }
.ts--rail .rl-plo { transform: rotate(-33deg); }
.ts--rail .rl-pup { transform: rotate(58.63deg); }
.ts--rail .rl-phd { transform: rotate(-25.63deg); }
.ts--rail .rl-spark { opacity: 0; }

/* روشن: ۱) پانتوگراف بالا و تماس با سیم  ۲) برق‌دار شدن چراغ‌ها  ۳) حرکت قطار */
.ts--rail :checked + .ts-frame .rl-plo,
.ts--rail :checked + .ts-frame .rl-pup,
.ts--rail :checked + .ts-frame .rl-phd { transform: none; transition-delay: 0s; }
.ts--rail :checked + .ts-frame .rl-lights,
.ts--rail :checked + .ts-frame .rl-cablight { transition-delay: .42s; }
.ts--rail :checked + .ts-frame .ts-veh { transform: translateX(-92px); transition-delay: .5s; }
.ts--rail :checked + .ts-frame .ts-roll { transform: rotate(-1424deg); transition-delay: .5s; }  /* ۹۲ ÷ محیط چرخ */
.ts--rail.ts-touched :checked + .ts-frame .rl-spark { animation: rl-spark .5s ease-out .4s 1, rl-arc 2.6s steps(1) 1.2s infinite; }

@keyframes rl-flow { to { transform: translateX(6.2px); } }
@keyframes rl-flow-near { to { transform: translateX(9px); } }
@keyframes rl-spark { 0% { opacity: 0; } 18% { opacity: 1; } 100% { opacity: 0; } }
@keyframes rl-arc { 0%, 100% { opacity: 0; } 41% { opacity: .55; } 44% { opacity: 0; } 77% { opacity: .35; } 79% { opacity: 0; } }

/* ---------- حمل دریایی: کشتی کانتینری / بندر ---------- */
.ts--sea .ts-veh { transition-duration: 1.2s; transition-timing-function: cubic-bezier(.5, .05, .25, 1); }
.ts--sea .se-flow-far { animation: se-flow-far 5s linear infinite; }     /* پارالاکس موج‌ها */
.ts--sea .se-flow-mid { animation: se-flow-mid 3.8s linear infinite; }
.ts--sea .se-flow-near { animation: se-flow-near 2.8s linear infinite; }
.ts--sea .se-foamflow { animation: se-foam .5s linear infinite; }
.ts--sea .se-sweep { animation: se-sweep 3.4s linear infinite; }
.ts--sea .se-flash { opacity: 0; animation: se-flash 3.4s linear infinite; }        /* درخشش وقتی نور رو به بیننده است */
.ts--sea .se-radar { animation: se-radar 1.6s linear infinite; }
.ts--sea .se-puff { opacity: 0; animation: se-puff 1.5s ease-out infinite; }
.ts--sea .se-puff2 { animation-delay: .75s; }
.ts--sea .se-spray { animation: se-spray .45s steps(2) infinite; }
.ts--sea .se-shimmer { animation: se-shimmer 1.1s steps(2) infinite; }
.ts--sea .se-bob { animation: se-bob 3.4s ease-in-out infinite; }

/* تجهیزات بندر: خاموش = طناب‌ها بسته، اسپردر پایین، بوم روی کشتی (بعد از برگشت کشتی) */
.ts--sea .se-lines { transition: opacity .3s ease 1.2s; }
.ts--sea .se-spread { transition: opacity .3s ease 1.85s, transform .3s ease 1.85s; }
.ts--sea .se-boom { transition: transform .7s cubic-bezier(.45, 0, .3, 1) 1.15s; }

/* روشن: ۱) علامت سبز، چراغ‌ها، طناب‌ها رها  ۲) اسپردر بالا و بوم بلند  ۳) حرکت کشتی */
.ts--sea :checked + .ts-frame .se-lines { opacity: 0; transition-delay: 0s; }
.ts--sea :checked + .ts-frame .se-spread { opacity: 0; transform: translateY(-4px); transition-delay: 0s; }
.ts--sea :checked + .ts-frame .se-boom { transform: rotate(72deg); transition-delay: .15s; }
.ts--sea :checked + .ts-frame .ts-veh { transform: translateX(-92px); transition-delay: .4s; }
.ts--sea .se-wake { transition: opacity .25s ease; }                                   /* موج دماغه و رد آب فقط وقتی کشتی راه افتاده */
.ts--sea :checked + .ts-frame .se-wake { transition: opacity .5s ease .7s; }
.ts--sea.ts-touched .se-pitch { animation: se-back 1.2s ease-in-out; }
.ts--sea.ts-touched :checked + .ts-frame .se-pitch { animation: se-go 1.2s ease-in-out .4s; }

@keyframes se-flow-far { to { transform: translateX(36px); } }
@keyframes se-flow-mid { to { transform: translateX(52px); } }
@keyframes se-flow-near { to { transform: translateX(72px); } }
@keyframes se-foam { to { transform: translateX(6px); } }
/* چرخش نور فانوس: پهنا به صفر می‌رسد و برعکس می‌شود */
@keyframes se-sweep {
  0% { transform: scaleX(1); opacity: .95; }
  25% { transform: scaleX(.04); opacity: 1; }
  50% { transform: scaleX(-1); opacity: .9; }
  75% { transform: scaleX(-.04); opacity: .25; }
  100% { transform: scaleX(1); opacity: .95; }
}
@keyframes se-flash { 0%, 17%, 34%, 100% { opacity: 0; } 25% { opacity: .9; } }
@keyframes se-radar { 0% { transform: scaleX(1); } 50% { transform: scaleX(-1); } 100% { transform: scaleX(1); } }
@keyframes se-puff {
  0% { opacity: .6; transform: translate(0, 0) scale(.5); }
  100% { opacity: 0; transform: translate(8px, -6px) scale(2); }
}
@keyframes se-spray { 50% { opacity: .65; } }
@keyframes se-shimmer { 50% { opacity: .55; } }
@keyframes se-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(.45px); } }
/* فیزیک بدنه: شروع = نشستن پاشنه، توقف = شیرجه دماغه */
@keyframes se-go { 0% { transform: rotate(0); } 25% { transform: rotate(.9deg); } 60% { transform: rotate(.25deg); } 85% { transform: rotate(-.35deg); } 100% { transform: rotate(0); } }
@keyframes se-back { 0% { transform: rotate(0); } 25% { transform: rotate(-.6deg); } 75% { transform: rotate(.45deg); } 100% { transform: rotate(0); } }

/* ---------- Site glue (ChinPost integration) ---------- */
section.cp-modes { display: block; padding: 84px 0 8px; } /* اسکوپ‌شده: .cp-modes هیرو گرید است و نباید به سکشن بخورد (و برعکس) */
.cp-modes-card {
  max-width: 560px; margin: 26px auto 0; padding: 10px 22px 18px;
  background: linear-gradient(180deg, #131d31, #0d1526);
  border: 1px solid rgba(255,255,255,.08); border-radius: 24px;
  box-shadow: 0 30px 60px -24px rgba(2,6,23,.5), inset 0 1px 0 rgba(255,255,255,.05);
}
.cp-modes-panel {
  margin-top: 14px; padding: 14px 16px; border-radius: 14px;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07);
  color: #dbe4f3; font-size: 13.5px; line-height: 1.95; min-height: 86px;
}
.cp-modes-panel strong { color: #ffb35a; display: block; font-size: 14.5px; margin-bottom: 2px; }
.cp-modes-panel .cp-modes-cta { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.cp-modes-panel .cp-modes-cta a {
  font-size: 12.5px; font-weight: 800; text-decoration: none; border-radius: 999px; padding: 7px 14px;
  background: linear-gradient(135deg, #facc15, #D4AF37); color: #1a1405;
}
.cp-modes-panel .cp-modes-cta a.ghost { background: rgba(255,255,255,.07); color: #e2e8f0; border: 1px solid rgba(255,255,255,.12); }
.cp-side-switch {
  padding: 16px 16px 10px; margin-bottom: 20px; border-radius: 18px;
  background: linear-gradient(180deg, #131d31, #0d1526); border: 1px solid rgba(255,255,255,.08);
}
.cp-side-switch-title { margin: 0 0 6px; font-size: 14px; font-weight: 800; color: #f1f5f9; }
.cp-side-switch .ts-row { border-top: none; padding-top: 4px; }
@media (max-width: 520px) { .cp-ts { --ts-k: .8; } .cp-modes-card { padding: 6px 14px 14px; } }

/* ---------- فیکس اندازه موبایل (site fix 2026-10-22) ----------
   --ts-w/--ts-h روی :root با --ts-kِ روت قفل شده بودند و اورراید موبایلِ --ts-k هیچ‌وقت اعمال نمی‌شد؛
   این‌جا روی خود .cp-ts دوباره تعریف می‌شوند تا ضریب اندازه واقعاً کار کند. */
.cp-ts { --ts-w: calc(184px * var(--ts-k)); --ts-h: calc(80px * var(--ts-k)); }
@media (max-width: 374px) { .cp-ts { --ts-k: .72; } }