/* The source opts into ordinary cross-document navigation. Its shell suppresses
   the browser cross-fade; retain that behavior and add a short incoming reveal. */
@view-transition { navigation: auto; }

::view-transition-group(root) {
  animation-duration: var(--ng-shell-motion-panel, 250ms);
  animation-timing-function: var(--ng-shell-ease, cubic-bezier(.2, .8, .2, 1));
}

::view-transition-old(root) {
  animation: none;
  opacity: 0;
}

::view-transition-new(root) {
  animation: ng-navigation-reveal var(--ng-shell-motion-panel, 250ms) var(--ng-shell-ease, cubic-bezier(.2, .8, .2, 1)) both;
  opacity: 1;
  mix-blend-mode: normal;
}

/* The dock remains in place instead of moving with the page snapshot. */
::view-transition-group(ng-persistent-bottom-nav),
::view-transition-new(ng-persistent-bottom-nav) {
  animation: none;
}

::view-transition-old(ng-persistent-bottom-nav) { opacity: 0; }
::view-transition-new(ng-persistent-bottom-nav) { opacity: 1; }

html.ng-navigation-enter :is(body > .page-shell, body > .lottery-shell) {
  animation: ng-navigation-reveal var(--ng-shell-motion-panel, 250ms) var(--ng-shell-ease, cubic-bezier(.2, .8, .2, 1));
}

@keyframes ng-navigation-reveal {
  from { opacity: .72; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

html[data-motion="off"] { view-transition-name: none; }
html[data-motion="off"]::view-transition-group(*),
html[data-motion="off"]::view-transition-new(*) { animation: none; }
html[data-motion="off"].ng-navigation-enter :is(body > .page-shell, body > .lottery-shell) { animation: none; }

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  ::view-transition-group(*), ::view-transition-new(*) { animation: none; }
  html.ng-navigation-enter :is(body > .page-shell, body > .lottery-shell) { animation: none; }
}