style(motion): add strict animations and fix layout properties

- Change ReadingProgress and RouteTable to use transform (scaleX/scaleY) instead of width/height
- Convert existing easing functions to 200ms cubic-bezier(.2,0,0,1)
- Document animation purpose with CSS comments
- Add guide panel swap, review desk detail swap, and tally pop animations
- Implement prefers-reduced-motion for all new states
This commit is contained in:
Marcos Paulo
2026-09-05 23:13:59 +00:00
parent 71c74fb7f1
commit 9ca3f48def
10 changed files with 66 additions and 12 deletions
+1 -1
View File
@@ -42,7 +42,7 @@ const { target = '.reading-progress span' } = Astro.props;
function update() {
const height = document.documentElement.scrollHeight - window.innerHeight;
span.style.width = (height > 0 ? (window.scrollY / height) * 100 : 0) + '%';
span.style.transform = `scaleX(${height > 0 ? window.scrollY / height : 0})`;
}
// `{ passive: true }` is non-negotiable. The legacy app.js binds