/* =====================================================
   ตัวทดลองอนิเมชั่น (เฉพาะ mockup) — ยังไม่ได้ใส่ในเว็บจริง
   ทุกกฎทำงานเมื่อ <html class="anim-on"> (กดปุ่มมุมซ้ายล่างเพื่อเปิด/ปิดเทียบ)
   เลขในวงเล็บ = เลขข้อในเอกสาร suknoi-animation-options.md
   ===================================================== */
@keyframes a-fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes a-fadeDown { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@keyframes a-slideL { from { opacity: 0; transform: translateX(22px); } to { opacity: 1; transform: none; } }
@keyframes a-slideR { from { opacity: 0; transform: translateX(-22px); } to { opacity: 1; transform: none; } }
@keyframes a-pop { 0% { transform: scale(.6); opacity: 0; } 70% { transform: scale(1.08); opacity: 1; } 100% { transform: scale(1); } }
@keyframes a-flash { 0% { background: #fef3c7; } 100% { background: transparent; } }
@keyframes a-bump { 0% { transform: scale(1); } 35% { transform: scale(1.12); color: var(--brand); } 100% { transform: scale(1); } }
@keyframes a-shake { 0%, 100% { transform: none; } 20%, 60% { transform: translateX(-5px); } 40%, 80% { transform: translateX(5px); } }
@keyframes a-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
@keyframes a-spin { to { transform: rotate(360deg); } }
@keyframes a-pinDrop { 0% { transform: translate(-50%, -140%); } 60% { transform: translate(-50%, -92%); } 100% { transform: translate(-50%, -100%); } }
@keyframes a-draw { from { stroke-dashoffset: 60; } to { stroke-dashoffset: 0; } }
@keyframes a-ring { 0% { box-shadow: 0 0 0 0 rgba(22, 163, 74, .45); } 100% { box-shadow: 0 0 0 18px rgba(22, 163, 74, 0); } }

/* (02 / 25) เปลี่ยนหน้า + เปลี่ยนขั้น: ไปข้างหน้าเลื่อนจากขวา ย้อนกลับเลื่อนจากซ้าย */
.anim-on .view.active { animation: a-fadeUp .22s ease-out; }
.anim-on[data-dir="fwd"] .view.active { animation: a-slideL .22s ease-out; }
.anim-on[data-dir="back"] .view.active { animation: a-slideR .22s ease-out; }

/* (03) แท็บล่างที่เลือก */
.anim-on .tabbar button { transition: color .18s, transform .12s; }
.anim-on .tabbar button:active { transform: scale(.92); }

/* (04 / 31 / 39) ปุ่มยุบเล็กน้อยตอนกด */
.anim-on .btn, .anim-on .qty button, .anim-on .c-row, .anim-on .pmode button, .anim-on .atype button, .anim-on .date-btn,
.anim-on .svc-opt, .anim-on .tier, .anim-on .svc-main, .anim-on .mr-item, .anim-on .home-pkg { transition: transform .12s, background-color .18s, border-color .18s, box-shadow .18s; }
.anim-on .btn:active, .anim-on .qty button:active, .anim-on .c-row:active, .anim-on .pmode button:active, .anim-on .atype button:active,
.anim-on .date-btn:active, .anim-on .svc-opt:active, .anim-on .tier:active, .anim-on .mr-item:active, .anim-on .home-pkg:active { transform: scale(.97); }

/* (05) ข้อความแจ้งเตือนเลื่อนขึ้น */
.anim-on .toast { transition: opacity .2s, transform .2s; transform: translate(-50%, 10px); }
.anim-on .toast.show { transform: translate(-50%, 0); }

/* (13) ผลค้นหาเลื่อนลงใต้ช่องค้นหา */
.anim-on .map-results:not([hidden]) { animation: a-fadeDown .16s ease-out; }

/* (15) หมุดเด้งเบา ๆ หลังเลือกผลค้นหา */
.anim-on .map-pin.a-drop { animation: a-pinDrop .35s ease-out; }

/* (16) กำลังค้นหาที่อยู่ → กะพริบเบา ๆ */
.anim-on #pinAddress.a-loading { animation: a-pulse 1s ease-in-out infinite; color: var(--muted); }
.anim-on #pinAddress.a-loaded { animation: a-fadeUp .2s ease-out; }

/* (17) ผลเขตบริการเปลี่ยนสีนุ่ม ๆ */
.anim-on #zoneBox { transition: background-color .25s, color .25s; }
.anim-on #zoneBox.a-changed span { animation: a-fadeUp .2s ease-out; }

/* (18) ปุ่มตำแหน่งปัจจุบัน หมุนระหว่างหา */
.anim-on .locate-btn.a-busy i { animation: a-spin .8s linear infinite; }

/* (19) แผงข้อมูล: เลื่อนขึ้น (มีอยู่แล้ว) + ฉากหลังเฟด */
.anim-on .sheet-wrap.open { animation: a-fade .2s; }
@keyframes a-fade { from { background: rgba(15, 23, 42, 0); } }

/* (20 / 21 / 22 / 37) การ์ด ↔ ฟอร์ม · บ้าน ↔ คอนโด · มารับเลย ↔ นัดล่วงหน้า · โปรไฟล์ดู ↔ แก้ */
.anim-on #sheetSaved:not([hidden]), .anim-on #sheetPersonal:not([hidden]), .anim-on .addr-grid:not([hidden]),
.anim-on .pick-later:not([hidden]), .anim-on #profileView:not([hidden]), .anim-on #profileForm:not([hidden]),
.anim-on #shopBrowser:not([hidden]), .anim-on #svcMain:not([hidden]) { animation: a-fadeUp .2s ease-out; }

/* (23) เลือกวันนัด */
.anim-on .date-btn.sel { animation: a-pop .22s ease-out; }

/* (24) โฟกัสช่องกรอก */
.anim-on .input { transition: border-color .15s, box-shadow .15s; }
.anim-on .input:focus { box-shadow: 0 0 0 4px rgba(14, 165, 233, .15); }

/* (26) ตัวบอกขั้นตอน: เส้นค่อย ๆ เติม + เลขเด้งเป็นเครื่องหมายถูก */
.anim-on .step::before { background: linear-gradient(90deg, var(--brand) 50%, var(--line) 50%) right / 200% 100% no-repeat; transition: background-position .35s ease; }
.anim-on .step.done::before, .anim-on .step.active::before { background-position: left; }
.anim-on .step b { transition: background-color .25s, transform .2s; }
.anim-on .step.active b { transform: scale(1.12); }
.anim-on .step.done b.a-justdone { animation: a-pop .3s ease-out; }

/* (27 / 28 / 29) เลือกคอร์ส / น้ำ / จำนวนผ้า */
.anim-on .svc { transition: border-color .2s, box-shadow .2s, background-color .2s; }
.anim-on .svc.on .radio-dot, .anim-on .tier.sel .radio-dot { animation: a-pop .25s ease-out; }
.anim-on .svc-opt.sel b i { animation: a-pop .25s ease-out; }
.anim-on #pkgDetail.a-changed { animation: a-fadeUp .2s ease-out; }

/* (30) สวิตช์: หัวสวิตช์เด้งนิดหน่อย */
.anim-on .switch span::before { transition: left .2s cubic-bezier(.3, 1.4, .6, 1); }

/* (32 / 33) ยอดรวม + เวลาคืนผ้าเปลี่ยน: ไฮไลต์สั้น ๆ (ตัวเลขจริงเปลี่ยนทันที ไม่วิ่งนับ) */
.anim-on #sumTotal { display: inline-block; }
.anim-on #sumTotal.a-bump { animation: a-bump .35s ease-out; }
.anim-on #etaLine.a-flash { animation: a-flash .8s ease-out; border-radius: 8px; }

/* (34) รายละเอียดค่าใช้จ่ายเปิด/ปิด */
.anim-on #sumLines:not([hidden]) { animation: a-fadeDown .18s ease-out; }
.anim-on #summary.open .sum-label i { transform: rotate(180deg); }

/* (12) หน้าต่างเงื่อนไข / ยืนยัน: กล่องขยายขึ้น */
@keyframes a-zoom { from { opacity: 0; transform: scale(.94) translateY(10px); } to { opacity: 1; transform: none; } }
.anim-on .modal.open .modal-box { animation: a-zoom .2s ease-out; }

/* (36) ติ๊กเงื่อนไข */
.anim-on .check-row input:checked + .box i { animation: a-pop .22s ease-out; }

/* (41) กรอกผิด: ช่องสั่นครั้งเดียว + ข้อความเฟด */
.anim-on .input.invalid { animation: a-shake .3s ease-out; }
.anim-on #formError:not(:empty), .anim-on #profileError:not(:empty) { animation: a-fadeUp .2s ease-out; }

/* (42) รูปย่อเด้งเข้า */
.anim-on .photo-grid .ph { animation: a-pop .25s ease-out; }

/* (43) ปุ่มไปต่อพร้อมใช้ */
.anim-on #btnNext { transition: background-color .25s, opacity .25s, transform .12s; }
.anim-on #btnNext.a-ready { animation: a-bump .35s ease-out; }

/* (44) กำลังสร้างออเดอร์: ไอคอนหมุนในปุ่ม */
.anim-on #confirmYes:disabled::before, .anim-on #btnSendOA.disabled i { content: ""; display: inline-block; width: 14px; height: 14px; margin-right: 8px; border: 2px solid rgba(255,255,255,.5); border-top-color: #fff; border-radius: 50%; animation: a-spin .7s linear infinite; vertical-align: -2px; }
.anim-on #btnSendOA.disabled i::before { content: none; }

/* (45) สั่งสำเร็จ: วงกลมเด้ง + วงแหวนกระจาย */
.anim-on #doneSent:not([hidden]) .done-icon { animation: a-pop .4s ease-out, a-ring 1s .3s ease-out; }
.anim-on .send-card .badge { animation: a-pulse 1.6s ease-in-out 2; }
.anim-on #doneTicket { animation: a-fadeUp .3s .1s ease-out both; }

/* (46) สถานะงาน: จุดความคืบหน้าค่อย ๆ เติม */
.anim-on .tracker li, .anim-on .dots .dot { animation: a-fadeUp .25s ease-out both; }
.anim-on .tracker li:nth-child(2), .anim-on .dots .dot:nth-child(2) { animation-delay: .04s; }
.anim-on .tracker li:nth-child(3), .anim-on .dots .dot:nth-child(3) { animation-delay: .08s; }
.anim-on .tracker li:nth-child(4), .anim-on .dots .dot:nth-child(4) { animation-delay: .12s; }
.anim-on .tracker li:nth-child(5), .anim-on .dots .dot:nth-child(5) { animation-delay: .16s; }

/* (38) ยังไม่มีออเดอร์: ไอคอนขยับครั้งเดียว */
.anim-on .empty .ic { animation: a-pop .4s ease-out; }

/* (10) การ์ดคอร์สหน้าแรก */
.anim-on .home-pkg:hover { border-color: var(--brand-2); }

/* (01) โหลดครั้งแรก: เฟดออกนุ่ม ๆ */
.anim-on #loading { transition: opacity .25s; }

/* ลดการเคลื่อนไหว (ตั้งค่าในมือถือ) → ปิดการเลื่อน / เด้ง เหลือแค่สี */
/* ในเว็บจริงจะเคารพค่านี้เสมอ — ในตัวทดลองข้ามไว้ (class force-motion) เพราะคอม Windows หลายเครื่องปิดเอฟเฟกต์ไว้ จะได้เห็นอนิเมชั่น */
@media (prefers-reduced-motion: reduce) {
  .anim-on:not(.force-motion) *, .anim-on:not(.force-motion) *::before { animation: none !important; transition-duration: .01ms !important; }
}

/* ---------- ปุ่มเปิด/ปิดตัวทดลอง ---------- */
.anim-toggle { position: fixed; left: 8px; bottom: 84px; z-index: 99999; display: flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; border: 0;
  background: #7c3aed; color: #fff; font: 600 12px "Prompt", sans-serif; box-shadow: 0 6px 18px rgba(124, 58, 237, .35); cursor: pointer; opacity: .92; }
.anim-toggle.off { background: #64748b; box-shadow: none; }