/* 比喻層插圖動畫（搭配 js/illus.js）
   原則：SVG 靜態畫面＝比喻的「結果」；動畫從起點走到結果再循環。 */
.il { display: block; width: 100%; height: auto; overflow: hidden; }
.il * { transform-box: view-box; }

/* ---------- volume：音量轉小＋閥門關小 ---------- */
.il-volume .il-knob   { transform-origin: 118px 150px; animation: ilKnob 6s ease-in-out infinite; }
.il-volume .il-a1     { transform-origin: 108px 78px; animation: ilA1 6s ease-in-out infinite; }
.il-volume .il-a2     { animation: ilA2 6s ease-in-out infinite; }
.il-volume .il-a3     { animation: ilA3 6s ease-in-out infinite; }
.il-volume .il-valve  { transform-origin: 280px 106px; animation: ilValve 6s ease-in-out infinite; }
.il-volume .il-stream { animation: ilStream 6s ease-in-out infinite; }
.il-volume .il-flow   { animation: ilFlow 1.2s linear infinite; }
.il-volume .il-food   { animation: ilBob 3s ease-in-out infinite; }
@keyframes ilKnob   { 0%, 12% { transform: rotate(270deg); } 50%, 86% { transform: rotate(0deg); } 100% { transform: rotate(270deg); } }
@keyframes ilA1     { 0%, 100% { transform: scale(1); } 50% { transform: scale(.92); } }
@keyframes ilA2     { 0%, 24% { opacity: 1; } 44%, 90% { opacity: 0; } 96%, 100% { opacity: 1; } }
@keyframes ilA3     { 0%, 14% { opacity: 1; } 32%, 94% { opacity: 0; } 100% { opacity: 1; } }
@keyframes ilValve  { 0%, 12% { transform: rotate(60deg); } 50%, 86% { transform: rotate(0deg); } 100% { transform: rotate(60deg); } }
@keyframes ilStream { 0%, 12% { stroke-width: 11px; } 50%, 86% { stroke-width: 4px; } 100% { stroke-width: 11px; } }
@keyframes ilFlow   { to { stroke-dashoffset: -12; } }
@keyframes ilBob    { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }

/* ---------- downhill：下坡騎車，仍要踩 ---------- */
.il-downhill .il-wheel { transform-box: fill-box; transform-origin: 50% 50%; animation: ilSpin 1s linear infinite; }
.il-downhill .il-crank { transform-origin: 156px 132px; animation: ilSpin 1.6s linear infinite; }
.il-downhill .il-thA { transform-origin: 146px 98px; animation: ilThA 1.6s linear infinite; }
.il-downhill .il-shA { transform-origin: 169.9px 108.2px; animation: ilShA 1.6s linear infinite; }
.il-downhill .il-thB { transform-origin: 146px 98px; animation: ilThB 1.6s linear infinite; }
.il-downhill .il-shB { transform-origin: 163.7px 117px; animation: ilShB 1.6s linear infinite; }
.il-downhill .il-dash { animation: ilDash .9s linear infinite; }
.il-downhill .il-sp  { animation: ilSpeed 1.5s ease-out infinite; }
.il-downhill .il-sp2 { animation-delay: -.5s; }
.il-downhill .il-sp3 { animation-delay: -1s; }
.il-downhill .il-sun { transform-origin: 272px 42px; animation: ilPulse 5s ease-in-out infinite; }
@keyframes ilSpin  { to { transform: rotate(360deg); } }
@keyframes ilDash  { to { stroke-dashoffset: 40; } }
@keyframes ilSpeed { 0% { transform: translateX(14px); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateX(-22px); opacity: 0; } }
@keyframes ilPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@keyframes ilThA { 0%{transform:rotate(0deg)}8.3%{transform:rotate(13.6deg)}16.7%{transform:rotate(25.8deg)}25%{transform:rotate(32.6deg)}33.3%{transform:rotate(33.4deg)}41.7%{transform:rotate(30.2deg)}50%{transform:rotate(23.9deg)}58.3%{transform:rotate(14deg)}66.7%{transform:rotate(.3deg)}75%{transform:rotate(-12.6deg)}83.3%{transform:rotate(-16.8deg)}91.7%{transform:rotate(-11.4deg)}100%{transform:rotate(0deg)} }
@keyframes ilShA { 0%{transform:rotate(0deg)}8.3%{transform:rotate(-17.5deg)}16.7%{transform:rotate(-29deg)}25%{transform:rotate(-28.3deg)}33.3%{transform:rotate(-16deg)}41.7%{transform:rotate(1.7deg)}50%{transform:rotate(20.4deg)}58.3%{transform:rotate(36.7deg)}66.7%{transform:rotate(46.5deg)}75%{transform:rotate(46deg)}83.3%{transform:rotate(35.4deg)}91.7%{transform:rotate(18.7deg)}100%{transform:rotate(0deg)} }
@keyframes ilThB { 0%{transform:rotate(0deg)}8.3%{transform:rotate(-9.9deg)}16.7%{transform:rotate(-23.6deg)}25%{transform:rotate(-36.5deg)}33.3%{transform:rotate(-40.8deg)}41.7%{transform:rotate(-35.3deg)}50%{transform:rotate(-23.9deg)}58.3%{transform:rotate(-10.3deg)}66.7%{transform:rotate(1.9deg)}75%{transform:rotate(8.7deg)}83.3%{transform:rotate(9.4deg)}91.7%{transform:rotate(6.3deg)}100%{transform:rotate(0deg)} }
@keyframes ilShB { 0%{transform:rotate(0deg)}8.3%{transform:rotate(16.3deg)}16.7%{transform:rotate(26.1deg)}25%{transform:rotate(25.6deg)}33.3%{transform:rotate(14.9deg)}41.7%{transform:rotate(-1.7deg)}50%{transform:rotate(-20.4deg)}58.3%{transform:rotate(-37.9deg)}66.7%{transform:rotate(-49.4deg)}75%{transform:rotate(-48.8deg)}83.3%{transform:rotate(-36.4deg)}91.7%{transform:rotate(-18.7deg)}100%{transform:rotate(0deg)} }

