/* 車車出動 — 互動場景 */

.app{
  display:flex;
  flex-direction:column;
  min-height:100svh;
}

/* ---------- 場景 ---------- */
.scene{
  cursor:pointer;
  position:relative;
  flex:1 1 auto;
  min-height:250px;
  overflow:hidden;
  background:linear-gradient(180deg,var(--sky-top) 0%,var(--sky-bot) 78%);
  isolation:isolate;
}

.sun{
  position:absolute; top:5%; right:7%;
  width:clamp(52px,9vw,92px); aspect-ratio:1;
  border-radius:50%;
  background:var(--sun);
  box-shadow:0 0 0 10px rgba(255,212,71,.28), 0 0 0 22px rgba(255,212,71,.14);
}

.cloud{
  position:absolute;
  height:26px; width:88px;
  background:#FFFFFF;
  border-radius:99px;
  opacity:.92;
  animation:float 44s linear infinite;
}
.cloud::before,.cloud::after{
  content:""; position:absolute; background:#FFFFFF; border-radius:50%;
}
.cloud::before{width:40px;height:40px;left:14px;top:-17px}
.cloud::after{width:30px;height:30px;left:48px;top:-12px}
.cloud.c1{top:14%; left:6%;  transform:scale(1)}
.cloud.c2{top:26%; left:46%; transform:scale(.72); animation-duration:62s; animation-delay:-20s}
.cloud.c3{top:8%;  left:72%; transform:scale(.85); animation-duration:54s; animation-delay:-38s}
@keyframes float{from{margin-left:-30vw}to{margin-left:110vw}}

.hills{
  position:absolute; left:0; right:0; bottom:29%;
  height:16%;
  background:
    radial-gradient(42% 100% at 16% 100%, var(--grass-dk) 0 99%, transparent 100%),
    radial-gradient(34% 78% at 48% 100%, var(--grass-dk) 0 99%, transparent 100%),
    radial-gradient(46% 92% at 84% 100%, var(--grass-dk) 0 99%, transparent 100%);
  opacity:.5;
}

.ground{
  position:absolute; left:0; right:0; bottom:0;
  height:30%;
  background:var(--grass);
  border-top:4px solid var(--grass-dk);
}

/* 車子行駛的路面，會依車種改變 */
.track{
  position:absolute; left:0; right:0; bottom:0;
  height:22%;
  background:var(--road);
  border-top:5px solid var(--road-dk);
}
.track::after{
  content:""; position:absolute; left:0; right:0; top:50%;
  height:5px; transform:translateY(-50%);
  background:repeating-linear-gradient(90deg,var(--road-line) 0 46px,transparent 46px 92px);
  border-radius:3px;
}

