/* ============================================================
motion-kit.css — a11y-safe motion presets (drop-in)
------------------------------------------------------------
ปรัชญา: "ใส่เต็มที่ + มีเวอร์ชันเซฟให้คนที่ขอ" (progressive enhancement)
• คนทั่วไป (data-motion="full") -> เห็น animation เต็ม
• คนกด Reduce motion ในเครื่อง -> data-motion="reduced" (set อัตโนมัติจาก
matchMedia ใน motion-kit.js)
reduce ≠ ศูนย์ : คง opacity / สี / scale เบาๆ ที่ช่วยความเข้าใจ
ตัดเฉพาะ movement (translate/parallax/หมุน) ที่ทำคนเวียนหัว
(ตาม Emil Kowalski: "reduced motion = fewer & gentler, not zero")
stack (decision #83/#84):
• micro-interaction (hover/press/focus) = CSS ล้วน (ไฟล์นี้) — layer 1
• scroll-reveal / count-up / progress / SVG draw = Motion(motion.dev)
ขับผ่าน motion-kit.js — แต่ "หน้าตา" ยังวิ่งด้วย CSS transition (off-main-thread)
cascade contract:
• element ถูกซ่อน "เฉพาะ" ตอน มี .mk-js (เพิ่มโดย inline script)
-> ถ้าปิด JS ทั้งหมด คลาสไม่ถูกเพิ่ม -> เนื้อหาโชว์ปกติ (graceful)
• performance: animate แค่ transform / opacity / clip-path / filter (GPU)
============================================================ */
:root {
/* ---- timing ---- */
--mk-dur-micro: 160ms; /* hover / press feedback */
--mk-dur-enter: 600ms; /* scroll-reveal entrances */
--mk-dur-exit: 220ms; /* exits = เร็วกว่า enter เสมอ */
/* ---- easing (Emil's strong curves — built-in CSS easings อ่อนไป) ---- */
--mk-ease-out: cubic-bezier(0.23, 1, 0.32, 1); /* enter/exit, สแน็ป */
--mk-ease-in-out: cubic-bezier(0.77, 0, 0.175, 1); /* move/morph */
--mk-ease-soft: cubic-bezier(0.22, 0.61, 0.36, 1); /* clinical, นุ่มกว่า */
--mk-ease-back: cubic-bezier(0.34, 1.56, 0.64, 1); /* overshoot เบาๆ */
/* ---- distance (calm = 16px, ไม่ใช่ 100px แบบ AOS) ---- */
--mk-rise: 16px;
}
/* ============================================================
1) SCROLL-REVEAL ENTRANCES — data-mk="fade|fade-up|scale-in|blur-in|clip|mask"
============================================================ */
/* hidden state เปิดเฉพาะตอน JS พร้อม (กัน flash + graceful no-JS) */
html.mk-js [data-mk] {
opacity: 0;
transition-property: opacity, transform, filter, clip-path;
transition-duration: var(--mk-enter, var(--mk-dur-enter));
transition-timing-function: var(--mk-ease-out);
transition-delay: var(--mk-delay, 0ms);
will-change: opacity, transform;
}
/* revealed (เพิ่ม .mk-in โดย motion-kit.js เมื่อ element เข้า viewport) */
html.mk-js [data-mk].mk-in {
opacity: 1;
transform: none;
filter: none;
clip-path: inset(0 0 0 0);
}
/* replay: motion-kit.js สลับ .mk-replaying บน ชั่วขณะ เพื่อ reset แบบ
กระโดดทันที (ไม่ทวีนถอยหลังให้ดูวูบ) แล้วค่อยปล่อย transition เล่น enter เต็ม */
html.mk-js.mk-replaying [data-mk],
html.mk-js.mk-replaying [data-mk="mask"] .mk-mask__in,
html.mk-js.mk-replaying .mk-progress__bar,
html.mk-js.mk-replaying [data-mk-draw] path,
html.mk-js.mk-replaying [data-mk-draw] line,
html.mk-js.mk-replaying [data-mk-draw] polyline,
html.mk-js.mk-replaying [data-mk-draw] circle,
html.mk-js.mk-replaying [data-mk-draw] rect { transition-duration: 0s !important; }
/* ---- start states ของแต่ละแบบ ---- */
html.mk-js [data-mk="fade-up"] { transform: translate3d(0, var(--mk-rise), 0); }
html.mk-js [data-mk="fade-down"] { transform: translate3d(0, calc(var(--mk-rise) * -1), 0); }
html.mk-js [data-mk="fade-left"] { transform: translate3d(calc(var(--mk-rise) * -1), 0, 0); }
html.mk-js [data-mk="fade-right"]{ transform: translate3d(var(--mk-rise), 0, 0); }
html.mk-js [data-mk="scale-in"] { transform: scale(0.96); } /* ไม่เริ่มจาก 0 (Emil) */
html.mk-js [data-mk="blur-in"] { transform: translate3d(0, 8px, 0); filter: blur(10px); }
html.mk-js [data-mk="clip"] { clip-path: inset(0 0 100% 0); } /* เผยจากล่างขึ้นบน */
/* "fade" เฉยๆ = opacity อย่างเดียว ไม่ต้องมี transform */
/* "mask" จัดการแยกในส่วน text-mask ด้านล่าง */
/* scale-in ใช้ overshoot curve ให้รู้สึกมีชีวิต */
html.mk-js [data-mk="scale-in"] { transition-timing-function: var(--mk-ease-back); }
/* ============================================================
2) STAGGER — data-mk-stagger บน parent -> ลูก [data-mk] เหลื่อมเวลา
(delay จริงเซ็ตเป็น inline --mk-delay โดย motion-kit.js; ค่านี้คือ fallback)
============================================================ */
html.mk-js [data-mk-stagger] > [data-mk]:nth-child(1) { --mk-delay: 0ms; }
html.mk-js [data-mk-stagger] > [data-mk]:nth-child(2) { --mk-delay: 60ms; }
html.mk-js [data-mk-stagger] > [data-mk]:nth-child(3) { --mk-delay: 120ms; }
html.mk-js [data-mk-stagger] > [data-mk]:nth-child(4) { --mk-delay: 180ms; }
html.mk-js [data-mk-stagger] > [data-mk]:nth-child(5) { --mk-delay: 240ms; }
html.mk-js [data-mk-stagger] > [data-mk]:nth-child(6) { --mk-delay: 300ms; }
/* ============================================================
3) TEXT MASK REVEAL — data-mk="mask"
หัวข้อเลื่อนขึ้นจากใต้ "หน้ากาก" (overflow hidden). markup:
ข้อความ
============================================================ */
html.mk-js [data-mk="mask"] {
display: inline-block;
overflow: hidden;
opacity: 1; /* ตัว mask ไม่ fade — ลูกข้างในเลื่อนแทน */
vertical-align: top;
line-height: 1.05; /* กันตัวอักษรหางยาว (ฤ ฎ) โดนตัด ปรับตามฟอนต์ */
padding-bottom: 0.08em;
}
html.mk-js [data-mk="mask"] .mk-mask__in {
display: inline-block;
transform: translate3d(0, 105%, 0);
transition: transform var(--mk-enter, 720ms) var(--mk-ease-out) var(--mk-delay, 0ms);
will-change: transform;
}
html.mk-js [data-mk="mask"].mk-in .mk-mask__in { transform: none; }
/* ============================================================
4) SVG PATH DRAW — data-mk-draw บน