/* ---------- boat：開始與加量時晃，之後平穩 ---------- */
.il-boat .il-roll   { animation: ilRoll 2.4s linear infinite; }
.il-boat .il-roll-b { animation-duration: 3.6s; animation-direction: reverse; }
.il-boat .il-amp-f  { transform-origin: 0 126px; animation: ilAmp 6s ease-in-out infinite; }
.il-boat .il-amp-b  { transform-origin: 0 112px; animation: ilAmp 6s ease-in-out infinite; }
.il-boat .il-rock   { transform-origin: 160px 124px; animation: ilRock 6s ease-in-out infinite; }
.il-boat .il-step2  { animation: ilStep 6s ease-in-out infinite; }
@keyframes ilRoll { to { transform: translateX(-40px); } }
@keyframes ilAmp  { 0%, 8% { transform: scaleY(2.4); } 46%, 56% { transform: scaleY(1); } 63% { transform: scaleY(1.9); } 82%, 90% { transform: scaleY(1); } 100% { transform: scaleY(2.4); } }
@keyframes ilRock {
  0% { transform: translateY(-3px) rotate(-7deg); }  8% { transform: translateY(3px) rotate(6.5deg); }
  16% { transform: translateY(-2px) rotate(-5deg); } 24% { transform: translateY(2px) rotate(3.5deg); }
  32% { transform: translateY(-1px) rotate(-2deg); } 40% { transform: translateY(0) rotate(1deg); }
  48%, 57% { transform: translateY(0) rotate(0deg); }
  63% { transform: translateY(2px) rotate(4.5deg); } 69% { transform: translateY(-1.5px) rotate(-3deg); }
  75% { transform: translateY(.5px) rotate(1.4deg); } 82%, 90% { transform: translateY(0) rotate(0deg); }
  100% { transform: translateY(-3px) rotate(-7deg); } }
@keyframes ilStep { 0%, 56% { opacity: 0; } 62%, 90% { opacity: 1; } 98%, 100% { opacity: 0; } }

