/* EDUZO · TANG CHUYEN DONG (14/10/2026)
   Mau chuyen dong khai thac tu Lucian UX/UI Prompt (MIT (c) 2026 Seokwoooo,
   https://lucianlabs.dev/uxui-prompt/), viet lai tren token `--ez-*`. Ban do 200
   phan tu -> tinh huong EDUZO: `Design System/lucian/BAN-DO.md`.

   Nguon so: `noi-dung/eduzo-tokens.json` khoi `chuyen-dong` (thoi gian `--ez-td-*`,
   duong cong `--ez-dc-*`, he so vai `--ez-dong-muc`). Tep nay KHONG go so thoi
   gian, KHONG go mau. Do manh moi mau nhan voi `--ez-dong-muc`: vo con 1, bo me
   0,7, thay co 0,5, quan tri 0,4; giam chuyen dong thi 0 (moi mau thanh mo dan).

   Dung `scale` / `translate` / `rotate` RIENG (khong `transform`) de cong don
   voi `transform` san co cua `.ez-nut:active` thay vi de len no.
   Hanh vi (gan lop, sinh hat, am thanh, rung) o `app/chung/dong.js`. */

/* ── BAM (Lucian 001 · 013): lun ngay khi cham, nha ra nay ve ────────────── */
.ez-dong-nhan {
  scale: calc(1 - 0.05 * var(--ez-dong-muc));
  transition: scale var(--ez-td-nhanh) var(--ez-dc-chuan);
}
.ez-dong-nha {
  transition: scale var(--ez-td-cham) var(--ez-dc-lo-xo);
}

/* ── GON (Lucian 006): vong lan tu diem cham, xen theo hinh cua nut ──────── */
.ez-dong-tuong-doi { position: relative; }
.ez-dong-gon-khung {
  position: absolute; inset: 0; border-radius: inherit; overflow: hidden;
  pointer-events: none; z-index: 0;
}
.ez-dong-gon {
  position: absolute; border-radius: 50%; pointer-events: none;
  width: var(--co); height: var(--co); left: var(--x); top: var(--y);
  translate: -50% -50%; scale: 0;
  background: currentColor; opacity: calc(0.22 * var(--ez-dong-muc));
  animation: ezDongGon var(--ez-td-khoanh-khac) var(--ez-dc-ra) forwards;
}
@keyframes ezDongGon { to { scale: 1; opacity: 0; } }

/* ── LOP PHU chung cho hat, phao giay, hinh bay ──────────────────────────── */
.ez-dong-lop {
  position: fixed; inset: 0; pointer-events: none; z-index: 9000; overflow: hidden;
}
.ez-dong-lop--chan { pointer-events: auto; }   /* phao giay: cham man la bo qua */

/* ── NO HAT (Lucian 012 · 022) ───────────────────────────────────────────── */
.ez-dong-hat {
  position: absolute; left: var(--x); top: var(--y);
  width: var(--co); height: var(--co); border-radius: var(--bo, 50%);
  background: var(--mau); translate: -50% -50%;
  animation: ezDongHat var(--ez-td-khoanh-khac) var(--ez-dc-ra) forwards;
  animation-delay: var(--tre, 0ms);
}
@keyframes ezDongHat {
  0%   { translate: -50% -50%; scale: 0.4; opacity: 1; rotate: 0deg; }
  25%  { scale: 1.1; }
  70%  { opacity: 1; }
  100% { translate: calc(-50% + var(--dx)) calc(-50% + var(--dy)); scale: 0.6; opacity: 0; rotate: var(--xoay); }
}

/* ── PHAO GIAY (Lucian 059 · 093): roi tu dinh man, toi da 1,2 giay ───────── */
.ez-dong-giay {
  position: absolute; top: -24px; left: var(--x);
  width: var(--rong); height: var(--cao); border-radius: 2px;
  background: var(--mau);
  animation: ezDongGiay var(--thoi) var(--ez-dc-vao) forwards;
  animation-delay: var(--tre, 0ms);
}
@keyframes ezDongGiay {
  0%   { translate: 0 0; rotate: 0deg; opacity: 1; }
  80%  { opacity: 1; }
  100% { translate: var(--troi) 105vh; rotate: var(--xoay); opacity: 0; }
}