/* 高鐵：高架橋 */
.scene[data-track="viaduct"] .track{
  background:#C2C7C9;
  border-top:5px solid #9EA6A9;
  height:20%;
}
.scene[data-track="viaduct"] .track::after{
  top:auto; bottom:0; height:36%; transform:none;
  background:linear-gradient(180deg,#AAB1B4 0 100%);
  border-radius:0;
}
.piers{display:none}
.scene[data-track="viaduct"] .piers{
  display:block;
  position:absolute; left:0; right:0; bottom:0; height:20%;
  background:repeating-linear-gradient(90deg,transparent 0 120px,#B4BABD 120px 168px,transparent 168px 288px);
  opacity:.85;
}

/* 輕軌：草坪軌道（高雄輕軌的招牌） */
.scene[data-track="grass"] .track{
  background:var(--grass-dk);
  border-top:5px solid #467A26;
}
.scene[data-track="grass"] .track::after{
  top:52%; height:32%; transform:translateY(-50%); border-radius:0;
  background:linear-gradient(180deg,transparent 0 26%,#9AA3A8 26% 36%,transparent 36% 64%,#9AA3A8 64% 74%,transparent 74% 100%);
}

/* ---------- 行駛中的車 ---------- */
.lane{
  position:absolute; left:0; right:0; bottom:0;
  height:22%;
}

.rider{
  position:absolute;
  left:0;
  bottom:14%;
  width:clamp(190px,46%,430px);
  padding:0; border:0; background:transparent;
  cursor:pointer;
  animation:drive 9s linear -3.5s infinite;
  touch-action:manipulation;
}
.scene[data-track="viaduct"] .rider{bottom:32%; width:clamp(230px,62%,620px)}
.scene[data-track="grass"] .rider{bottom:22%}

@keyframes drive{
  from{left:-52%}
  to{left:106%}
}

.rider svg{display:block; width:100%; height:auto; overflow:visible}

.rider:focus-visible{outline:none}
.rider:focus-visible svg{filter:drop-shadow(0 0 0 4px var(--focus))}

.wheel{transform-box:fill-box; transform-origin:50% 50%; animation:spin .62s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

.drum{transform-box:fill-box; transform-origin:50% 50%; animation:spin 3.4s linear infinite}

.beacon{animation:blink .7s steps(1,end) infinite}
.beacon.b2{animation-delay:.35s}
@keyframes blink{0%,49%{opacity:1}50%,100%{opacity:.12}}

.rider.acting .body{animation:hop .42s ease-in-out 3}
@keyframes hop{0%,100%{transform:translateY(0)}45%{transform:translateY(-9px)}}

.spray,.notes{opacity:0}
.spray{transform-box:fill-box; transform-origin:0 50%}
.rider.acting .spray{animation:spray 1.5s ease-out infinite}
@keyframes spray{
  0%{opacity:0; transform:translate(0,0) scale(.3)}
  25%{opacity:1}
  100%{opacity:0; transform:translate(-345px,-72px) scale(1.9)}
}
.spray.s2{animation-delay:.16s}
.spray.s3{animation-delay:.32s}
.spray.s4{animation-delay:.48s}
.spray.s5{animation-delay:.64s}
.spray.s6{animation-delay:.8s}

.notes{transform-box:fill-box}
.rider.acting .notes{animation:notes 1.9s ease-out}
@keyframes notes{
  0%{opacity:0; transform:scaleX(-1) translateY(0)}
  18%{opacity:1}
  100%{opacity:0; transform:scaleX(-1) translateY(-62px)}
}
.notes.n2{animation-delay:.4s}
.notes.n3{animation-delay:.85s}

/* ---------- 靜音（給家長） ---------- */
.mute{
  position:absolute; top:10px; right:10px;
  width:46px; height:46px;
  display:grid; place-items:center;
  border-radius:14px;
  border:2px solid var(--edge);
  background:rgba(255,255,255,.82);
  color:var(--ink);
  font-size:20px; line-height:1;
  cursor:pointer;
}

/* ---------- 車庫（選車） ---------- */
.garage{
  flex:0 0 auto;
  background:var(--panel);
  border-top:4px solid var(--edge);
  padding:14px 12px 12px;
}

.grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  max-width:1080px;
  margin:0 auto;
}
@media (min-width:760px){ .grid{grid-template-columns:repeat(6,1fr)} }

.pick{
  display:flex; flex-direction:column; align-items:center; justify-content:flex-end;
  gap:6px;
  min-height:104px;
  padding:10px 6px 8px;
  border:3px solid var(--edge);
  border-radius:20px;
  background:var(--panel-2);
  cursor:pointer;
  touch-action:manipulation;
  transition:transform .12s ease, border-color .12s ease;
}
.pick:active{transform:scale(.95)}
.pick[aria-pressed="true"]{border-color:var(--tint,var(--focus)); background:#FFFDF4}

.pick svg{width:100%; height:auto; max-height:56px; overflow:visible}
.pick .wheel,.pick .drum,.pick .beacon{animation:none}

.pick b{
  font-family:var(--font-zh);
  font-weight:900;
  font-size:clamp(15px,3.6vw,19px);
  letter-spacing:.04em;
  color:var(--ink);
}

.hint{
  max-width:1080px;
  margin:10px auto 0;
  font-family:var(--font-zh);
  font-size:12.5px;
  line-height:1.6;
  color:var(--ink-soft);
  text-align:center;
}
.hint b{font-weight:900; color:var(--ink)}
.hint a{color:var(--ink-soft); text-underline-offset:3px}

@media (prefers-reduced-motion:reduce){
  .rider{animation:none; left:26%}
  .cloud{animation:none}
  .wheel,.drum,.beacon{animation:none}
}


/* ---------- 工作現場的道具 ---------- */
/* 道具跟車子共用 .lane 的座標系，bottom 可以超過 100% 跑到路面上方。
   .props 排在 .rider 前面，所以東西飛近車子時會被車身擋住，
   看起來就真的是「進到車子裡面」了。 */
.props{
  position:absolute; inset:0;
  pointer-events:none;
}

.prop{position:absolute}
.prop svg{display:block; width:100%; height:auto; overflow:visible}

/* ---------- 東西進到車子裡 ---------- */
/* --dx/--dy（車上的落點）和 --hx/--hy（工人的手）都是 JS 在車子停好之後
   實際量出來的螢幕距離，所以不管螢幕多寬都會落在對的位置。 */

/* 有人幫忙的：先被撿到手上停一下，再倒進車裡 —— 小孩才看得出是「人放上去的」 */
.props.working .bag,
.props.working .rock,
.props.working .box{
  animation:handoff 1.2s ease-in-out var(--fly-delay,0s) forwards;
}
@keyframes handoff{
  0%  {transform:translate(0,0) scale(1) rotate(0deg); opacity:1}
  10% {transform:translate(0,4px) scale(.95) rotate(0deg); opacity:1}
  30% {transform:translate(var(--hx,0px), var(--hy,0px)) scale(.5) rotate(-14deg); opacity:1}
  52% {transform:translate(var(--hx,0px), var(--hy,0px)) scale(.5) rotate(-8deg); opacity:1}
  76% {transform:translate(var(--mx,0px), var(--my,0px)) scale(.44) rotate(-36deg); opacity:1}
  100%{transform:translate(var(--dx,0px), var(--dy,0px)) scale(.22) rotate(-68deg); opacity:0}
}

/* 後備：沒有人接手時的直接拋送 */
.props.working .lob{
  animation:toss .8s cubic-bezier(.35,-0.15,.7,.65) var(--fly-delay,0s) forwards;
}
@keyframes toss{
  0%{transform:translate(0,0) scale(1) rotate(0deg); opacity:1}
  55%{transform:translate(var(--mx,0px), var(--my,0px)) scale(.95) rotate(-20deg); opacity:1}
  100%{transform:translate(var(--dx,0px), var(--dy,0px)) scale(.4) rotate(-45deg); opacity:0}
}

/* 乘客是用走的，不是被丟的 */
.props.working .pax-in{
  animation:board .9s ease-in var(--fly-delay,0s) forwards;
}
@keyframes board{
  0%{transform:translate(0,0) scale(1); opacity:1}
  70%{opacity:1}
  100%{transform:translate(var(--dx,0px), var(--dy,0px)) scale(.6); opacity:0}
}

/* 在旁邊把東西丟上車的人：手臂往上甩三次，跟三件東西對得上 */
.arm{transform-box:fill-box; transform-origin:50% 8%}
.props.working .worker .arm{animation:pickthrow 1.2s ease-in-out .3s 3}
@keyframes pickthrow{
  0%  {transform:rotate(0deg)}
  16% {transform:rotate(30deg)}
  30% {transform:rotate(22deg)}
  48% {transform:rotate(-118deg)}
  62% {transform:rotate(-96deg)}
  84%,100%{transform:rotate(0deg)}
}

/* 丟的瞬間整個人跟著使力 */
.props.working .worker,
.props.working .clerk{animation:heave 1.2s ease-in-out .25s 3}
@keyframes heave{
  0%  {transform:translateY(0) rotate(0deg)}
  16% {transform:translateY(3px) rotate(0deg)}
  48% {transform:translateY(-4px) rotate(-4deg)}
  70% {transform:translateY(0) rotate(0deg)}
  100%{transform:translateY(0) rotate(0deg)}
}

/* 砂石堆被鏟走之後矮一截 */
.pile-body{transform-box:fill-box; transform-origin:50% 100%}
.props.working .pile-body{animation:shrink 1.8s ease .5s forwards}
@keyframes shrink{to{transform:scaleY(.3); opacity:.8}}

/* ---------- 車子「載到了」的樣子 ---------- */
/* 這是整個互動的重點：東西進去之後，車子本身要看得出來不一樣。 */
.fill-load{transform-box:fill-box; transform-origin:50% 100%; transform:scaleY(0)}

/* 垃圾車：每倒一袋就多堆高一層，看得出來是「一袋一袋」累積的 */
.fill-steps{transform-box:fill-box; transform-origin:50% 100%; transform:scaleY(0)}
.rider.acting .fill-steps{animation:fill-steps 4.4s linear forwards}
@keyframes fill-steps{
  0%,33%  {transform:scaleY(0)}
  36%,60% {transform:scaleY(.36)}
  63%,87% {transform:scaleY(.7)}
  90%,100%{transform:scaleY(1)}
}
.rider.loaded .fill-load{animation:fill-up .9s cubic-bezier(.3,1.3,.5,1) forwards}
@keyframes fill-up{to{transform:scaleY(1)}}

/* 裝滿砂石之後滾筒轉得更起勁 */
.rider.acting .drum{animation-duration:1.1s}

/* 車窗裡的乘客，一個一個坐好 */
.pax{opacity:0; transform-box:fill-box; transform-origin:50% 100%}
.rider.loaded .pax{animation:sit .45s ease forwards}
.rider.loaded .pax2{animation-delay:.1s}
.rider.loaded .pax3{animation-delay:.2s}
.rider.loaded .pax4{animation-delay:.3s}
.rider.loaded .pax5{animation-delay:.4s}
.rider.loaded .pax6{animation-delay:.5s}
@keyframes sit{
  0%{opacity:0; transform:translateY(8px) scale(.5)}
  100%{opacity:1; transform:translateY(0) scale(1)}
}

/* 貨送到了，店裡櫥窗才有東西 */
.stock{opacity:0}
.props.done .stock{animation:appear .5s ease forwards}
@keyframes appear{to{opacity:1}}

/* ---------- 失火的房子：大火、黑煙、澆熄後的白色水蒸氣 ---------- */
.flames{transform-box:fill-box; transform-origin:50% 100%}
.flame{transform-box:fill-box; transform-origin:50% 100%; animation:flicker .38s ease-in-out infinite alternate}
.f2{animation-delay:-.19s}
.f3{animation-delay:-.27s}
.f4{animation-delay:-.11s}
@keyframes flicker{
  from{transform:scale(1,1) translateY(0)}
  to{transform:scale(1.12,1.24) translateY(-4px)}
}

/* 燒著的時候一直往上冒的黑煙 */
.bpuff{transform-box:fill-box; transform-origin:50% 100%; opacity:0; animation:rise 2.2s ease-out infinite}
.k2{animation-delay:-.75s}
.k3{animation-delay:-1.5s}
@keyframes rise{
  0%{opacity:0; transform:translateY(6px) scale(.4)}
  25%{opacity:.75}
  100%{opacity:0; transform:translateY(-62px) scale(1.6)}
}

/* 噴到水之後：火一段一段變小，最後整個熄掉 */
.props.working .flames{animation:douse 1.7s cubic-bezier(.5,0,.7,1) .7s forwards}
@keyframes douse{
  0%{opacity:1; transform:scaleY(1)}
  35%{opacity:1; transform:scaleY(.62)}
  70%{opacity:.85; transform:scaleY(.28)}
  100%{opacity:0; transform:scaleY(0)}
}
.props.working .burn-smoke{animation:smoke-out 1s ease 2.1s forwards}
@keyframes smoke-out{to{opacity:0}}

/* 澆熄瞬間噴出的白色水蒸氣 */
.spuff{transform-box:fill-box; transform-origin:50% 100%; opacity:0}
.props.working .spuff{animation:steam 2.2s ease-out 1.2s forwards}
.props.working .m2{animation-delay:1.45s}
.props.working .m3{animation-delay:1.7s}
.props.working .m4{animation-delay:1.95s}
@keyframes steam{
  0%{opacity:0; transform:translateY(10px) scale(.4)}
  25%{opacity:.9}
  100%{opacity:0; transform:translateY(-78px) scale(2.1)}
}

/* 火還在的時候窗戶透出橘光，滅了才變回藍玻璃 */
.cool{opacity:0}
.props.working .glow{animation:smoke-out 1.2s ease 1.5s forwards}
.props.working .cool{animation:appear 1.2s ease 1.5s forwards}

/* 輕軌到站開門 */
.rider.acting .door{animation:door-open 1.6s ease .5s}
@keyframes door-open{
  0%,100%{opacity:1}
  25%,75%{opacity:.25}
}

/* ---------- 字幕：給家長照著念，小孩聽語音 ---------- */
.caption{
  position:absolute;
  left:50%; top:14px;
  transform:translate(-50%,-14px);
  max-width:min(90%,560px);
  padding:10px 20px;
  border-radius:999px;
  background:rgba(255,255,255,.94);
  border:2px solid var(--edge);
  font-family:var(--font-zh);
  font-weight:900;
  font-size:clamp(14px,3.4vw,18px);
  line-height:1.4;
  color:var(--ink);
  text-align:center;
  opacity:0;
  pointer-events:none;
  transition:opacity .3s ease, transform .3s ease;
}
.caption.on{
  opacity:1;
  transform:translate(-50%,0);
}

/* 車子的圖都是車頭朝左畫的，統一翻面，讓車頭朝向前進的方向。 */
.rider svg,
.pick svg{transform:scaleX(-1)}

@media (prefers-reduced-motion:reduce){
  .rider{animation:none}
  .cloud{animation:none}
  .wheel,.drum,.beacon,.flame{animation:none}
  .props.working .bag,
  .props.working .rock,
  .props.working .box,
  .props.working .pax-in{animation-duration:.2s}
}

/* ---------- 消防車的水柱 ---------- */
/* 用 stroke-dasharray 讓水柱「射出去」，噴到之後維持著，小孩才看得到水一直在澆 */
.jet{
  stroke-dasharray:460;
  stroke-dashoffset:460;
  opacity:0;
  stroke-linejoin:round;
}
.rider.acting .jet-a{animation:jet 3.4s ease-out .5s forwards}
.rider.acting .jet-b{animation:jet 3.4s ease-out .62s forwards}
@keyframes jet{
  0%  {stroke-dashoffset:460; opacity:0}
  10% {opacity:.92}
  26% {stroke-dashoffset:0; opacity:.92}
  82% {stroke-dashoffset:0; opacity:.92}
  100%{stroke-dashoffset:0; opacity:0}
}

/* 水打在屋頂上濺起的水花 */
.sp{opacity:0; transform-box:fill-box; transform-origin:50% 100%}
.props.working .sp{animation:splash .7s ease-out 1.1s infinite}
.props.working .sp.s2{animation-delay:1.3s}
.props.working .sp.s3{animation-delay:1.5s}
@keyframes splash{
  0%{opacity:0; transform:translateY(6px) scale(.3)}
  35%{opacity:.9; transform:translateY(-6px) scale(1)}
  100%{opacity:0; transform:translateY(-22px) scale(1.5)}
}

/* ---------- 高鐵的車門 ---------- */
/* 進站打開、乘客走進去、開走前關上 */
.door-l,.door-r{transform-box:fill-box}
.rider.acting .door-l{animation:door-l 5.4s ease .2s forwards}
.rider.acting .door-r{animation:door-r 5.4s ease .2s forwards}
@keyframes door-l{
  0%{transform:translateX(0)}
  9%,80%{transform:translateX(-94%)}
  92%,100%{transform:translateX(0)}
}
@keyframes door-r{
  0%{transform:translateX(0)}
  9%,80%{transform:translateX(94%)}
  92%,100%{transform:translateX(0)}
}

/* ---------- 大家互相揮手 ---------- */
/* 工作做完的那一刻，小孩跟車上的人揮手 —— 這是整個場景要傳達的「社會連結」 */
.wave{transform-box:fill-box; transform-origin:50% 10%}
.props.done .kid .wave{animation:wave 1.7s ease-in-out infinite}
.props.done .worker .arm{animation:wave 1.7s ease-in-out .25s infinite}
@keyframes wave{
  0%  {transform:rotate(0deg)}
  12% {transform:rotate(-142deg)}
  22% {transform:rotate(-108deg)}
  32% {transform:rotate(-142deg)}
  42% {transform:rotate(-108deg)}
  52% {transform:rotate(-142deg)}
  70%,100%{transform:rotate(0deg)}
}

/* ---------- 店員接貨 ---------- */
/* 店員的手在左邊（朝卡車那側），所以旋轉方向跟工人相反 */
.props.working .clerk .arm{animation:receive 1.2s ease-in-out .75s 3}
@keyframes receive{
  0%  {transform:rotate(0deg)}
  28% {transform:rotate(116deg)}
  52% {transform:rotate(94deg)}
  72% {transform:rotate(34deg)}
  88%,100%{transform:rotate(0deg)}
}
.props.done .clerk .arm{animation:wave-left 1.7s ease-in-out .25s infinite}
@keyframes wave-left{
  0%  {transform:rotate(0deg)}
  12% {transform:rotate(142deg)}
  22% {transform:rotate(108deg)}
  32% {transform:rotate(142deg)}
  42% {transform:rotate(108deg)}
  52% {transform:rotate(142deg)}
  70%,100%{transform:rotate(0deg)}
}

/* ---------- 工地：水泥一到，房子一層一層長出來 ---------- */
/* 這是水泥車存在的理由，所以要讓小孩看到房子真的被蓋出來 */
.build{opacity:0}
.bd2{transform-box:fill-box; transform-origin:50% 100%}
.bd3{transform-box:fill-box}
.props.working .bd1{animation:appear .4s ease 4.0s forwards}
.props.working .bd2{animation:raise .55s cubic-bezier(.3,1.25,.5,1) 4.5s forwards}
.props.working .bd3{animation:drop .5s cubic-bezier(.3,1.35,.5,1) 5.0s forwards}
.props.working .bd4{animation:appear .4s ease 5.5s forwards}
@keyframes raise{
  0%{opacity:1; transform:scaleY(0)}
  100%{opacity:1; transform:scaleY(1)}
}
@keyframes drop{
  0%{opacity:0; transform:translateY(-34px) scale(.9)}
  100%{opacity:1; transform:translateY(0) scale(1)}
}