/* ---------- pedals：油門＋煞車同時踩 ---------- */
.il-pedals .il-pb, .il-pedals .il-pg { animation: ilPress 6s ease-in-out infinite; }
.il-pedals .il-pg { animation-delay: .12s; }
.il-pedals .il-needle { transform-origin: 255px 118px; animation: ilStuck 6s ease-in-out infinite; }
.il-pedals .il-car { animation: ilShake 6s linear infinite; }
@keyframes ilPress { 0%, 14% { transform: translateY(-10px); } 24%, 84% { transform: translateY(0); } 94%, 100% { transform: translateY(-10px); } }
@keyframes ilStuck { 0%, 16% { transform: rotate(-12deg); } 26% { transform: rotate(16deg); } 33% { transform: rotate(1deg); } 40% { transform: rotate(6deg); } 47% { transform: rotate(0deg); } 55% { transform: rotate(4deg); } 64% { transform: rotate(1deg); } 72%, 84% { transform: rotate(2deg); } 94%, 100% { transform: rotate(-12deg); } }
@keyframes ilShake { 0%, 24% { transform: translateX(0); } 26% { transform: translateX(1.2px); } 28% { transform: translateX(-1.2px); } 30% { transform: translateX(1px); } 32% { transform: translateX(-1px); } 34% { transform: translateX(.5px); } 36%, 100% { transform: translateX(0); } }

/* ---------- suitcase：先放蛋白質、蔬菜，再一點澱粉；甜飲彈出 ---------- */
.il-suitcase .il-in1 { animation: ilIn1 6s ease-in infinite; }
.il-suitcase .il-in2 { animation: ilIn2 6s ease-in infinite; }
.il-suitcase .il-in3 { animation: ilIn3 6s ease-in infinite; }
.il-suitcase .il-cup { transform-box: fill-box; transform-origin: 50% 50%; animation: ilCup 6s ease-in-out infinite; }
@keyframes ilIn1 { 0%, 4% { transform: translateY(-130px); opacity: 0; } 5% { opacity: 1; } 14% { transform: translateY(0); animation-timing-function: ease-out; } 17% { transform: translateY(-6px); animation-timing-function: ease-in; } 20%, 90% { transform: translateY(0); opacity: 1; } 97%, 100% { transform: translateY(0); opacity: 0; } }
@keyframes ilIn2 { 0%, 20% { transform: translateY(-130px); opacity: 0; } 21% { opacity: 1; } 30% { transform: translateY(0); animation-timing-function: ease-out; } 33% { transform: translateY(-6px); animation-timing-function: ease-in; } 36%, 90% { transform: translateY(0); opacity: 1; } 97%, 100% { transform: translateY(0); opacity: 0; } }
@keyframes ilIn3 { 0%, 36% { transform: translateY(-130px); opacity: 0; } 37% { opacity: 1; } 46% { transform: translateY(0); animation-timing-function: ease-out; } 49% { transform: translateY(-5px); animation-timing-function: ease-in; } 52%, 90% { transform: translateY(0); opacity: 1; } 97%, 100% { transform: translateY(0); opacity: 0; } }
@keyframes ilCup {
  0%, 52% { transform: translate(-80px, -190px) rotate(-80deg); opacity: 0; }
  53% { opacity: 1; animation-timing-function: ease-in; }
  62% { transform: translate(-74px, -86px) rotate(-80deg); animation-timing-function: ease-out; }
  68% { transform: translate(-36px, -112px) rotate(-36deg); animation-timing-function: ease-in; }
  75% { transform: translate(0, 0) rotate(0deg); animation-timing-function: ease-out; }
  78% { transform: translate(2px, -4px) rotate(3deg); animation-timing-function: ease-in; }
  81%, 90% { transform: translate(0, 0) rotate(0deg); opacity: 1; }
  97%, 100% { transform: translate(0, 0) rotate(0deg); opacity: 0; } }

/* ---------- moving：紙箱搬走，沙發留下 ---------- */
.il-moving .il-bxA { animation: ilBxA 6s ease-in-out infinite; }
.il-moving .il-bxB { animation: ilBxB 6s ease-in-out infinite; }
.il-moving .il-bxC { animation: ilBxC 6s ease-in-out infinite; }
.il-moving .il-spark { transform-origin: 118px 110px; animation: ilSpark 3s ease-in-out infinite; }
@keyframes ilBxB { 0% { transform: translateX(-98px); opacity: 0; } 5%, 10% { transform: translateX(-98px); opacity: 1; } 26%, 90% { transform: translateX(0); opacity: 1; } 97%, 100% { transform: translateX(0); opacity: 0; } }
@keyframes ilBxA { 0%, 24% { transform: translateX(-70px); opacity: 0; } 30%, 34% { transform: translateX(-70px); opacity: 1; } 50%, 90% { transform: translateX(0); opacity: 1; } 97%, 100% { transform: translateX(0); opacity: 0; } }
@keyframes ilBxC { 0%, 48% { transform: translate(-76px, 28px); opacity: 0; } 54%, 57% { transform: translate(-76px, 28px); opacity: 1; } 67% { transform: translate(-36px, 28px); } 73% { transform: translate(-12px, -8px); } 78%, 90% { transform: translate(0, 0); opacity: 1; } 97%, 100% { transform: translate(0, 0); opacity: 0; } }
@keyframes ilSpark { 0%, 100% { transform: scale(.7) rotate(0deg); opacity: .55; } 50% { transform: scale(1.15) rotate(20deg); opacity: 1; } }