/* ── HINH BAY VE DICH (Lucian 051): vi tri do JS dat bang Web Animations ── */
.ez-dong-bay {
  position: absolute; left: 0; top: 0; width: 28px; height: 28px;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--ez-thuong-xp-nen); color: var(--ez-thuong-xp-chu);
  box-shadow: var(--ez-bong-nut);
}
.ez-dong-bay svg { width: 18px; height: 18px; }
.ez-dong-nhan-qua { animation: ezDongNhanQua var(--ez-td-cham) var(--ez-dc-dan-hoi); }
@keyframes ezDongNhanQua {
  0% { scale: 1; }
  40% { scale: calc(1 + 0.22 * var(--ez-dong-muc)); }
  100% { scale: 1; }
}

/* ── DUNG (mau `dung`): nay len 1,05 ─────────────────────────────────────── */
.ez-dong-dung { animation: ezDongDung var(--ez-td-cham) var(--ez-dc-lo-xo); }
@keyframes ezDongDung {
  0% { scale: 1; }
  45% { scale: calc(1 + 0.06 * var(--ez-dong-muc)); }
  100% { scale: 1; }
}

/* ── SAI (mau `sai`): lac ngang 6px hai nhip, khong nhay do ────────────── */
.ez-dong-sai { animation: ezDongSai var(--ez-td-cham) var(--ez-dc-chuan); }
@keyframes ezDongSai {
  0%, 100% { translate: 0; }
  20% { translate: calc(-6px * var(--ez-dong-muc)); }
  40% { translate: calc(6px * var(--ez-dong-muc)); }
  60% { translate: calc(-4px * var(--ez-dong-muc)); }
  80% { translate: calc(3px * var(--ez-dong-muc)); }
}

/* ── DAU KIEM (Lucian 008 · 081): vong phong ra, net ve dan ───────────────── */
.ez-dong-kiem {
  display: inline-grid; place-items: center; width: 1.6em; height: 1.6em; border-radius: 50%;
  background: var(--ez-hoc-dung-dam); color: var(--ez-muc-tren-dam);
  animation: ezDongKiemVong var(--ez-td-cham) var(--ez-dc-lo-xo) both;
}
.ez-dong-kiem svg { width: 62%; height: 62%; overflow: visible; }
.ez-dong-kiem path {
  fill: none; stroke: currentColor; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 30; stroke-dashoffset: 30;
  animation: ezDongKiemNet var(--ez-td-cham) var(--ez-dc-chuan) forwards;
  animation-delay: var(--ez-td-nhanh);
}
@keyframes ezDongKiemVong { from { scale: 0.4; opacity: 0; } to { scale: 1; opacity: 1; } }
@keyframes ezDongKiemNet { to { stroke-dashoffset: 0; } }

/* ── LAN SO (Lucian 018 · 056 · 098): chi chu so doi moi lan ──────────────── */
.ez-dong-so { display: inline-flex; font-variant-numeric: tabular-nums; }
.ez-dong-so__o {
  display: inline-block; height: 1.2em; line-height: 1.2em; overflow: hidden; vertical-align: bottom;
}
.ez-dong-so__cot {
  display: flex; flex-direction: column;
  translate: 0 calc(var(--so, 0) * -1.2em);
  transition: translate var(--ez-td-khoanh-khac) var(--ez-dc-lo-xo);
  transition-delay: var(--tre, 0ms);
}
.ez-dong-so__cot > span { height: 1.2em; }

/* ── CHUOI TANG (mau `chuoi-tang`): ngon lua phong mot lan ───────────────── */
.ez-dong-phong { animation: ezDongPhong var(--ez-td-khoanh-khac) var(--ez-dc-dan-hoi); }
@keyframes ezDongPhong {
  0% { scale: 1; }
  35% { scale: calc(1 + 0.3 * var(--ez-dong-muc)); rotate: calc(-6deg * var(--ez-dong-muc)); }
  65% { scale: calc(1 - 0.06 * var(--ez-dong-muc)); rotate: calc(4deg * var(--ez-dong-muc)); }
  100% { scale: 1; rotate: 0deg; }
}

/* ── MO KHOA (Lucian 067): o khoa lac, roi mo di ─────────────────────────── */
.ez-dong-mo-khoa { animation: ezDongMoKhoa var(--ez-td-khoanh-khac) var(--ez-dc-chuan) forwards; }
@keyframes ezDongMoKhoa {
  0% { rotate: 0deg; scale: 1; opacity: 1; }
  20% { rotate: -12deg; }
  40% { rotate: 10deg; }
  60% { rotate: 0deg; scale: calc(1 + 0.15 * var(--ez-dong-muc)); opacity: 1; }
  100% { scale: 0.4; opacity: 0; }
}

