/* The shared header remains the fixed point while each page drifts around it. */
@view-transition { navigation: auto; }

.site-header { view-transition-name: site-header; }
.immersive-atlas #mapwrap { view-transition-name: atlas-globe; }
.immersive-atlas .title-row { view-transition-name: atlas-intro; }
.immersive-atlas #country-panel { view-transition-name: atlas-explorer; }
.immersive-atlas .map-toolbar { view-transition-name: atlas-mode; }
.immersive-atlas .map-heading { view-transition-name: atlas-measure; }
.immersive-atlas .legend { view-transition-name: atlas-legend; }
.immersive-atlas .site-footer { view-transition-name: atlas-footer; }
.immersive-atlas #history-timeline { view-transition-name: atlas-history; }
.immersive-atlas #world-overview { view-transition-name: atlas-world-overview; }
.action-page main { view-transition-name: action-content; }
.action-page .action-footer { view-transition-name: action-footer; }

::view-transition { pointer-events: none; }
::view-transition-group(*) { animation-duration: 680ms; animation-timing-function: cubic-bezier(.22,1,.36,1); }
::view-transition-image-pair(*) { isolation: isolate; }
::view-transition-old(*), ::view-transition-new(*) { mix-blend-mode: normal; }
::view-transition-group(site-header) { animation: none; z-index: 20; }
::view-transition-old(site-header) { animation: none; opacity: 0; }
::view-transition-new(site-header) { animation: none; opacity: 1; }

::view-transition-old(root) { animation: page-space-out 380ms ease both; }
::view-transition-new(root) { animation: page-space-in 620ms ease both; }
::view-transition-old(atlas-globe) { animation: page-globe-out 620ms cubic-bezier(.4,0,.25,1) both; }
::view-transition-new(atlas-globe) { animation: page-globe-in 680ms cubic-bezier(.22,1,.36,1) both; }
::view-transition-old(atlas-intro),
::view-transition-old(atlas-mode),
::view-transition-old(atlas-measure),
::view-transition-old(atlas-legend),
::view-transition-old(atlas-history),
::view-transition-old(atlas-scripture),
::view-transition-old(atlas-population),
::view-transition-old(atlas-footer),
::view-transition-old(action-content),
::view-transition-old(action-footer) { animation: page-drift-out 440ms cubic-bezier(.4,0,.25,1) both; }
::view-transition-old(atlas-explorer) { animation: page-drift-out 480ms cubic-bezier(.4,0,.25,1) 30ms both; }
::view-transition-new(atlas-intro),
::view-transition-new(atlas-mode),
::view-transition-new(atlas-measure),
::view-transition-new(atlas-legend),
::view-transition-new(atlas-history),
::view-transition-new(atlas-scripture),
::view-transition-new(atlas-population),
::view-transition-new(atlas-footer),
::view-transition-new(action-footer) { animation: page-drift-in 620ms cubic-bezier(.22,1,.36,1) 60ms both; }
::view-transition-new(atlas-explorer),
::view-transition-new(action-content) { animation: page-drift-in 660ms cubic-bezier(.22,1,.36,1) 80ms both; }

@keyframes page-space-out { to { opacity: 0; } }
@keyframes page-space-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes page-drift-out { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-26px); } }
@keyframes page-drift-in { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
@keyframes page-globe-out { from { opacity: 1; transform: translateY(0) scale(1); } to { opacity: 0; transform: translateY(-34px) scale(.96); } }
@keyframes page-globe-in { from { opacity: 0; transform: translateY(34px) scale(.96); } to { opacity: 1; transform: translateY(0) scale(1); } }

/* File previews and older browsers use the same quiet motion without routing. */
html.page-transitioned .immersive-atlas .title-row { animation: none; }
html.page-entering body :is(.title-row,#mapwrap,#country-panel,.map-toolbar,.map-heading,.legend,.site-footer,#history-timeline,#world-overview),
html.page-entering .action-page :is(main,.action-footer) { opacity: 0; }
html.page-arriving body :is(.title-row,#mapwrap,#country-panel,.map-toolbar,.map-heading,.legend,.site-footer,#history-timeline,#world-overview),
html.page-arriving .action-page :is(main,.action-footer) { animation: page-fallback-in 480ms cubic-bezier(.22,1,.36,1) both !important; }
html.page-leaving body :is(.title-row,#mapwrap,#country-panel,.map-toolbar,.map-heading,.legend,.site-footer,#history-timeline,#world-overview),
html.page-leaving .action-page :is(main,.action-footer) { animation: page-fallback-out 280ms cubic-bezier(.4,0,.25,1) both !important; }
html.page-arriving #mapwrap { animation-duration: 540ms !important; }
html.page-leaving #mapwrap { animation-duration: 280ms !important; }
@keyframes page-fallback-in { from { opacity: 0; translate: 0 24px; } to { opacity: 1; translate: 0 0; } }
@keyframes page-fallback-out { from { opacity: 1; translate: 0 0; } to { opacity: 0; translate: 0 -22px; } }

@media (prefers-reduced-motion: reduce) {
 @view-transition { navigation: none; }
 ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
 html.page-entering body :is(.title-row,#mapwrap,#country-panel,.map-toolbar,.map-heading,.legend,.site-footer,#history-timeline,#world-overview),
 html.page-entering .action-page :is(main,.action-footer) { opacity: 1; }
 html.page-arriving body :is(.title-row,#mapwrap,#country-panel,.map-toolbar,.map-heading,.legend,.site-footer,#history-timeline,#world-overview),
 html.page-arriving .action-page :is(main,.action-footer),
 html.page-leaving body :is(.title-row,#mapwrap,#country-panel,.map-toolbar,.map-heading,.legend,.site-footer,#history-timeline,#world-overview),
 html.page-leaving .action-page :is(main,.action-footer) { animation: none !important; }
}