/* ---------- radio：先轉到紅線，之後轉到藍線 ---------- */
.il-radio .il-ndl { animation: ilNdl 6s ease-in-out infinite; }
.il-radio .il-tk  { transform-origin: 204px 138px; animation: ilTk 6s ease-in-out infinite; }
.il-radio .il-gr  { animation: ilGr 6s ease-in-out infinite; }
.il-radio .il-gb  { animation: ilGb 6s ease-in-out infinite; }
@keyframes ilNdl { 0%, 10% { transform: translateX(-106px); } 24%, 52% { transform: translateX(-72px); } 66%, 90% { transform: translateX(0); } 100% { transform: translateX(-106px); } }
@keyframes ilTk  { 0%, 10% { transform: rotate(-180deg); } 24%, 52% { transform: rotate(-120deg); } 66%, 90% { transform: rotate(0deg); } 100% { transform: rotate(-180deg); } }
@keyframes ilGr  { 0%, 22% { opacity: 0; } 28%, 50% { opacity: .22; } 58%, 100% { opacity: 0; } }
@keyframes ilGb  { 0%, 64% { opacity: 0; } 70%, 90% { opacity: .22; } 98%, 100% { opacity: 0; } }

/* ---------- ac：一格一格調到舒適的中間值 ---------- */
.il-ac .il-dial { transform-origin: 252px 118px; animation: ilDial 6s ease-in-out infinite; }
.il-ac .il-glow { transform-origin: 252px 68px; animation: ilGlow 6s ease-in-out infinite; }
.il-ac .il-ok   { transform-origin: 284px 44px; animation: ilOk 6s ease-in-out infinite; }
.il-ac .il-air  { animation: ilAir 6s ease-in-out infinite; }
.il-ac .il-w    { animation: ilWind 2s ease-in-out infinite; }
.il-ac .il-w2   { animation-delay: -.66s; }
.il-ac .il-w3   { animation-delay: -1.33s; }
@keyframes ilDial { 0%, 10% { transform: rotate(-120deg); } 15%, 25% { transform: rotate(-80deg); } 30%, 40% { transform: rotate(-40deg); } 46%, 88% { transform: rotate(0deg); } 100% { transform: rotate(-120deg); } }
@keyframes ilGlow { 0%, 46% { transform: scale(.6); opacity: 0; } 54% { transform: scale(1.1); opacity: .35; } 70% { transform: scale(.95); opacity: .3; } 88% { transform: scale(1.05); opacity: .35; } 96%, 100% { transform: scale(.6); opacity: 0; } }
@keyframes ilOk   { 0%, 48% { transform: scale(0); opacity: 0; } 54% { transform: scale(1.12); opacity: 1; } 58%, 88% { transform: scale(1); opacity: 1; } 95%, 100% { transform: scale(0); opacity: 0; } }
@keyframes ilAir  { 0%, 10% { opacity: .3; } 15%, 25% { opacity: .5; } 30%, 40% { opacity: .72; } 46%, 88% { opacity: 1; } 100% { opacity: .3; } }
@keyframes ilWind { 0% { transform: translateY(-6px); opacity: 0; } 35%, 65% { opacity: 1; } 100% { transform: translateY(12px); opacity: 0; } }

