/* Linked before everything else on every page: the very first frame is already dark (the app's own CSS can arrive a
   moment later), and page-to-page transitions are set up before either page has run any script. */
html { background: #08070f; color-scheme: dark; }

/* Page to page, the browser dissolves one page into the other (Chromium, Safari 18.2+; elsewhere a plain page load).
   Going on, like opening the Studio, you move forward: the page you leave drifts toward you and slips out of focus,
   the next one comes up into focus. Going back home, the same in reverse. The move starts from where you clicked
   (--vx --vy, set by the script in each page's head), so opening the Studio leans into the button you pressed. */
@view-transition { navigation: auto; types: page; }
::view-transition { background: #08070f; }
html:active-view-transition-type(page, back)::view-transition-old(root),
html:active-view-transition-type(page, back)::view-transition-new(root) { transform-origin: var(--vx, 50%) var(--vy, 50%); }
html:active-view-transition-type(page)::view-transition-old(root) { animation: forward-out 0.42s cubic-bezier(0.4, 0, 0.2, 1) both; }
html:active-view-transition-type(page)::view-transition-new(root) { animation: forward-in 0.85s cubic-bezier(0.16, 1, 0.3, 1) 0.12s both; }
html:active-view-transition-type(back)::view-transition-old(root) { animation: back-out 0.42s cubic-bezier(0.4, 0, 0.2, 1) both; }
html:active-view-transition-type(back)::view-transition-new(root) { animation: back-in 0.85s cubic-bezier(0.16, 1, 0.3, 1) 0.12s both; }
@keyframes forward-out { to { opacity: 0; transform: scale(1.03); filter: blur(8px); } }
@keyframes forward-in { from { opacity: 0; transform: scale(0.975); filter: blur(10px); } }
@keyframes back-out { to { opacity: 0; transform: scale(0.975); filter: blur(8px); } }
@keyframes back-in { from { opacity: 0; transform: scale(1.025); filter: blur(10px); } }

/* Reduce Motion (Windows asks for it when "Animation effects" is off): a plain dissolve, as on iOS. */
@media (prefers-reduced-motion: reduce) {
  html:active-view-transition-type(page, back)::view-transition-old(root) { animation: dissolve-out 0.3s ease both; }
  html:active-view-transition-type(page, back)::view-transition-new(root) { animation: dissolve-in 0.4s ease both; }
}
@keyframes dissolve-out { to { opacity: 0; } }
@keyframes dissolve-in { from { opacity: 0; } }