/* Page-to-page motion. Chromium (the desktop app, Chrome) animates the
   whole navigation with cross-document view transitions; every browser
   gets the fade-and-rise on the content area, and links fade out before
   leaving so the old page never hard-cuts. Respects reduced motion. */
/* Cross-document view transitions are deliberately NOT used. The desktop
   app runs Electron 31 (Chromium 126), the first build that shipped them,
   and there a navigation started while the previous transition is still
   running can leave the new page painted blank under a stuck transition
   overlay — "I switched sections five or six times and the section was
   gone". The fade-out-then-rise-in below is done in plain CSS + JS and
   behaves the same in every Chromium. */
@keyframes yt-out { to { opacity: 0; } }
@keyframes yt-in { from { opacity: 0; transform: translateY(6px); } }
/* Arriving content rises in. Opacity and transform only: both are
   composited, so the motion stays smooth on the integrated graphics most
   terminals have. The earlier full-page blur() was repainted every frame
   and was itself the stutter people saw on a section switch. */
.dg-main, main { animation: yt-settle .22s cubic-bezier(.2,.8,.2,1) both; will-change: opacity, transform; }
@keyframes yt-settle { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
/* Leaving: a quick fade, so the two halves of the move feel like one gesture. */
html.yt-leaving .dg-main, html.yt-leaving main { animation: yt-fadeout .1s ease both; }
@keyframes yt-fadeout { to { opacity: 0; } }
/* Skeleton shown while the next page's data loads. */
.yt-skeleton { padding: 18px 22px; }
.yt-sk { border-radius: 14px; background: linear-gradient(100deg, var(--dg-panel, rgba(255,255,255,.05)) 30%, rgba(255,255,255,.14) 50%, var(--dg-panel, rgba(255,255,255,.05)) 70%); background-size: 220% 100%; animation: yt-shimmer 1.15s linear infinite; margin-bottom: 12px; }
body.lg-theme .yt-sk { background: linear-gradient(100deg, rgba(17,24,39,.05) 30%, rgba(17,24,39,.11) 50%, rgba(17,24,39,.05) 70%); background-size: 220% 100%; }
@keyframes yt-shimmer { to { background-position: -220% 0; } }
.yt-sk-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; margin-bottom: 12px; }
/* In-page section swaps (inventory, CRM, user management, finance) */
.yt-swap { animation: yt-settle .2s cubic-bezier(.2,.8,.2,1) both; }
.dg-nav-item { transition: background .18s ease, color .18s ease, transform .18s ease; } .dg-nav-item:active { transform: scale(.97); }
@media (prefers-reduced-motion: reduce) { ::view-transition-old(root), ::view-transition-new(root), .dg-main, main, .yt-swap, .yt-sk { animation: none !important; filter: none !important; } }