/* Extract shared controls from the page crossfade. Photos and workspace content
   remain in the existing root transition; menus keep their own normal behavior. */
@media screen {
  #brandSplash {view-transition-name:es-logo;}
  #workspaceDock {view-transition-name:es-workspaces;}
  #headerSaveStatus {view-transition-name:es-save;}
  #systemFileButton {view-transition-name:es-share;}
  #sharedProjectManage {view-transition-name:es-collaboration;}
  #readAudioJob>button {view-transition-name:es-export-progress;}
  body.writer-mode:not(.splash-home) #writerSidebarToggle,
  body.read-layout:not(.writer-mode):not(.production-mode):not(.splash-home) #readSidebarToggle,
  body.production-mode:not(.splash-home) #productionSidebarToggle {view-transition-name:es-sidebar-toggle;}
  body.writer-mode:not(.splash-home) #writerPageZoom,
  body.read-layout:not(.writer-mode):not(.production-mode):not(.splash-home) #readerTextZoom {view-transition-name:es-page-zoom;}

  /* Matching controls use the new snapshot at full opacity, with no duplicate
     old image or geometry tween. Only the active state/value changes. */
  html.home-nav-transition::view-transition-group(es-logo),
  html.home-nav-transition::view-transition-group(es-workspaces),
  html.home-nav-transition::view-transition-group(es-save),
  html.home-nav-transition::view-transition-group(es-share),
  html.home-nav-transition::view-transition-group(es-collaboration),
  html.home-nav-transition::view-transition-group(es-export-progress),
  html.home-nav-transition::view-transition-group(es-sidebar-toggle),
  html.home-nav-transition::view-transition-group(es-page-zoom) {animation:none;}

  html.home-nav-transition::view-transition-old(es-logo),
  html.home-nav-transition::view-transition-old(es-workspaces),
  html.home-nav-transition::view-transition-old(es-save),
  html.home-nav-transition::view-transition-old(es-share),
  html.home-nav-transition::view-transition-old(es-collaboration),
  html.home-nav-transition::view-transition-old(es-export-progress),
  html.home-nav-transition::view-transition-old(es-sidebar-toggle),
  html.home-nav-transition::view-transition-old(es-page-zoom) {display:none;animation:none;}

  html.home-nav-transition::view-transition-new(es-logo),
  html.home-nav-transition::view-transition-new(es-workspaces),
  html.home-nav-transition::view-transition-new(es-save),
  html.home-nav-transition::view-transition-new(es-share),
  html.home-nav-transition::view-transition-new(es-collaboration),
  html.home-nav-transition::view-transition-new(es-export-progress),
  html.home-nav-transition::view-transition-new(es-sidebar-toggle),
  html.home-nav-transition::view-transition-new(es-page-zoom) {animation:none;opacity:1;mix-blend-mode:normal;}

  /* Home legitimately adds/removes workspace controls. A one-sided control
     still fades with that page, while a logo visible in both stays steady. */
  html.home-nav-transition::view-transition-old(es-logo):only-child,
  html.home-nav-transition::view-transition-old(es-workspaces):only-child,
  html.home-nav-transition::view-transition-old(es-save):only-child,
  html.home-nav-transition::view-transition-old(es-share):only-child,
  html.home-nav-transition::view-transition-old(es-collaboration):only-child,
  html.home-nav-transition::view-transition-old(es-export-progress):only-child,
  html.home-nav-transition::view-transition-old(es-sidebar-toggle):only-child,
  html.home-nav-transition::view-transition-old(es-page-zoom):only-child {display:block;animation:home-route-out 320ms cubic-bezier(.22,1,.36,1) both;}

  html.home-nav-transition::view-transition-new(es-logo):only-child,
  html.home-nav-transition::view-transition-new(es-workspaces):only-child,
  html.home-nav-transition::view-transition-new(es-save):only-child,
  html.home-nav-transition::view-transition-new(es-share):only-child,
  html.home-nav-transition::view-transition-new(es-collaboration):only-child,
  html.home-nav-transition::view-transition-new(es-export-progress):only-child,
  html.home-nav-transition::view-transition-new(es-sidebar-toggle):only-child,
  html.home-nav-transition::view-transition-new(es-page-zoom):only-child {animation:home-route-in 320ms cubic-bezier(.22,1,.36,1) both;}

  /* Capture the final active tab color rather than freezing the first frame
     of its separate CSS color transition for the duration of the page fade. */
  html.home-nav-transition #workspaceDock :is(#writerBtn,#brandHome,#toolsBtn,.workspaceLabel) {transition:none;}
  @media(prefers-reduced-motion:reduce) {
    html.home-nav-transition::view-transition-old(*),
    html.home-nav-transition::view-transition-new(*) {animation:none;}
  }
}