/* ===== ท่าแปลงร่างมาสคอต แชต ⇄ งาน (v2.0.9 · ใช้ร่วม 2 ที่) =====
   หน้าคู่มือ (index.html — เวที .stage.mfx) · หน้าแชตของบัญชีที่ใช้โหมดงาน (โหลดพร้อม taskui — มาสคอตคำทักทาย .gmk.mfx)
   ลิงก์ต่อจาก mark.css เสมอ (ท่านี้ต้องชนะท่า "กำลังคิด" ตอนชี้เมาส์ของ mark.css) · บัญชีที่ไม่ได้ใช้โหมดงานไม่โหลดไฟล์นี้
   สถานะสุดท้ายอยู่ที่ .mfx.is-task (ไม่มี = โหมดแชต) — หน้าตาถูกต้องแม้ไม่มีแอนิเมชัน (ลดการเคลื่อนไหว · เปิดมาในโหมดนั้นเลย)
   ท่าครั้งเดียว: .fx-on (เข้าโหมดงาน ~1.15 วิ) · .fx-off (กลับโหมดแชต ~1.02 วิ) — สคริปต์ของแต่ละหน้าถอดคลาสเมื่อจบ ไม่มีแอนิเมชันค้าง
     เข้า: แกนวาบ → โหนดติดไฟไซแอนทีละดวงตามเข็ม + พลังวิ่งตามแขนเข้าแกน → ลำแสงสแกนกวาดลง ไบเซอร์ปรากฏที่เดิม → ป้าย "โหมดงาน" ใต้มาสคอต
     ออก: ป้ายหาย → ลำแสงกวาดขึ้น ไบเซอร์จางหาย → โหนดติดไฟส้มย้อนเข็ม → แกนวาบ
   ในตัวมาสคอตขยับแค่ fill / stroke / stroke-dashoffset / opacity ของกลุ่มใน SVG · ป้ายเป็น absolute (ตำแหน่งตั้งในแต่ละหน้า) → ผังไม่ขยับ
   .fx-now = ตั้งสถานะเริ่มของท่าทันที (ไม่มี transition) ก่อนใส่ .fx-on/.fx-off */
