@view-transition {
  navigation: auto;
}

::view-transition-old(root) { animation: app-page-out 120ms ease both; }
::view-transition-new(root) { animation: app-page-in 220ms cubic-bezier(.2,.75,.25,1) both; }

.app-navigation-progress {
  position: fixed;
  z-index: 10050;
  inset: 0 0 auto;
  height: 3px;
  pointer-events: none;
  opacity: 0;
  overflow: hidden;
  transform: translateY(-100%);
  transition: opacity 120ms ease, transform 120ms ease;
}

.app-navigation-progress span {
  display: block;
  width: 18%;
  height: 100%;
  background: linear-gradient(90deg, #b58a36, #f1d488, #b58a36);
  box-shadow: 0 1px 8px rgba(201, 169, 97, .45);
  transform: translateX(-120%);
}

.app-is-navigating .app-navigation-progress { opacity: 1; transform: translateY(0); }
.app-is-navigating .app-navigation-progress span { animation: app-progress-run 1.15s cubic-bezier(.2,.65,.35,1) infinite; }

@media (max-width: 768px) {
  .app-navigation-ready body { animation: app-content-ready 180ms ease-out both; }
  .app-is-navigating body > *:not(.app-navigation-progress):not(.bottom-sheet):not(.sheet-backdrop) {
    opacity: .985;
    transform: translateY(1px);
    transition: opacity 110ms ease, transform 110ms ease;
  }
  .mob-nav-item, .header-icon-btn, .btn, button { -webkit-tap-highlight-color: transparent; }
  .mob-nav-item:active, .header-icon-btn:active { transform: scale(.94); }
}

@keyframes app-progress-run {
  0% { transform: translateX(-120%); width: 18%; }
  55% { width: 46%; }
  100% { transform: translateX(650%); width: 18%; }
}
@keyframes app-page-out { to { opacity: .9; transform: scale(.996); } }
@keyframes app-page-in { from { opacity: 0; transform: translateY(5px); } }
@keyframes app-content-ready { from { opacity: .94; } }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root), .app-navigation-ready body, .app-navigation-progress span {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
  }
}