/* Chuyen dong chung toan site (moi trang, ca landing). Docs: docs/redesign/MOTION.md
   - Token: --cm-ease (ra nhanh, dung mem), --cm-dur-1/2/3
   - Mac dinh mem cho moi phan tu bam duoc (:where = do uu tien 0, rule rieng cua trang van thang)
   - Dropdown Bootstrap / modal: hien ra mem; chuyen trang: cross-fade (View Transitions, Chrome/Edge/Safari 18+)
   - "Glide": o nen truot theo muc dang re chuot trong menu (public/js/cm-motion.js)
   Tat het khi nguoi dung chon giam chuyen dong (prefers-reduced-motion). */
:root {
    --cm-ease: cubic-bezier(.2, .8, .2, 1);
    --cm-ease-io: cubic-bezier(.65, 0, .35, 1);
    --cm-dur-1: 120ms;
    --cm-dur-2: 200ms;
    --cm-dur-3: 320ms;
}

@media (prefers-reduced-motion: no-preference) {
    /* Doi mau / nen / vien / bong mem cho moi thu bam duoc (khong dong vao transform: JS keo tha, slider tu dat) */
    :where(a, button, summary, label, [role="button"], [role="tab"], [role="menuitem"], [role="option"], .btn, .dropdown-item, .nav-link, .page-link,
        input, textarea, select, .form-control, .form-select, .form-check-input, .badge, .cm-chip, .cm-tag) {
        transition-property: color, background-color, border-color, outline-color, box-shadow, opacity, text-decoration-color, fill, stroke;
        transition-duration: var(--cm-dur-2);
        transition-timing-function: var(--cm-ease);
    }

    /* Dropdown Bootstrap: hien ra tu tren xuong (translate/scale rieng, Popper van dat transform vi tri) */
    .dropdown-menu.show { animation: cmMenuIn var(--cm-dur-2) var(--cm-ease) both; }
    .dropdown-menu.show[data-popper-placement^="top"] { --cm-menu-from: 4px; }
    @keyframes cmMenuIn { from { opacity: 0; translate: 0 var(--cm-menu-from, -4px); scale: .98; } }

    /* Modal: noi len nhe thay vi truot 50px */
    .modal.fade .modal-dialog { transform: translateY(14px) scale(.985); transition: transform var(--cm-dur-3) var(--cm-ease); }
    .modal.show .modal-dialog { transform: none; }
    .modal-backdrop.fade { transition: opacity var(--cm-dur-3) var(--cm-ease); }

    /* Tooltip / popover / collapse */
    .tooltip.fade, .popover.fade { transition: opacity var(--cm-dur-1) var(--cm-ease); }
    .collapsing { transition-duration: var(--cm-dur-3); transition-timing-function: var(--cm-ease); }

    /* Chuyen trang: cross-fade nhanh, thanh dieu huong dung yen */
    @view-transition { navigation: auto; }
    ::view-transition-old(root) { animation: cmVtOut 160ms var(--cm-ease) both; }
    ::view-transition-new(root) { animation: cmVtIn 240ms var(--cm-ease) both; }
    @keyframes cmVtOut { to { opacity: 0; } }
    @keyframes cmVtIn { from { opacity: 0; translate: 0 6px; } }
    #cmh { view-transition-name: cmh; }
    ::view-transition-group(cmh) { animation-duration: 0s; }

    /* Glide: o nen dung chung cho menu (JS dat vi tri). Nam duoi chu (z-index -1 trong khung isolate) */
    .cm-glide-host { isolation: isolate; }
    .cm-glide {
        position: absolute; left: 0; top: 0; z-index: -1; pointer-events: none;
        background: var(--cm-glide-bg, var(--cmh-soft, var(--cm-surface-2)));
        opacity: 0; border-radius: 8px;
        transition: transform 180ms var(--cm-ease), width 180ms var(--cm-ease), height 180ms var(--cm-ease), opacity 140ms ease;
    }
    .cm-glide.is-on { opacity: 1; }
    .cm-glide.is-jump { transition: opacity 140ms ease; }
    /* Muc trong khung co glide: nen hover do glide ve (giu doi mau chu) */
    .cm-glide-host [data-glide-item]:hover, .cm-glide-host [data-glide-item]:focus-visible { background-color: transparent !important; }
}

/* Doi sang/toi (cm-motion.js): chi cross-fade, khong truot */
html.cm-theme-vt::view-transition-old(root), html.cm-theme-vt::view-transition-new(root) { animation-duration: 260ms; animation-timing-function: var(--cm-ease); translate: none; }
html.cm-theme-vt::view-transition-new(root) { animation-name: cmVtFade; }
html.cm-theme-vt::view-transition-group(cmh) { animation-duration: 260ms; }
@keyframes cmVtFade { from { opacity: 0; } }