/* The brand and node field stay separate from the changing page copy. */
@view-transition { navigation: auto; }
.site-header > .brand, .try-header > .brand { view-transition-name: ontomato-brand; }
.ontology-world, .try-canvas { view-transition-name: ontology-field; }
::view-transition { pointer-events: none; }
::view-transition-group(root) { animation-duration: .48s; }
::view-transition-old(root) { animation: world-copy-out .2s ease-out both; }
::view-transition-new(root) { animation: world-copy-in .36s .10s cubic-bezier(.22,1,.36,1) both; }
::view-transition-group(ontomato-brand), ::view-transition-group(ontology-field) {
  animation-duration: .72s; animation-timing-function: cubic-bezier(.22,1,.36,1);
}
::view-transition-old(ontology-field) { animation: world-copy-out .62s ease-out both; }
::view-transition-new(ontology-field) { animation: world-copy-in .62s ease-out both; }
::view-transition-old(ontomato-brand), ::view-transition-new(ontomato-brand) { animation-duration: .3s; }
@keyframes world-copy-out { to { opacity: 0; } }
@keyframes world-copy-in { from { opacity: 0; } }
.try-transition-copy { position: fixed; margin: 0; pointer-events: none; z-index: var(--z-controls, 40); transform-origin: top left; }
html[data-motion=still]::view-transition-group(*), html[data-motion=still]::view-transition-old(*), html[data-motion=still]::view-transition-new(*),
html[data-paused=true]::view-transition-group(*), html[data-paused=true]::view-transition-old(*), html[data-paused=true]::view-transition-new(*) { animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}