/* ── LEN CAP (Lucian 052 · 081): huy hieu phong tu 0,6, anh sang quet qua ── */
.ez-dong-len-cap {
  position: relative; overflow: hidden;
  animation: ezDongLenCap var(--ez-td-khoanh-khac) var(--ez-dc-dan-hoi) both;
}
.ez-dong-len-cap::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: linear-gradient(105deg, transparent 35%, var(--ez-nen-phu-sang-92) 50%, transparent 65%);
  translate: -120% 0; opacity: var(--ez-dong-muc);
  animation: ezDongQuet 900ms var(--ez-dc-chuan) var(--ez-td-cham) forwards;
}
@keyframes ezDongLenCap { from { scale: 0.6; opacity: 0; } to { scale: 1; opacity: 1; } }
@keyframes ezDongQuet { to { translate: 120% 0; } }

/* ── CHO NOI DUNG (Lucian 079): tho khi cho, no ra tung the ──────────────── */
.ez-dong-cho {
  background: var(--ez-nen-chim); border-radius: var(--ez-bo-the, 16px);
  animation: ezDongTho 1400ms ease-in-out infinite;
}
@keyframes ezDongTho { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }
.ez-dong-no {
  animation: ezDongNo var(--ez-td-cham) var(--ez-dc-vao) both;
  animation-delay: calc(var(--i, 0) * 40ms);
}
@keyframes ezDongNo {
  from { opacity: 0; scale: calc(1 - 0.04 * var(--ez-dong-muc)); translate: 0 calc(8px * var(--ez-dong-muc)); }
  to { opacity: 1; scale: 1; translate: 0 0; }
}

/* ── THONG BAO (Lucian 070): truot len tu day, xep chong ─────────────────── */
.ez-dong-tb-vao { animation: ezDongTbVao var(--ez-td-vua) var(--ez-dc-lo-xo) both; }
.ez-dong-tb-ra { animation: ezDongTbRa var(--ez-td-vua) var(--ez-dc-ra) forwards; }
@keyframes ezDongTbVao { from { translate: 0 calc(24px * var(--ez-dong-muc) + 4px); opacity: 0; } to { translate: 0 0; opacity: 1; } }
@keyframes ezDongTbRa { to { translate: 0 12px; opacity: 0; } }

/* ── TAB DAY CO RANH (Lucian 041 · MIT): vien chi bao truot, bieu tuong nay ──
   Vien la `::before` cua o bieu tuong dang chon (cung mau `--ez-hanh-dong-nhat`
   ma DS da khai cho o ay), nen khong co JS thi tab day y nhu cu. `dong.ranh`
   dat `--ranh-x` = khoang cach toi o cu roi tha ve 0. */
.ez-dong-ranh { position: relative; isolation: isolate; }
.ez-tab-day__muc[aria-current="page"] .ez-dong-ranh { background: transparent; }
.ez-dong-ranh::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  border-radius: inherit; background: var(--ez-hanh-dong-nhat);
  translate: var(--ranh-x, 0px) 0;
  transition: translate var(--ez-td-khoanh-khac) var(--ez-dc-lo-xo);
}
.ez-dong-ranh--dung::before { transition: none; }
.ez-dong-nay { animation: ezDongNay var(--ez-td-cham) var(--ez-dc-dan-hoi); }
@keyframes ezDongNay {
  0% { translate: 0 0; scale: 1; }
  40% { translate: 0 calc(-4px * var(--ez-dong-muc)); scale: calc(1 + 0.12 * var(--ez-dong-muc)); }
  100% { translate: 0 0; scale: 1; }
}

/* ── TOI CHANG (Lucian 087 · 107): the phan moi truot tu cho phan vua qua xuong ── */
.ez-dong-toi { animation: ezDongToi var(--ez-td-khoanh-khac) var(--ez-dc-lo-xo) both; }
@keyframes ezDongToi {
  from { translate: 0 calc(-32px * var(--ez-dong-muc)); scale: calc(1 - 0.06 * var(--ez-dong-muc)); opacity: 0; }
  to { translate: 0 0; scale: 1; opacity: 1; }
}

