/* * He motion dung chung cho toan site. * * Token khai bao o base.css. Hop dong day du: * docs/specs/2026-08-21-site-motion-design.md * * Moi rule an nam duoi html.js-motion. Class do mot doan script noi tuyen o * gan vao. JS chet -> khong co class -> khong an gi ca. */ html.js-motion [data-reveal], html.js-motion [data-reveal-stagger] > * { opacity: 0; transform: translateY(var(--motion-shift)); transition: opacity var(--motion-reveal) var(--motion-ease), transform var(--motion-reveal) var(--motion-ease); transition-delay: calc(var(--reveal-index, 0) * var(--motion-stagger)); } html.js-motion [data-reveal="fade"] { transform: none; } html.js-motion [data-reveal="left"] { transform: translateX(calc(var(--motion-shift) * -1)); } html.js-motion [data-reveal="right"] { transform: translateX(var(--motion-shift)); } html.js-motion [data-reveal].is-revealed, html.js-motion [data-reveal-stagger].is-revealed > * { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { /* * Khoi * ben duoi chi rut ngan thoi luong, KHONG khoi phuc opacity. * Thieu rule nay, nguoi bat giam chuyen dong se thay trang trang. */ html.js-motion [data-reveal], html.js-motion [data-reveal-stagger] > * { opacity: 1; transform: none; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }