/* Gentle page fades: the old page fades out and the new one fades in with a slight rise, while the header
   stays still. Chrome, Edge and Safari do this themselves; transitions.js does it in other browsers. Only
   loaded when "Gentle page fades" is switched on in the studio, and never for visitors whose devices ask
   for less movement. */
@view-transition { navigation: auto; }
.site-header { view-transition-name: site-header; }
::view-transition-old(root) { animation: dc-page-out 0.22s ease-in both; }
::view-transition-new(root) { animation: dc-page-in 0.42s ease-out 0.12s both; }
@keyframes dc-page-out { to { opacity: 0; } }
@keyframes dc-page-in { from { opacity: 0; transform: translateY(10px); } }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}

/* The same fades for browsers without view transitions (Firefox), switched on by transitions.js. */
html.is-leaving main, html.is-leaving .site-footer { opacity: 0; transition: opacity 0.2s ease-in; }
html.is-arriving main, html.is-arriving .site-footer { animation: dc-page-in 0.42s ease-out; }

/* The small cross in the middle of the screen while one page fades into the next ("A cross in the page
   fades" in the studio). Its shape and size are in site.css. */
.fade-cross, html.has-fade-cross.is-leaving::after, html.has-fade-cross.is-arriving::after {
  position: fixed; left: 50%; top: 50%; z-index: 1000; pointer-events: none;
  margin: calc(var(--cross-h, 46px) / -2) 0 0 calc(var(--cross-h, 46px) * -0.35);
}
.fade-cross { view-transition-name: fade-cross; }
::view-transition-old(fade-cross) { animation: dc-cross 0.8s ease-in-out both; }
@keyframes dc-cross { 0% { opacity: 0; transform: scale(0.92); } 35%, 62% { opacity: 1; transform: none; } 100% { opacity: 0; } }
html.has-fade-cross.is-leaving::after { content: ""; animation: dc-cross-in 0.3s ease-out both; }
html.has-fade-cross.is-arriving::after { content: ""; animation: dc-cross-out 0.5s ease-in 0.1s both; }
@keyframes dc-cross-in { from { opacity: 0; transform: scale(0.92); } }
@keyframes dc-cross-out { to { opacity: 0; } }