/* ── CHUYEN MAY (Lucian 196): ten be vua choi ra, ten be ke tiep vao ─────── */
.ez-dong-chuyen {
  display: grid; place-items: center; padding: var(--ez-khe-16);
  background: color-mix(in srgb, var(--ez-nen-trang) 86%, transparent);
  animation: ezDongMo var(--ez-td-nhanh) linear both;
}
.ez-dong-chuyen__the {
  display: flex; flex-direction: column; align-items: center; gap: var(--ez-khe-8);
  min-width: min(280px, 100%); text-align: center;
  animation: ezDongTbVao var(--ez-td-vua) var(--ez-dc-lo-xo) both;
}
.ez-dong-chuyen__san { display: grid; overflow: hidden; }
.ez-dong-chuyen__ten {
  grid-area: 1 / 1; padding: var(--ez-khe-4) var(--ez-khe-16);
  font-family: var(--ez-phong-tieu-de); font-weight: 800;
  font-size: var(--ez-chu-tieu-de-2-co); line-height: var(--ez-chu-tieu-de-2-cao); color: var(--ez-hanh-dong-chu);
}
.ez-dong-chuyen__ten--di { animation: ezDongChuyenDi var(--ez-td-khoanh-khac) var(--ez-dc-chuan) 300ms both; }
.ez-dong-chuyen__ten--toi { animation: ezDongChuyenToi var(--ez-td-khoanh-khac) var(--ez-dc-lo-xo) 300ms both; }
@keyframes ezDongChuyenDi { from { translate: 0 0; opacity: 1; } to { translate: calc(-80% * var(--ez-dong-muc)) 0; rotate: -8deg; opacity: 0; } }
@keyframes ezDongChuyenToi { from { translate: calc(80% * var(--ez-dong-muc)) 0; rotate: 8deg; opacity: 0; } to { translate: 0 0; rotate: 0deg; opacity: 1; } }

/* ── GUI DI (Lucian 005): may bay giay tren nut Gui bay cheo len roi tat ── */
.ez-dong-gui-di { animation: ezDongGuiDi 450ms var(--ez-dc-vao) forwards; }
@keyframes ezDongGuiDi {
  0% { translate: 0 0; rotate: 0deg; opacity: 1; }
  30% { translate: -3px 2px; rotate: -8deg; }
  100% { translate: calc(40px * var(--ez-dong-muc)) calc(-28px * var(--ez-dong-muc)); rotate: 12deg; opacity: 0; }
}

/* ── KEO HIT (Lucian 125 · MIT): the keo theo ngon tay, o dich gan thi sang ──
   `dong.keoHit` dat `--keo-x/y`. Khi keo: khong chuyen canh (bam sat tay), the
   noi len tren cac the khac. Tha: lo xo ve cho; tha trung o dich: bay vao tam
   (`ez-dong-hut`) roi lo xo ve. O dich dung mau "o dich gan" DS da khai san. */
.ez-dong-keo-duoc {
  touch-action: none;
  translate: var(--keo-x, 0px) var(--keo-y, 0px);
  /* Giu chuyen canh `scale` cua cu lun (.ez-dong-nhan) - khai `transition` la de mat no. */
  transition: translate var(--ez-td-khoanh-khac) var(--ez-dc-lo-xo), scale var(--ez-td-nhanh) var(--ez-dc-chuan);
}
.ez-dong-keo {
  z-index: 3; cursor: grabbing; transition: scale var(--ez-td-nhanh) var(--ez-dc-lo-xo);
  scale: calc(1 + 0.04 * var(--ez-dong-muc)); box-shadow: var(--ez-bong-nut);
}
.ez-dong-keo--tren { scale: calc(1 - 0.12 * var(--ez-dong-muc)); }
.ez-dong-hut { z-index: 3; transition: translate var(--ez-td-nhanh) var(--ez-dc-vao); }
.ez-dong-hit {
  border-style: solid; border-color: var(--ez-bai-o-dich-vien-gan); background: var(--ez-bai-o-dich-nen);
  scale: calc(1 + 0.03 * var(--ez-dong-muc));
  transition: scale var(--ez-td-nhanh) var(--ez-dc-lo-xo);
}

/* ── THUOC DO (Lucian 117 · MIT): vat truot vao dat dung vach 0; cham xong thi
   vach cuoi sang len, ke tu dau vat xuong thuoc, roi so do hien ra. Truoc khi
   cham `gc-do` an hoan toan: no la dap an. */
