/* Shared by the mobile app and server-rendered pages, including quotation tools. */
@view-transition {
  navigation: auto;
}
html { background-color: #fbfbf8; }
::view-transition-group(root) {
  animation-duration: 180ms;
  animation-timing-function: cubic-bezier(.2, .75, .25, 1);
}
/* Keep the old image fully opaque underneath the incoming page. Fading both
   images exposes the canvas and makes a light flash halfway through a switch. */
::view-transition-old(root) {
  animation: none;
  opacity: 1;
}
::view-transition-new(root) {
  animation: page-reveal 180ms cubic-bezier(.2, .75, .25, 1) both;
  mix-blend-mode: normal;
}
/* The new snapshot is live. Keep it covered by the old page until the app's
   first route and data are ready, then animate the complete incoming view. */
html[data-page-booting]::view-transition-new(root) {
  animation-play-state: paused;
}
@keyframes page-reveal {
  from { opacity: 0; }
  to { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(root),
  ::view-transition-old(root),
  ::view-transition-new(root) { animation: none !important; }
}