/* Page-to-page smoothness, shared by every page (main site, quotation, admin).

   - Moving between pages: the browser cross-fades the old page into the new
     one (cross-document View Transitions; Chrome, Edge, Safari 18.2+). The
     menu bar is its own layer, so it stays put while the content fades.
   - A refresh (or a browser without View Transitions): the page fades in
     softly instead of appearing in one hard cut. /fx/page.js decides which.
   - Nothing moves for visitors who ask for reduced motion. */
@view-transition { navigation: auto; }

html { background-color: #0A0E16; }

/* the menu bar keeps its place between pages */
.vt-nav { view-transition-name: dppl-nav; }

::view-transition-old(root) { animation: 200ms cubic-bezier(0.4, 0, 1, 1) both dppl-vt-out; }
::view-transition-new(root) { animation: 340ms cubic-bezier(0, 0, 0.2, 1) 40ms both dppl-vt-in; }
::view-transition-group(dppl-nav) { animation-duration: 300ms; animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes dppl-vt-out { to { opacity: 0; } }
@keyframes dppl-vt-in { from { opacity: 0; transform: translateY(8px); } }

html.page-fade body { animation: dppl-page-in 420ms cubic-bezier(0.22, 1, 0.36, 1) both; }
@keyframes dppl-page-in { from { opacity: 0; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  html.page-fade body { animation: none; }
}