/* ---------- brake：平順煞停 ---------- */
.il-brake .il-lane { animation: ilLane 6s infinite; }
.il-brake .il-wh   { transform-box: fill-box; transform-origin: 50% 50%; animation: ilWh 6s infinite; }
.il-brake .il-sl   { animation: ilSl 6s ease-out infinite; }
.il-brake .il-spd  { transform-origin: 262px 74px; animation: ilSpd 6s infinite; }
.il-brake .il-body { transform-origin: 184px 148px; animation: ilSettle 6s ease-in-out infinite; }
@keyframes ilLane { 0% { stroke-dashoffset: 0; animation-timing-function: linear; } 20% { stroke-dashoffset: 80; animation-timing-function: cubic-bezier(.3,.6,.35,1); } 70%, 100% { stroke-dashoffset: 200; } }
@keyframes ilWh   { 0% { transform: rotate(0deg); animation-timing-function: linear; } 20% { transform: rotate(350deg); animation-timing-function: cubic-bezier(.3,.6,.35,1); } 70%, 100% { transform: rotate(880deg); } }
@keyframes ilSl   { 0% { opacity: .2; } 5% { opacity: 1; } 22% { opacity: .9; } 58%, 100% { opacity: 0; } }
@keyframes ilSpd  { 0% { transform: rotate(130deg); } 6%, 20% { transform: rotate(140deg); animation-timing-function: cubic-bezier(.3,.6,.35,1); } 70%, 94% { transform: rotate(0deg); } 100% { transform: rotate(130deg); } }
@keyframes ilSettle { 0%, 62% { transform: rotate(0deg); } 68% { transform: rotate(1deg); } 76%, 100% { transform: rotate(0deg); } }

/* ---------- engines：單齒輪／雙齒輪／口服小齒輪 ---------- */
.il-engines .il-g1 { transform-origin: 70px 88px; animation: ilSpin 4s linear infinite; }
.il-engines .il-gA { transform-origin: 196px 88px; animation: ilSpin 4s linear infinite; }
.il-engines .il-gB { transform-origin: 239.2px 88px; animation: ilSpin 3.2s linear infinite reverse; }
.il-engines .il-gT { transform-origin: 52px 166px; animation: ilSpin 6s linear infinite; }
.il-engines .il-bar { transform-box: fill-box; transform-origin: 50% 100%; animation: ilBar 3s ease-in-out infinite; }
@keyframes ilBar { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(.8); } }

/* ---------- coach：對話＋曲線下降＋打勾 ---------- */
.il-coach .il-c1 { transform-box: fill-box; transform-origin: 0 100%; animation: ilPop1 6s ease-out infinite; }
.il-coach .il-c2 { transform-box: fill-box; transform-origin: 100% 100%; animation: ilPop2 6s ease-out infinite; }
.il-coach .il-c3 { animation: ilFade3 6s ease-out infinite; }
.il-coach .il-ln { stroke-dasharray: 100; animation: ilDraw 6s ease-in-out infinite; }
.il-coach .il-dot { transform-box: fill-box; transform-origin: 50% 50%; animation: ilDot 6s ease-out infinite; }
.il-coach .il-c4 { transform-box: fill-box; transform-origin: 0 50%; animation: ilPop4 6s ease-out infinite; }
.il-coach .il-tw { transform-box: fill-box; transform-origin: 50% 50%; animation: ilSpark 3s ease-in-out infinite; }
.il-coach .il-tw2 { animation-delay: -1.5s; }
@keyframes ilPop1 { 0%, 3% { transform: scale(0); opacity: 0; } 9% { transform: scale(1.06); opacity: 1; } 12%, 92% { transform: scale(1); opacity: 1; } 98%, 100% { transform: scale(1); opacity: 0; } }
@keyframes ilPop2 { 0%, 16% { transform: scale(0); opacity: 0; } 22% { transform: scale(1.06); opacity: 1; } 25%, 92% { transform: scale(1); opacity: 1; } 98%, 100% { transform: scale(1); opacity: 0; } }
@keyframes ilFade3 { 0%, 28% { opacity: 0; transform: translateY(6px); } 34%, 92% { opacity: 1; transform: translateY(0); } 98%, 100% { opacity: 0; transform: translateY(0); } }
@keyframes ilDraw { 0%, 34% { stroke-dashoffset: 100; opacity: 0; } 35% { stroke-dashoffset: 99; opacity: 1; } 64%, 92% { stroke-dashoffset: 0; opacity: 1; } 98%, 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes ilDot  { 0%, 62% { transform: scale(0); opacity: 0; } 67% { transform: scale(1.3); opacity: 1; } 70%, 92% { transform: scale(1); opacity: 1; } 98%, 100% { transform: scale(1); opacity: 0; } }
@keyframes ilPop4 { 0%, 70% { transform: scale(0); opacity: 0; } 76% { transform: scale(1.08); opacity: 1; } 79%, 92% { transform: scale(1); opacity: 1; } 98%, 100% { transform: scale(1); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  :root:not([data-motion="on"]) .il * { animation: none !important; }
}