/* C 層「運作流程」（templates/flow.mjs 產生 HTML、public/js/flow.js 控制播放）。
   基本樣式就是動畫的「最後畫面」：沒有 JavaScript、或使用者設定減少動態效果時，看到的是完整的靜態示意圖。 */
.flow-section { --grease: #ffb020; --flow-progress: 0; }
.flow-steps { position: relative; list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 32px; }
/* 左側進度軌：捲動時由上往下填滿 */
.flow-steps::before, .flow-steps::after { content: ""; position: absolute; left: 21px; top: 22px; bottom: 22px; width: 2px; background: var(--line); }
.flow-steps::after { background: var(--blue); transform-origin: top; transform: scaleY(var(--flow-progress)); }
.flow-step { position: relative; display: grid; grid-template-columns: 44px minmax(0, 500px) minmax(0, 1fr); gap: 0 40px; align-items: center; }
.flow-num { position: relative; z-index: 1; align-self: start; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: #fff; border: 2px solid var(--blue); color: var(--blue); font-weight: 700; font-size: 16px; letter-spacing: .04em; }
.flow-figure { background: var(--photo-bg, #f8f8f8); border: 1px solid var(--line); border-radius: 4px; padding: 12px; }
.flow-figure svg { display: block; width: 100%; height: auto; overflow: hidden; }
.flow-text h3 { margin: 0 0 8px; font-size: 23px; color: var(--deep); }
.flow-text p { margin: 0; color: var(--ink); line-height: 1.85; }

@media (max-width: 760px) {
  .flow-steps { gap: 32px; }
  .flow-steps::before, .flow-steps::after { left: 17px; }
  .flow-step { grid-template-columns: 36px minmax(0, 1fr); gap: 12px 16px; }
  .flow-num { width: 36px; height: 36px; font-size: 16px; }
  .flow-figure { grid-column: 2; }
  .flow-text { grid-column: 2; }
  .flow-text h3 { font-size: 20px; }
}

/* 捲動到才出現（flow.js 加上 .flow-js 才生效，沒有 JavaScript 時直接全部顯示） */
.flow-js .flow-step { opacity: 0; transform: translateY(28px); transition: opacity .6s ease, transform .6s ease; }
.flow-js .flow-step.is-in { opacity: 1; transform: none; }
/* 不在畫面內的步驟暫停動畫，省電 */
.flow-js .flow-step:not(.is-active) .fl-a { animation-play-state: paused; }

/* ---------- 示意圖元件 ---------- */
.fl-ground { stroke: #d5dce8; stroke-width: 2; }
.fl-body { fill: #fff; stroke: var(--blue); stroke-width: 2.5; stroke-linejoin: round; }
.fl-soft { fill: #e6edf8; stroke: var(--blue); stroke-width: 2; stroke-linejoin: round; }
.fl-bore { fill: #fff; stroke: #8a9fc5; stroke-width: 2; }
.fl-dark { fill: var(--deep); }
.fl-screen { fill: var(--deep); }
.fl-grease { fill: var(--grease); }
.fl-line { fill: none; stroke: var(--blue); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.fl-line-thin { fill: none; stroke: var(--blue); stroke-width: 1.5; stroke-linecap: round; opacity: .7; }
.fl-hose { fill: none; stroke: #b7c3d7; stroke-width: 12; stroke-linecap: round; }
.fl-hose-thin { stroke-width: 8; }
.fl-flow { fill: none; stroke: var(--grease); stroke-width: 6; stroke-linecap: round; stroke-dasharray: 0.1 18; }
.fl-icon { fill: none; stroke: #fff; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.fl-ok { fill: #2f9e66; }
.fl-needle { fill: none; stroke: #c4362c; stroke-width: 3; stroke-linecap: round; }
.fl-needle-sm { stroke-width: 2; }
/* 人機介面：輸入欄、數字、單位、按鍵 */
.fl-field { fill: #fff; }
.fl-field-focus { fill: none; stroke: var(--grease); stroke-width: 3; opacity: 0; }
.fl-num { font: 700 19px Consolas, "Courier New", monospace; fill: var(--deep); }
.fl-unit { font: 600 13px Arial, sans-serif; fill: #66758b; }
.fl-key, .fl-key-wide { fill: #3a5091; }
/* 油脂泵浦（友聯 F101 外觀的 Q 版） */
.fl-drum { fill: #1f4fb4; stroke: var(--deep); stroke-width: 2.5; }
.fl-lid { fill: #2b5fcc; stroke: var(--deep); stroke-width: 2.5; }
.fl-shine { fill: #fff; opacity: .2; }
.fl-cap { fill: #f2c230; stroke: var(--deep); stroke-width: 1.5; }
.fl-latch { fill: #d3d8e0; stroke: #6f7884; stroke-width: 1.5; }
.fl-label { fill: #fff; stroke: #c9d2e0; stroke-width: 1.5; }
.fl-brand { font: 800 13px Arial, sans-serif; fill: var(--blue); letter-spacing: .04em; }
.fl-handle { fill: none; stroke: #23272f; stroke-width: 7; stroke-linecap: round; }
.fl-frame { fill: #707985; stroke: var(--deep); stroke-width: 2; }
.fl-post { fill: #d3d8e0; stroke: #6f7884; stroke-width: 1.5; }
.fl-motor { fill: #23272f; stroke: var(--deep); stroke-width: 2; }
.fl-motor-rib { fill: none; stroke: #4c535e; stroke-width: 2; stroke-linecap: round; }
.fl-buzz { fill: none; stroke: var(--blue); stroke-width: 2; stroke-linecap: round; }
.fl-brass { fill: #d9a441; stroke: var(--deep); stroke-width: 1.5; }
.fl-gauge { fill: #fff; stroke: var(--deep); stroke-width: 2; }
.fl-wheel { fill: #3a3f48; stroke: var(--deep); stroke-width: 2; }
.fl-hub { fill: #c9d0da; }
.fl-hose-dark { fill: none; stroke: #2d323b; stroke-width: 10; stroke-linecap: round; }

/* ---------- 動畫（.fl-a 開頭的元素）。SVG 內的變形以元件自身外框為基準 ---------- */
.fl-a { transform-box: fill-box; }

/* 人機介面：逐欄打出數值，最後按確認（6 秒循環）。各字的關鍵影格由 templates/flow.mjs 依欄位產生，寫在 SVG 內的 <style> */
.fl-ty { animation-duration: 6s; animation-timing-function: linear; animation-iteration-count: infinite; }

/* 油脂流動：虛線往油管末端移動 */
.fl-a-flow { animation: fl-flow .7s linear infinite; }
@keyframes fl-flow { to { stroke-dashoffset: -18.1; } }

/* 油脂泵浦：馬達運轉的震動線閃動、壓力錶指針升到定值 */
.fl-a-buzz { animation: fl-buzz .5s steps(2, jump-none) infinite; }
.fl-a-gauge { transform-origin: center; animation: fl-gauge 5s ease-out infinite; }
@keyframes fl-buzz { from { opacity: 1; } to { opacity: .15; } }
@keyframes fl-gauge { 0% { transform: rotate(-80deg); } 35% { transform: rotate(48deg); } 48% { transform: rotate(30deg); } 60%, 100% { transform: rotate(38deg); } }

/* 定量：活塞下壓推出油脂，壓力錶指針晃動後穩定（5 秒循環） */
.fl-a-piston { animation: fl-piston 5s ease-in-out infinite; }
.fl-a-charge { transform-origin: bottom; animation: fl-charge 5s ease-in-out infinite; }
.fl-a-drop { transform-origin: center; animation: fl-drop 5s ease-in infinite; }
.fl-a-needle { transform-origin: center; animation: fl-needle 5s ease-out infinite; }
@keyframes fl-piston { 0%, 10% { transform: none; } 60%, 75% { transform: translateY(40px); } 100% { transform: none; } }
@keyframes fl-charge { 0%, 10% { transform: none; } 60%, 75% { transform: scaleY(.59); } 100% { transform: none; } }
@keyframes fl-drop { 0%, 30% { opacity: 0; transform: scale(.2); } 55% { opacity: 1; transform: none; } 72% { opacity: 1; transform: translateY(6px); } 80%, 100% { opacity: 0; transform: translateY(14px); } }
@keyframes fl-needle { 0% { transform: rotate(-60deg); } 14% { transform: rotate(38deg); } 24% { transform: rotate(-16deg); } 34% { transform: rotate(9deg); } 44%, 100% { transform: rotate(0deg); } }

/* 伺服升降塗油：閥由上往下，油脂跟著畫出來（5 秒循環） */
.fl-a-carriage { animation: fl-carriage 5s ease-in-out infinite; }
.fl-a-bead { transform-origin: top; animation: fl-bead 5s ease-in-out infinite; }
@keyframes fl-carriage { 0%, 8% { transform: none; } 70%, 82% { transform: translateY(150px); } 100% { transform: none; } }
@keyframes fl-bead { 0%, 8% { transform: scaleY(0); opacity: 1; } 70% { transform: scaleY(1); } 88% { transform: scaleY(1); opacity: 1; } 98% { transform: scaleY(1); opacity: 0; } 100% { transform: scaleY(0); opacity: 0; } }
/* 噴油：扇形油霧閃動 */
.fl-a-fan { transform-origin: left center; animation: fl-fan .3s ease-in-out infinite alternate; }
@keyframes fl-fan { from { opacity: .35; transform: scaleX(.85); } to { opacity: .7; transform: none; } }

/* ---------- templates/flow-scenes.mjs 的場景 ---------- */
.fl-link { fill: #8a94a3; stroke: var(--deep); stroke-width: 1.5; }
.fl-coatline { fill: none; stroke: var(--grease); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; opacity: .9; }
.fl-coat-soft { fill: var(--grease); opacity: .55; }
.fl-spray { fill: var(--grease); opacity: .55; }
.fl-nozzle-out { fill: none; stroke: var(--blue); stroke-width: 13; stroke-linecap: round; }
.fl-nozzle-in { fill: none; stroke: #fff; stroke-width: 8; stroke-linecap: round; }
.fl-spring { fill: none; stroke: var(--blue); stroke-width: 3.5; stroke-linejoin: round; }
.fl-brush { fill: #ffb02040; stroke: var(--deep); stroke-width: 2; stroke-dasharray: 2 3; }
.fl-band { fill: var(--grease); opacity: .9; }
.fl-fillarc { fill: none; stroke: var(--grease); stroke-width: 30; }
.fl-wall { stroke: var(--blue); stroke-width: 2.5; }
.fl-steel { fill: #dfe4ec; stroke: var(--deep); stroke-width: 2; stroke-linejoin: round; }
.fl-grip { fill: #23272f; stroke: var(--deep); stroke-width: 2; }
.fl-gripbtn { fill: #4c535e; }
.fl-pin { fill: none; stroke: #8a94a3; stroke-width: 2.5; stroke-linecap: round; }
.fl-spark { fill: none; stroke: var(--grease); stroke-width: 3; stroke-linecap: round; }
.fl-coat-band { fill: var(--grease); opacity: .8; }
.fl-sleeve { fill: #3a5091; stroke: var(--deep); stroke-width: 2; }
.fl-cuff { fill: #e6edf8; stroke: var(--deep); stroke-width: 1.5; }
.fl-skin { fill: #f3c9a8; stroke: #9a6b4f; stroke-width: 1.5; }
.fl-skin-line { fill: none; stroke: #9a6b4f; stroke-width: 1.2; stroke-linecap: round; }
.fl-pail { fill: #dfe7f3; stroke: var(--deep); stroke-width: 2.5; stroke-linejoin: round; }
.fl-pail-rim { fill: none; stroke: var(--deep); stroke-width: 5; stroke-linecap: round; }

/* 輸送鏈：掛輪往右走一個間距（3 秒），經過給油嘴時打一點油 */
.fl-a-conv { animation: fl-conv 3s linear infinite; }
.fl-a-convdot { animation: fl-convdot 3s linear infinite; }
.fl-a-convdrop { animation: fl-convdrop 3s linear infinite; }
@keyframes fl-conv { to { transform: translateX(120px); } }
@keyframes fl-convdot { 0%, 49% { opacity: 0; } 51%, 100% { opacity: 1; } }
@keyframes fl-convdrop { 0%, 36% { opacity: 0; transform: none; } 40% { opacity: 1; transform: none; } 49% { opacity: 1; transform: translateY(6px); } 50%, 100% { opacity: 0; } }

/* 齒輪：轉一圈（6 秒），油脂沿齒面一路塗上 */
.fl-a-spin { transform-origin: center; animation: fl-spin 6s linear infinite; }
.fl-a-coat { animation: fl-coat 6s linear infinite; }
@keyframes fl-spin { to { transform: rotate(360deg); } }
@keyframes fl-coat { from { stroke-dashoffset: var(--len); } to { stroke-dashoffset: 0; } }

/* 集油盒：油滴落下，回收桶油面上升 */
.fl-a-drip { animation: fl-drip 1.8s ease-in infinite; }
.fl-d2 { animation-delay: .6s; }
.fl-d3 { animation-delay: 1.2s; }
.fl-a-fill { transform-origin: bottom; animation: fl-fillup 6s ease-in-out infinite alternate; }
@keyframes fl-drip { 0% { opacity: 0; transform: none; } 15% { opacity: 1; } 80% { opacity: 1; transform: translateY(44px); } 100% { opacity: 0; transform: translateY(46px); } }
@keyframes fl-fillup { from { transform: scaleY(.45); } to { transform: none; } }

/* 培林裡的螺桿：旋出、出油、旋入（6 秒循環）。螺紋線上下移動看起來像在轉 */
.fl-a-screwout, .fl-a-screwin, .fl-a-threadup, .fl-a-threaddown, .fl-a-spread, .fl-a-bfill, .fl-a-band2 { animation-duration: 6s; animation-iteration-count: infinite; animation-timing-function: ease-in-out; }
.fl-a-screwin { transform: translateY(60px); }
.fl-a-screwout { animation-name: fl-screwout; }
.fl-a-screwin { animation-name: fl-screwin; }
.fl-a-threadup { animation-name: fl-threadup; animation-timing-function: linear; }
.fl-a-threaddown { animation-name: fl-threaddown; animation-timing-function: linear; }
.fl-a-threadspin { animation: fl-tspin .6s linear infinite; }
.fl-a-squirt { animation: fl-squirt .8s ease-in infinite; }
.fl-a-band2 { transform-origin: right center; animation-name: fl-band2; }
.fl-a-spread { transform-origin: 50% 58.8%; animation-name: fl-spread; }
.fl-a-bfill { transform-origin: top; animation-name: fl-bfill; }
@keyframes fl-screwout { 0%, 10% { transform: translateY(60px); } 60%, 92% { transform: none; } 100% { transform: translateY(60px); } }
@keyframes fl-screwin { 0%, 10% { transform: none; } 60%, 92% { transform: translateY(60px); } 100% { transform: none; } }
@keyframes fl-threadup { 0%, 10% { transform: none; } 60%, 100% { transform: translateY(-45px); } }
@keyframes fl-threaddown { 0%, 10% { transform: none; } 60%, 100% { transform: translateY(45px); } }
@keyframes fl-tspin { to { transform: translateY(-9px); } }
@keyframes fl-squirt { 0% { opacity: 0; transform: none; } 20% { opacity: 1; } 70% { opacity: 1; transform: translateX(-8px); } 80%, 100% { opacity: 0; transform: translateX(-9px); } }
@keyframes fl-band2 { 0%, 8% { transform: scaleX(0); } 60%, 100% { transform: none; } }
@keyframes fl-spread { 0%, 10% { transform: scaleY(.26); } 60%, 100% { transform: none; } }
@keyframes fl-bfill { 0%, 25% { transform: scaleY(0); } 65%, 100% { transform: none; } }

/* 三點同時塗油：閥嘴下降、滴油、軸上出現油圈（4 秒循環） */
.fl-a-press { animation: fl-press 4s ease-in-out infinite; }
.fl-a-pdrop { animation: fl-pdrop 4s ease-in infinite; }
.fl-a-band { transform-origin: center; animation: fl-band 4s ease-out infinite; }
@keyframes fl-press { 0%, 8% { transform: none; } 22%, 60% { transform: translateY(18px); } 76%, 100% { transform: none; } }
@keyframes fl-pdrop { 0%, 28% { opacity: 0; transform: none; } 32% { opacity: 1; transform: none; } 44% { opacity: 1; transform: translateY(32px); } 46%, 100% { opacity: 0; transform: translateY(32px); } }
@keyframes fl-band { 0%, 44% { opacity: 0; transform: scaleX(.3); } 52%, 88% { opacity: .9; transform: none; } 95%, 100% { opacity: 0; } }

/* 內孔塗油：工件下壓（5 秒）、塗油頭旋轉、內壁由下往上出現薄油 */
.fl-a-borepress { animation: fl-borepress 5s ease-in-out infinite; }
.fl-a-film { transform-origin: bottom; animation: fl-film 5s ease-out infinite; }
.fl-a-stripes { animation: fl-stripes .5s linear infinite; }
@keyframes fl-borepress { 0%, 12% { transform: translateY(-100px); } 50%, 88% { transform: none; } 100% { transform: translateY(-100px); } }
@keyframes fl-film { 0%, 15% { transform: scaleY(0); opacity: 1; } 60%, 90% { transform: none; opacity: 1; } 97%, 100% { transform: none; opacity: 0; } }
@keyframes fl-stripes { to { transform: translateX(12px); } }

/* 軸承：油脂從注油口往兩側灌滿間隙（5 秒） */
.fl-a-arc { animation: fl-arc 5s ease-in-out infinite; }
@keyframes fl-arc { 0%, 10% { stroke-dashoffset: var(--len); opacity: 1; } 65%, 90% { stroke-dashoffset: 0; opacity: 1; } 97%, 100% { stroke-dashoffset: 0; opacity: 0; } }

/* 手持注油器：接上油管、油脂流入；在零件上逐一點油（6 秒） */
.fl-a-plug { animation: fl-plug 5s ease-in-out infinite; }
.fl-a-flowon { animation: fl-flow .7s linear infinite, fl-on 5s linear infinite; }
.fl-a-spark { animation: fl-spark 5s linear infinite; }
.fl-a-hop { animation: fl-hop 6s ease-in-out infinite; }
.fl-a-pdot1, .fl-a-pdot2, .fl-a-pdot3 { animation-duration: 6s; animation-iteration-count: infinite; }
.fl-a-pdot1 { animation-name: fl-pdot1; } .fl-a-pdot2 { animation-name: fl-pdot2; } .fl-a-pdot3 { animation-name: fl-pdot3; }
@keyframes fl-plug { 0%, 6% { transform: translateX(-50px); } 30%, 92% { transform: none; } 100% { transform: translateX(-50px); } }
@keyframes fl-on { 0%, 32% { opacity: 0; } 36%, 92% { opacity: 1; } 96%, 100% { opacity: 0; } }
@keyframes fl-spark { 0%, 29% { opacity: 0; } 31%, 38% { opacity: 1; } 42%, 100% { opacity: 0; } }
@keyframes fl-hop { 0%, 24% { transform: none; } 30%, 54% { transform: translateX(80px); } 60%, 84% { transform: translateX(160px); } 92%, 100% { transform: none; } }
@keyframes fl-pdot1 { 0%, 12% { opacity: 0; } 15%, 93% { opacity: 1; } 97%, 100% { opacity: 0; } }
@keyframes fl-pdot2 { 0%, 42% { opacity: 0; } 45%, 93% { opacity: 1; } 97%, 100% { opacity: 0; } }
@keyframes fl-pdot3 { 0%, 72% { opacity: 0; } 75%, 93% { opacity: 1; } 97%, 100% { opacity: 0; } }

/* 取油具：伸進油桶挖起油脂（5 秒）；在泵浦上方輕晃、油脂落進油桶 */
.fl-a-dig { animation: fl-dig 5s ease-in-out infinite; }
.fl-a-blob { animation: fl-blob 5s linear infinite; }
.fl-a-wobble { transform-origin: center; animation: fl-wobble 1.2s ease-in-out infinite alternate; }
.fl-a-plop { animation: fl-plop 2.4s ease-in infinite; }
@keyframes fl-dig { 0%, 10% { transform: none; } 30%, 40% { transform: translateY(46px); } 60%, 100% { transform: none; } }
@keyframes fl-blob { 0%, 38% { opacity: 0; } 44%, 92% { opacity: 1; } 97%, 100% { opacity: 0; } }
@keyframes fl-wobble { from { transform: rotate(-3deg); } to { transform: rotate(3deg); } }
@keyframes fl-plop { 0% { opacity: 0; transform: none; } 10% { opacity: 1; } 60% { opacity: 1; transform: translate(-14px, 28px); } 72%, 100% { opacity: 0; transform: translate(-14px, 30px); } }

@media (prefers-reduced-motion: reduce) {
  .flow-js .flow-step { opacity: 1; transform: none; }
  .flow-steps::after { display: none; }
}
@media print {
  .flow-js .flow-step { opacity: 1; transform: none; }
}