/* Generated from tokens/tokens.json and src/ by scripts/build.mjs. Do not edit. */
/* ---- Page transitions (opt-in) ----------------------------------------------
   Shipped as dg_design/view-transitions.css, outside dg_design.css and
   components.css, because it changes how every page in the app navigates.
   dg_head_tags links it; elsewhere link it after dg_design.css (or after
   tokens.css and components.css, which define dg-fade-in and the tab ink).

   Page loads crossfade: the old page fades out quickly, the new one fades in. The
   current tab's underline (.dg-tabs__ink, rendered by dg_tabs) slides to the new tab.
   Needs View Transitions (Chrome/Edge 126+, Safari 18.2+); other browsers just
   switch pages. */

@view-transition { navigation: auto; }
::view-transition-old(root) { animation: dg-fade-out var(--dg-motion-fast) var(--dg-motion-ease-in) both; }
::view-transition-new(root) { animation: dg-fade-in var(--dg-motion-base) var(--dg-motion-ease) both; }
@keyframes dg-fade-out { to { opacity: 0; } }
::view-transition-group(dg-tabs-ink) { animation-duration: var(--dg-motion-slow); animation-timing-function: var(--dg-motion-ease); }

/* Reduced motion: pages switch without a crossfade and the ink doesn't slide. */
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}