.mfx{--cy-ink:#0e4a5e}
/* ไบเซอร์ของมาสคอตโหมดงาน (ชุดสีไซแอน — เท่ากับ .mk.vt-cy ใน taskui.css) */
.mfx .mk.vt-cy{--mk-vis:#e0f7fb;--mk-vis-a:.5;--mk-vis-glow:#00bcd4;--mk-vis-ink:#0e4a5e;--mk-vis-acc:#00838f}
.mfx .mk-vf{fill:var(--mk-vis);fill-opacity:var(--mk-vis-a)}
.mfx .mk-vg{stroke:var(--mk-vis-glow)}
.mfx .mk-vk,.mfx .mk-vo{stroke:var(--mk-vis-ink)}
.mfx .mk-sct{stroke:var(--mk-vis-glow)}
.mfx .mk-scb{stroke:var(--mk-vis-acc)}
@keyframes mk-scb{0%{stroke-dashoffset:2}65%,100%{stroke-dashoffset:-27}}
@keyframes mk-sct{0%{stroke-dashoffset:6}65%,100%{stroke-dashoffset:-23}}
/* ไบเซอร์ปรากฏที่เดิม (เฟด + วาดกรอบ ไม่เลื่อน) */
.mfx .vz{opacity:0;transition:opacity .2s linear .2s}
.mfx.is-task .vz{opacity:1;transition:opacity .22s linear .44s}
.mfx .vk-draw{stroke-dasharray:1 1;stroke-dashoffset:1;transition:stroke-dashoffset .26s ease-in .12s}
.mfx.is-task .vk-draw{stroke-dashoffset:0;transition:stroke-dashoffset .32s ease-out .46s}
/* เส้นสแกนในไบเซอร์กวาด 1 รอบ + ตามองตาม · ถอดไบเซอร์: เลนส์วาบฟ้าสั้น ๆ */
.mfx.fx-on .mk-scb{animation:mk-scb .5s cubic-bezier(.4,0,.6,1) .62s 1 both}
.mfx.fx-on .mk-sct{animation:mk-sct .5s cubic-bezier(.4,0,.6,1) .62s 1 both}
.mfx.fx-on .mk-dot{animation:eyeScan .5s ease-in-out .62s 1 both}
@keyframes eyeScan{0%,100%{stroke-dashoffset:-4.5}20%{stroke-dashoffset:-2.2}75%{stroke-dashoffset:-6.8}}
.mfx.fx-off .mk-lens{animation:lensBlink .3s ease-out .05s 1 both}
@keyframes lensBlink{0%,100%{fill:#fff}40%{fill:#e0f7fb}}
/* แกนกลางวาบ */
@keyframes coreFlash{0%,100%{fill:var(--mk-core)}35%{fill:#fff3d6}}
.mfx.fx-on .mk-c{animation:coreFlash .45s ease-out 0s 1 both}
.mfx.fx-off .mk-c{animation:coreFlash .4s ease-out .55s 1 both}
/* โหนดติดไฟทีละดวง: เข้า = ไซแอนตามเข็ม (ซ้ายบน→ขวาบน→ขวาล่าง→ซ้ายล่าง) · ออก = ส้มย้อนเข็ม */
@keyframes nodeZap{0%,100%{fill:currentColor;stroke:currentColor;stroke-width:0}30%,55%{fill:#00bcd4;stroke:#00bcd4;stroke-width:2.4}}
@keyframes nodeHot{0%,100%{fill:currentColor;stroke:currentColor;stroke-width:0}30%,55%{fill:var(--mk-hot);stroke:var(--mk-hot);stroke-width:2.2}}
.mfx.fx-on .mk-n{animation:nodeZap .36s ease-out both}
.mfx.fx-on .mk-n1{animation-delay:.08s}.mfx.fx-on .mk-n2{animation-delay:.16s}.mfx.fx-on .mk-n3{animation-delay:.24s}.mfx.fx-on .mk-n4{animation-delay:.32s}
.mfx.fx-off .mk-n{animation:nodeHot .32s ease-out both}
.mfx.fx-off .mk-n4{animation-delay:.28s}.mfx.fx-off .mk-n3{animation-delay:.35s}.mfx.fx-off .mk-n2{animation-delay:.42s}.mfx.fx-off .mk-n1{animation-delay:.49s}
/* พลังวิ่งตามแขน: เส้นไซแอนจากโหนดเข้าแกน (pathLength=1) */
.mfx .zap{fill:none;stroke:#00bcd4;stroke-width:2.6;stroke-linecap:round;stroke-dasharray:1 1;stroke-dashoffset:1;stroke-opacity:0}
@keyframes zap{0%{stroke-dashoffset:1;stroke-opacity:1}60%{stroke-dashoffset:0;stroke-opacity:1}100%{stroke-dashoffset:0;stroke-opacity:0}}
.mfx.fx-on .zap{animation:zap .34s ease-out both}
.mfx.fx-on .z1{animation-delay:.12s}.mfx.fx-on .z2{animation-delay:.2s}.mfx.fx-on .z3{animation-delay:.28s}.mfx.fx-on .z4{animation-delay:.36s}
/* ลำแสงสแกนกวาดทั้งตัว (ขีดแนวนอนวิ่งตามเส้นแนวตั้งด้วย dashoffset — ไม่ใช้ transform) */
.mfx .beam{fill:none;stroke:#00bcd4;stroke-width:42;stroke-dasharray:.8 100;stroke-dashoffset:0}
.mfx .beam2{fill:none;stroke:#00bcd4;stroke-opacity:.16;stroke-width:42;stroke-dasharray:4 100;stroke-dashoffset:4}
@keyframes beamDown{from{stroke-dashoffset:.8}to{stroke-dashoffset:-48}}
@keyframes beamDown2{from{stroke-dashoffset:4.8}to{stroke-dashoffset:-44}}
@keyframes beamUp{from{stroke-dashoffset:-48}to{stroke-dashoffset:.8}}
@keyframes beamUp2{from{stroke-dashoffset:-48.8}to{stroke-dashoffset:4.8}}
.mfx .beam,.mfx .beam2{visibility:hidden}
.mfx.fx-on .beam,.mfx.fx-on .beam2,.mfx.fx-off .beam,.mfx.fx-off .beam2{visibility:visible}
.mfx.fx-on .beam{animation:beamDown .42s cubic-bezier(.4,0,.6,1) .4s both}
.mfx.fx-on .beam2{animation:beamDown2 .42s cubic-bezier(.4,0,.6,1) .4s both}
.mfx.fx-off .beam{animation:beamUp .36s cubic-bezier(.4,0,.6,1) .1s both}
.mfx.fx-off .beam2{animation:beamUp2 .36s cubic-bezier(.4,0,.6,1) .1s both}
/* ป้าย "● โหมดงาน" ใต้มาสคอต (โผล่ท้ายท่า) — ตำแหน่ง absolute ตั้งในแต่ละหน้า */
.mfx .bl-task{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;line-height:1.45;color:#fff;background:var(--cy-ink);border-radius:999px;padding:3px 12px 3px 10px;
  opacity:0;translate:0 6px;transition:opacity .15s linear,translate .15s ease}
.mfx .bl-task i{width:7px;height:7px;border-radius:50%;background:#4dd0e1;box-shadow:0 0 0 2px rgba(77,208,225,.3)}
.mfx.is-task .bl-task{opacity:1;translate:0 0;transition:opacity .2s ease .7s,translate .3s cubic-bezier(.3,1.5,.55,1) .7s}
/* ทักทายตอนเปิดหน้ามาที่โหมดงาน (.mk-hi — ท่าโหนด/ตาอยู่ใน chat.html): + เส้นสแกนในไบเซอร์กวาด 1 รอบ */
.mfx.is-task.mk-hi .mk-scb{animation:mk-scb 1.2s cubic-bezier(.4,0,.6,1) .5s 1 both}
.mfx.is-task.mk-hi .mk-sct{animation:mk-sct 1.2s cubic-bezier(.4,0,.6,1) .5s 1 both}
/* คำทักทายเปลี่ยนกลางท่า: เฟดเข้าสั้น ๆ (หน้าแชต · ถอดคลาสเมื่อจบ) */
@keyframes mfxTx{from{opacity:0}to{opacity:1}}
.mfx-tx{animation:mfxTx .22s ease-out both}
/* ลดการเคลื่อนไหว: ไม่วาด ไม่กวาด ไม่ติดไฟ — เฟดสลับนิ่ง ๆ 0.2 วิ */
@media (prefers-reduced-motion:reduce){
  .mfx .vz,.mfx.is-task .vz{transition:opacity .2s linear!important}
  .mfx .vk-draw,.mfx.is-task .vk-draw{stroke-dashoffset:0!important;transition:none!important}
  .mfx.fx-on *,.mfx.fx-off *,.mfx.fx-on,.mfx.fx-off{animation:none!important}
  .mfx .bl-task,.mfx.is-task .bl-task{translate:none!important;transition:opacity .2s linear!important}
  .mfx .beam,.mfx .beam2{visibility:hidden!important}
  .mfx-tx{animation-duration:.2s;animation-timing-function:linear}
}
/* ตั้งสถานะเริ่มของท่าทันที (ท้ายไฟล์ = ชนะ transition ข้างบนทุกข้อ) */
.mfx.fx-now.fx-now,.mfx.fx-now.fx-now *{transition:none!important}