/* Fade one captured page over the other on the compositor. */
@media (prefers-reduced-motion: no-preference) {
  html.ps-theme-view-transition::view-transition-group(root) {
    animation: none;
  }
  html.ps-theme-view-transition::view-transition-old(root) {
    animation: none;
    opacity: 1;
    mix-blend-mode: normal;
  }
  html.ps-theme-view-transition::view-transition-new(root) {
    animation: ps-theme-reveal 260ms ease-out both;
    mix-blend-mode: normal;
  }

  /* Older browsers only ease the main backgrounds, never every descendant. */
  html.ps-theme-transition,
  html.ps-theme-transition body,
  html.ps-theme-transition :where(.native-app-shell, .native-main, .native-settings-page, .native-settings-card, .native-shell-topbar, .native-shell-bottom-nav, .ps-theme-page, .ps-theme-panel) {
    transition: background-color 180ms ease-out !important;
  }
}

@keyframes ps-theme-reveal {
  from { opacity: 0; }
  to { opacity: 1; }
}