/* ============================================================
   FORMATIX — UI v2 motion primitives + การเปลี่ยนหน้า (docs/แผนปรับโฉมหน้าเว็บ.md ข้อ 2)
   ทุกกฎผูกกับ html[data-ui="v2"] ซึ่ง fx-motion.js ใส่ให้เฉพาะจอ ≥ 1024px ที่ไม่ใช่โหมดแอป
   → มือถือ / โหมดแอปไม่โดนกฎในไฟล์นี้เลย
   ============================================================ */

/* ---------- reveal: เข้าจอแบบ rise / blur / mask / chars ---------- */
html[data-ui="v2"] [data-fx~="reveal"] {
  opacity: 0;
  transform: translateY(var(--rise-2));
  transition: opacity var(--dur-4) var(--ease-out), transform var(--dur-4) var(--ease-out),
              filter var(--dur-4) var(--ease-out), clip-path var(--dur-4) var(--ease-out);
  transition-delay: var(--d, 0ms);
}
html[data-ui="v2"] [data-fx~="reveal"][data-fx-style="blur"] { filter: blur(10px); }
html[data-ui="v2"] [data-fx~="reveal"][data-fx-style="mask"] { transform: none; clip-path: inset(0 0 100% 0); }
html[data-ui="v2"] [data-fx~="reveal"][data-fx-style="chars"] { opacity: 1; transform: none; }
html[data-ui="v2"] [data-fx~="reveal"] .fx-ch {
  display: inline-block;
  opacity: 0;
  transform: translateY(.45em);
  transition: opacity var(--dur-3) var(--ease-out), transform var(--dur-3) var(--ease-out);
  transition-delay: calc(var(--d, 0ms) + var(--i, 0) * 18ms);
}
html[data-ui="v2"] [data-fx~="reveal"].is-in { opacity: 1; transform: none; filter: none; clip-path: inset(0); }
html[data-ui="v2"] [data-fx~="reveal"].is-in .fx-ch { opacity: 1; transform: none; }

/* ระดับ "น้อย": ไม่เบลอ ยกขึ้นสั้นลง · ระดับ "ปิด": เห็นทันที */
html.motion-subtle[data-ui="v2"] [data-fx~="reveal"]:not(.is-in) { transform: translateY(var(--rise-1)); filter: none; }
html.motion-off[data-ui="v2"] [data-fx~="reveal"],
html.motion-off[data-ui="v2"] [data-fx~="reveal"] .fx-ch {
  opacity: 1; transform: none; filter: none; clip-path: none; transition: none;
}

/* ---------- magnetic: ปุ่มเอนตามเคอร์เซอร์ ---------- */
html.motion-full[data-ui="v2"] [data-fx~="magnetic"] {
  translate: var(--mx, 0px) var(--my, 0px);
  transition: translate var(--dur-3) var(--ease-spring);
}

/* ---------- light: แสงตามเคอร์เซอร์บนพื้นผิว ---------- */
html[data-ui="v2"] [data-fx~="light"] { position: relative; isolation: isolate; }
html[data-ui="v2"] [data-fx~="light"]::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(260px circle at var(--lx, 50%) var(--ly, 50%),
              color-mix(in oklab, var(--accent, #6236ee) 22%, transparent), transparent 70%);
  opacity: 0;
  transition: opacity var(--dur-2) var(--ease-out);
}
html[data-ui="v2"] [data-fx~="light"]:hover::after { opacity: 1; }
html.motion-off[data-ui="v2"] [data-fx~="light"]::after { display: none; }

/* ---------- depth: fx-motion.js ขยับด้วย translate (ไม่ทับ transform ของ component) ---------- */
html.motion-full[data-ui="v2"] [data-depth] { will-change: translate; }

/* ---------- เปลี่ยนหน้า: หน้าเก่าถอยลึก หน้าใหม่ไหลเข้า · แถบบนอยู่นิ่ง ---------- */
html[data-ui="v2"] .topbar { view-transition-name: fx-topbar; }
html[data-ui="v2"]::view-transition-group(fx-topbar),
html[data-ui="v2"]::view-transition-old(fx-topbar),
html[data-ui="v2"]::view-transition-new(fx-topbar) { animation: none; }

html[data-ui="v2"]::view-transition-old(root) { animation: fx-vt-out var(--dur-3) var(--ease-io) both; }
html[data-ui="v2"]::view-transition-new(root) { animation: fx-vt-in var(--dur-4) var(--ease-out) both; }
html[data-ui="v2"][data-vt="fade"]::view-transition-old(root) { animation: fx-vt-fade-out var(--dur-2) linear both; }
html[data-ui="v2"][data-vt="fade"]::view-transition-new(root) { animation: fx-vt-fade-in var(--dur-3) linear both; }
html[data-ui="v2"]::view-transition-group(fx-morph) { animation-duration: var(--dur-4); animation-timing-function: var(--ease-io); }

@keyframes fx-vt-out { to { opacity: 0; transform: scale(.97); filter: blur(4px); } }
@keyframes fx-vt-in { from { opacity: 0; transform: scale(1.015); } }
@keyframes fx-vt-fade-out { to { opacity: 0; } }
@keyframes fx-vt-fade-in { from { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  html[data-ui="v2"]::view-transition-group(*),
  html[data-ui="v2"]::view-transition-old(*),
  html[data-ui="v2"]::view-transition-new(*) { animation: none; }
}