.gc-thuoc__vat { animation: ezDongDatThuoc var(--ez-td-khoanh-khac) var(--ez-dc-lo-xo) var(--ez-td-nhanh) both; }
@keyframes ezDongDatThuoc { from { translate: calc(-40px * var(--ez-dong-muc)) 0; opacity: 0; } to { translate: 0 0; opacity: 1; } }
.gc-do { opacity: 0; }
.gc-do__vach { stroke: var(--ez-hoc-dung-dam); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.gc-do__so { fill: var(--ez-hoc-dung-dam); }
.man:has(.ez-phan-hoi) .gc-do { opacity: 1; }
.man:has(.ez-phan-hoi) .gc-do__vach { animation: ezDongKeVach var(--ez-td-khoanh-khac) var(--ez-dc-ra) both; }
.man:has(.ez-phan-hoi) .gc-do__so { animation: ezDongMo var(--ez-td-vua) linear var(--ez-td-vua) both; }
@keyframes ezDongKeVach { to { stroke-dashoffset: 0; } }

/* ── GIAM CHUYEN DONG: moi mau thanh mo dan 200ms, khong dich, khong nay ── */
/* ── CHU CHAY (Lucian 086): loi giai thich hien dan tung chu ───────────────
   Chu co san trong trang (may doc man hinh doc tron cau); moi chu mo dan va noi
   len mot chut theo thu tu `--i`. Nhip mot chu = 0,35 `--ez-td-nhanh`; lop 1-3
   gap doi de nhip chu gan nhip doc cua be. Khong nhan `--ez-dong-muc` vi day la
   nhip DOC, khong phai do manh hieu ung. */
.ez-dong-chu-chay > span {
  display: inline-block;
  animation: ezDongTuLen var(--ez-td-vua) var(--ez-dc-ra) both;
  animation-delay: calc(var(--i, 0) * var(--ez-td-nhanh) * var(--he-chu, 0.35));
}
.ez-dong-chu-chay:is([data-lop="1"], [data-lop="2"], [data-lop="3"]) { --he-chu: 0.7; }
@keyframes ezDongTuLen { from { opacity: 0; translate: 0 0.25em; } to { opacity: 1; translate: 0 0; } }

@media (prefers-reduced-motion: reduce) {
  .ez-dong-nhan, .ez-dong-nha { transition: none; scale: none; }
  .ez-dong-gon, .ez-dong-hat, .ez-dong-giay, .ez-dong-bay { display: none; }
  .ez-dong-dung, .ez-dong-sai, .ez-dong-phong, .ez-dong-nhan-qua, .ez-dong-len-cap,
  .ez-dong-no, .ez-dong-tb-vao, .ez-dong-kiem, .ez-dong-toi {
    animation: ezDongMo 200ms linear both;
  }
  .ez-dong-mo-khoa, .ez-dong-tb-ra { animation: ezDongMoRa 200ms linear forwards; }
  .ez-dong-len-cap::after { display: none; }
  .ez-dong-kiem path { animation: none; stroke-dashoffset: 0; }
  .ez-dong-so__cot { transition: none; }
  .ez-dong-cho { animation: none; }
  .ez-dong-chu-chay > span { animation: none; }
  .ez-dong-ranh::before { transition: none; }
  .ez-dong-nay { animation: none; }
  .ez-dong-chuyen__the { animation: none; }
  .ez-dong-gui-di { animation: none; }
  .ez-dong-chuyen__ten--di { animation: none; opacity: 0; }
  .ez-dong-chuyen__ten--toi { animation: ezDongMo 200ms linear both; }
  .ez-dong-keo-duoc, .ez-dong-hut, .ez-dong-hit { transition: none; }
  .ez-dong-keo, .ez-dong-hit { scale: none; }
  .ez-dong-keo--tren { scale: 0.88; }
  .gc-thuoc__vat { animation: ezDongMo 200ms linear both; }
  .man:has(.ez-phan-hoi) .gc-do__vach { animation: none; stroke-dashoffset: 0; }
  .man:has(.ez-phan-hoi) .gc-do__so { animation: ezDongMo 200ms linear both; }
}
@keyframes ezDongMo { from { opacity: 0; } to { opacity: 1; } }
@keyframes ezDongMoRa { to { opacity: 0; } }