/* A single motion rhythm for full document navigation and newly revealed content.
   The browser owns navigation, history and scroll restoration. */
html:has(body#bahasa-premium) {
  --page-ease: cubic-bezier(.22,.75,.24,1);
  --page-duration: 320ms;
}
@view-transition { navigation: auto; }
body#bahasa-premium > .site-header { view-transition-name: bahasa-header; }
body#bahasa-premium > #page-content { view-transition-name: bahasa-content; }

::view-transition-group(root),
::view-transition-group(bahasa-content),
::view-transition-group(bahasa-header) { animation: none; }
::view-transition-old(root) { animation: page-fade-out 180ms ease-out both; }
::view-transition-new(root) { animation: page-fade-in 240ms ease-out both; }
::view-transition-old(bahasa-header),
::view-transition-new(bahasa-header) { animation: none; mix-blend-mode: normal; }
::view-transition-old(bahasa-content) {
  animation: page-content-out 160ms ease-out both;
  mix-blend-mode: normal;
}
::view-transition-new(bahasa-content) {
  animation: page-content-in var(--page-duration) var(--page-ease) both;
  mix-blend-mode: normal;
}
@keyframes page-fade-out { to { opacity: 0; } }
@keyframes page-fade-in { from { opacity: 0; } }
@keyframes page-content-out { to { opacity: 0; transform: translateY(-4px); } }
@keyframes page-content-in { from { opacity: 0; transform: translateY(10px); } }
@keyframes page-feedback-in { from { opacity: 0; transform: translateY(6px); } }

/* These panels are inserted only after an explicit interaction. Content is never
   hidden in anticipation of scrolling, and no animation changes layout. */
body#bahasa-premium :is(.quiz-feedback,.quiz-result,.voc-empty) {
  animation: page-feedback-in 240ms var(--page-ease) both;
}
body#bahasa-premium .study-progress > span {
  transition: width var(--page-duration) var(--page-ease);
}

@media (max-width: 600px) {
  html:has(body#bahasa-premium) { --page-duration: 260ms; }
  ::view-transition-new(bahasa-content) { animation-name: page-fade-in; }
  ::view-transition-old(bahasa-content) { animation-name: page-fade-out; }
}
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
  body#bahasa-premium :is(.quiz-feedback,.quiz-result,.voc-empty) { animation: none !important; }
  body#bahasa-premium .study-progress > span { transition: none; }
}