/* Page transitions only; control feedback and loading indicators are independent. */
:root { --page-in-x: 0px; --page-out-x: 0px; --page-motion-time: 180ms; }
:root[data-page-motion="forward"] { --page-in-x: 28px; --page-out-x: -10px; --page-motion-time: 260ms; }
:root[data-page-motion="back"] { --page-in-x: -28px; --page-out-x: 10px; --page-motion-time: 260ms; }
.app-header { view-transition-name: app-header; }
::view-transition-group(*) { animation-duration: var(--page-motion-time); animation-timing-function: cubic-bezier(.22,1,.36,1); }
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
::view-transition-old(page-content) { animation: page-leave 140ms ease-out both; mix-blend-mode: normal; }
::view-transition-new(page-content) { animation: page-enter var(--page-motion-time) cubic-bezier(.22,1,.36,1) both; mix-blend-mode: normal; }
::view-transition-group(app-header) { animation: none; }
::view-transition-old(app-header) { animation: screen-fade-out 100ms ease-out both; }
::view-transition-new(app-header) { animation: screen-fade-in 160ms ease-out both; }
::view-transition-group(app-navigation), ::view-transition-new(app-navigation) { animation: none; }
::view-transition-old(app-navigation) { display: none; }
@keyframes page-enter { from { opacity: 0; transform: translateX(var(--page-in-x)); } to { opacity: 1; transform: translateX(0); } }
@keyframes page-leave { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(var(--page-out-x)); } }
.motion-list-item { transform: translateY(5px); transition: opacity 180ms ease-out, transform 220ms cubic-bezier(.22,1,.36,1); transition-delay: calc(var(--motion-order, 0) * 12ms); }
.transpose-options:not([hidden]) { transform-origin: top left; animation: panel-enter 140ms cubic-bezier(.22,1,.36,1) both; }
@keyframes panel-enter { from { opacity: 0; transform: translateY(-4px) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } }
@media (prefers-reduced-motion: reduce) {
    @view-transition { navigation: none; }
    ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
    .motion-list-item { opacity: 1; transform: none; transition: none; }
    .transpose-options:not([hidden]) { animation: none; }
}