/* Original Olodesk motion system, informed by public Luma interactions. */
:root {
  --motion-quick: 140ms;
  --motion-standard: 220ms;
  --motion-enter: 420ms;
  --ease-out: cubic-bezier(.22, 1, .36, 1);
}
/* Cross-document fade between sign-in and the dashboard. */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: 140ms ease-out both olodesk-exit; }
::view-transition-new(root) { animation: 260ms var(--ease-out) both olodesk-enter; }
@keyframes olodesk-exit { to { opacity: 0; } }
@keyframes olodesk-enter { from { opacity: 0; transform: translateY(5px); } }
/* Thin top progress bar while a real request (navigation, sign-in, sign-out) is in flight. */
html[data-navigating] { cursor: progress; }
html[data-navigating]::before {
  content: ""; position: fixed; top: 0; left: 0; height: 2px; width: 36%; z-index: 200;
  background: var(--brand-orange); animation: olodesk-progress 900ms ease-in-out infinite;
}
@keyframes olodesk-progress { from { transform: translateX(-100%); } to { transform: translateX(380%); } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
  html[data-navigating]::before { width: 100%; }
}