/* Ann Academy — chuyển động. Nạp sau bundle.css và trang.css, ở cả trang công khai lẫn khu làm việc.
   Nguyên tắc (chốt 14/10/2026 sau phản biện Opus + GPT):
   - Trang công khai (html.cong-khai): màn mở đầu ngắn, khối hiện nhẹ khi cuộn tới, thẻ và nút nổi khi rê chuột.
   - Trang học, hồ sơ, khu giáo viên: chỉ đổi màu và phản hồi khi bấm, không nổi.
   - Hiệu ứng rê chuột chỉ chạy trên máy có chuột; máy bật giảm chuyển động thì không dịch chuyển. */

/* Biến thời lượng và đường cong (--cd-*) nằm ở tokens.css */

/* ---------- 1. Màn mở đầu: logo, rồi câu dẫn và nút cùng nhịp, hình theo sau ---------- */
[data-mo]{opacity:0;animation:cd-len var(--cd-cham) var(--cd-em) forwards}
[data-mo="1"]{animation-name:cd-logo;animation-timing-function:var(--cd-nay)}
[data-mo="2"],[data-mo="3"]{animation-delay:.08s}
[data-mo="hinh"]{animation-name:cd-hinh;animation-delay:.16s;animation-duration:.7s}
@keyframes cd-len{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes cd-logo{from{opacity:0;transform:translateY(10px) scale(.96)}to{opacity:1;transform:none}}
@keyframes cd-hinh{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:none}}

/* Hình cả nhà đứng yên trên một vầng sáng ấm */
.mo-dau-hinh-o{position:relative;display:grid;justify-items:center;align-items:end}
.vang-sang{position:absolute;inset:auto 0 0 0;height:78%;margin:0 auto;width:min(420px,90%);border-radius:50% 50% 0 0/100% 100% 0 0;
  background:radial-gradient(ellipse at 50% 100%, rgba(210,130,44,.22), rgba(210,130,44,.08) 45%, transparent 72%)}
.mo-dau-hinh-o .mo-dau-hinh{position:relative}

/* ---------- 2. Cuộn tới đâu hiện tới đó (một lần, không lặp) ----------
   Chỉ ẩn khi <html> có lớp cd-cho: đoạn script trong <head> đặt lớp này và tự gỡ sau 3 giây
   nếu chuyen-dong.js chưa báo sẵn sàng, nên script lỗi cũng không làm mất nội dung. */
.cd-cho [data-hien]{opacity:0;transform:translateY(16px);transition:opacity var(--cd-vua) var(--cd-em),transform var(--cd-vua) var(--cd-em)}
.cd-cho [data-hien].da-hien{opacity:1;transform:none}
.cd-cho [data-hien-tre]{opacity:0;transform:translateY(8px);transition:opacity var(--cd-vua) var(--cd-em),transform var(--cd-vua) var(--cd-em)}
.cd-cho .da-hien [data-hien-tre]{opacity:1;transform:none}
.cd-cho .da-hien [data-hien-tre="1"]{transition-delay:.04s}
.cd-cho .da-hien [data-hien-tre="2"]{transition-delay:.09s}
.cd-cho .da-hien [data-hien-tre="3"]{transition-delay:.14s}
.cd-cho .da-hien [data-hien-tre="4"]{transition-delay:.19s}
.cd-cho .da-hien [data-hien-tre="5"]{transition-delay:.24s}
.cd-cho [data-hien-trai]{transform:translateX(-18px);transition:transform .5s var(--cd-em) .06s}
.cd-cho .da-hien [data-hien-trai]{transform:none}

/* Tiêu đề mục: nét cam kéo ra khi mục hiện (nét vẽ tay ở hoa-tiet.css) */
.muc-tieu-de{position:relative;padding-bottom:10px}
.muc-tieu-de::after{content:"";position:absolute;left:0;bottom:0;height:3px;width:44px;border-radius:var(--bo-tron);background:var(--nhan);transform-origin:left}
.cd-cho .muc-tieu-de::after{transform:scaleX(0);transition:transform .45s var(--cd-em) .1s}
.cd-cho .da-hien .muc-tieu-de::after{transform:scaleX(1)}

/* ---------- 3. Đáp lại thao tác ---------- */
.nut{transition:background-color var(--cd-nhanh),border-color var(--cd-nhanh),color var(--cd-nhanh),transform var(--cd-nhanh) var(--cd-em),box-shadow var(--cd-nhanh)}
.the.co-trang{transition:box-shadow .3s var(--cd-em)}
.the-khoa{transition:border-color var(--cd-nhanh),box-shadow .3s var(--cd-em),transform .3s var(--cd-em)}

/* Bấm: co rất nhẹ ở mọi trang; nút đang tắt thì đứng yên */
@media (prefers-reduced-motion:no-preference){
  .nut:not(:disabled):not([aria-disabled="true"]):active{transform:scale(.985);box-shadow:none;transition-duration:.08s}
}

/* Rê chuột: chỉ máy có chuột */
@media (hover:hover) and (pointer:fine){
  .the.co-trang:hover{box-shadow:var(--bong-noi)}
  .cong-khai .chan a{text-decoration:none;background:linear-gradient(currentColor,currentColor) no-repeat 0 100%/0 1px;transition:background-size .25s var(--cd-em)}
  .cong-khai .chan a:hover{background-size:100% 1px}
}
/* Nổi lên khi rê chuột: chỉ trang công khai, và không khi máy bật giảm chuyển động */
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .cong-khai .nut:not(:disabled):not([aria-disabled="true"]):hover{transform:translateY(-1px)}
  .cong-khai .nut:not(.nhe):not(:disabled):not([aria-disabled="true"]):hover{box-shadow:0 4px 12px rgba(9,63,92,.18)}
  .cong-khai .nut.nut:not(:disabled):not([aria-disabled="true"]):active{transform:scale(.985);box-shadow:none}  /* thắng hai dòng :hover ở trên khi đang bấm */
  .cong-khai .the-khoa:hover{transform:translateY(-3px);box-shadow:0 10px 28px rgba(9,63,92,.14)}
}

/* Thanh đầu trang: đã cuộn thì có bóng mỏng; giữ nguyên chiều cao để nội dung không giật */
.dau{transition:box-shadow .25s var(--cd-em)}
.dau.da-cuon{box-shadow:0 2px 14px rgba(27,42,51,.08)}

/* Cuộn mượt tới neo: chỉ trang công khai */
@media (prefers-reduced-motion:no-preference){html.cong-khai{scroll-behavior:smooth}}

/* ---------- Máy bật giảm chuyển động: hiện ngay, không chờ ---------- */
@media (prefers-reduced-motion:reduce){
  [data-mo],[data-hien],[data-hien-tre],[data-hien-trai]{opacity:1!important;transform:none!important;transition:none!important}
  .muc-tieu-de::after{transform:none!important;transition:none!important}
  /* Phản hồi màu và độ mờ còn lại (bundle.css giữ) không dài quá 150ms */
  .nut,.the-khoa,.the.co-trang,.dau,.ngan-keo,.chan a{transition-duration:.15s!important}
}