/* The loading screen's 340ms fade-out / 640ms delayed fade-in. */
@view-transition { navigation: auto; }

.character-page > .breadcrumbs { view-transition-name: page-breadcrumbs; --section-delay: 0ms; }
.character-hero { view-transition-name: page-hero; --section-delay: 70ms; }
.section-navigation { view-transition-name: page-navigation; --section-delay: 140ms; }
#mentions { view-transition-name: page-mentions; --section-delay: 210ms; }
#relations { view-transition-name: page-relations; --section-delay: 280ms; }
#art { view-transition-name: page-art; --section-delay: 350ms; }
#sources { view-transition-name: page-sources; --section-delay: 420ms; }
.site-footer { view-transition-name: page-footer; --section-delay: 490ms; }
.page-language > summary { view-transition-name: page-edition; }

:root:not([data-page-motion=transition]) :is(.character-page > .breadcrumbs, .character-hero, .section-navigation, .dossier-page-section, #sources, .site-footer) {
  animation: page-section-in 640ms ease calc(120ms + var(--section-delay, 0ms)) both;
}
@keyframes page-section-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes page-section-out { from { opacity: 1; } to { opacity: 0; } }

/* Fade the sections independently without sliding their changing text bounds. */
::view-transition-group(*) { animation-duration: 0s; }
::view-transition-old(*) { animation: page-section-out 340ms ease both; mix-blend-mode: normal; }
::view-transition-new(*) { animation: page-section-in 640ms ease 200ms both; mix-blend-mode: normal; }
::view-transition-old(root), ::view-transition-new(root) { animation: none; }

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  :root:not([data-page-motion=transition]) :is(.character-page > .breadcrumbs, .character-hero, .section-navigation, .dossier-page-section, #sources, .site-footer) { animation: none; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none; }
}