/* Load first: both pages must opt in before a cross-document transition. */
@view-transition { navigation: auto; }

:root {
  --passage-core: #c0dcff52;
  --passage-blue: #597ed45c;
  --passage-violet: #9c77c44d;
  --passage-base: #080f29;
  --passage-end: #1b2d55;
  --passage-art:
    radial-gradient(ellipse at 48% 52%, var(--passage-core), var(--passage-blue) 22%, transparent 64%),
    url("./transition-galaxy.svg"),
    /* The inline underlay paints immediately, even if the richer image must
       revalidate while a new document is loading on a slow connection. */
    url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20800%20500%22%3E%3Cdefs%3E%3CradialGradient%20id%3D%22mist%22%3E%3Cstop%20stop-color%3D%22%23dbeaff%22%20stop-opacity%3D%22.42%22%2F%3E%3Cstop%20offset%3D%22.45%22%20stop-color%3D%22%23a7c6ff%22%20stop-opacity%3D%22.16%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23a7c6ff%22%20stop-opacity%3D%220%22%2F%3E%3C%2FradialGradient%3E%3C%2Fdefs%3E%3Cg%20transform%3D%22rotate(-25%20400%20250)%22%3E%3Cellipse%20cx%3D%22400%22%20cy%3D%22250%22%20rx%3D%22530%22%20ry%3D%2290%22%20fill%3D%22url(%23mist)%22%2F%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23e6f2ff%22%20stroke-opacity%3D%22.2%22%3E%3Cpath%20d%3D%22M-70%20248C140%20210%20260%20280%20420%20246S680%20235%20870%20255%22%2F%3E%3Cpath%20d%3D%22M-70%20264C160%20225%20285%20295%20460%20260S710%20250%20870%20272%22%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%22%23f1f7ff%22%20opacity%3D%22.75%22%3E%3Ccircle%20cx%3D%2245%22%20cy%3D%22231%22%20r%3D%221.3%22%2F%3E%3Ccircle%20cx%3D%22112%22%20cy%3D%22266%22%20r%3D%221%22%2F%3E%3Ccircle%20cx%3D%22170%22%20cy%3D%22238%22%20r%3D%221.5%22%2F%3E%3Ccircle%20cx%3D%22236%22%20cy%3D%22271%22%20r%3D%221%22%2F%3E%3Ccircle%20cx%3D%22305%22%20cy%3D%22232%22%20r%3D%221.4%22%2F%3E%3Ccircle%20cx%3D%22376%22%20cy%3D%22262%22%20r%3D%221.2%22%2F%3E%3Ccircle%20cx%3D%22450%22%20cy%3D%22234%22%20r%3D%221.5%22%2F%3E%3Ccircle%20cx%3D%22518%22%20cy%3D%22266%22%20r%3D%221%22%2F%3E%3Ccircle%20cx%3D%22586%22%20cy%3D%22236%22%20r%3D%221.4%22%2F%3E%3Ccircle%20cx%3D%22652%22%20cy%3D%22272%22%20r%3D%221.1%22%2F%3E%3Ccircle%20cx%3D%22728%22%20cy%3D%22237%22%20r%3D%221.4%22%2F%3E%3Ccircle%20cx%3D%22783%22%20cy%3D%22264%22%20r%3D%221%22%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%22%23f7fbff%22%20opacity%3D%22.65%22%3E%3Cpath%20d%3D%22m170%20228%202%207%207%202-7%202-2%207-2-7-7-2%207-2zM520%20246l2%207%207%202-7%202-2%207-2-7-7-2%207-2z%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E"),
    linear-gradient(135deg, transparent 25%, var(--passage-violet) 43%, var(--passage-blue) 52%, transparent 70%),
    linear-gradient(130deg, var(--passage-base), var(--passage-end), var(--passage-base));
}
:root[data-mode="dark"] {
  --passage-core: #d8beb652;
  --passage-blue: #8851506b;
  --passage-violet: #a169554d;
  --passage-base: #100f16;
  --passage-end: #2d1921;
}
:root[data-mode="twilight"] {
  --passage-core: #e5ddb452;
  --passage-blue: #6bafa16b;
  --passage-violet: #b59b654d;
  --passage-base: #102326;
  --passage-end: #1a3f3e;
}

/* The old and new snapshots part to reveal a preloaded star river. Its
   illustrated stars and theme-colored mist move at different speeds. */
::view-transition-group(root) { animation-duration: 1.2s; }
::view-transition-image-pair(root),
:root:is(.galaxy-fallback-depart, .galaxy-fallback-wait, .galaxy-fallback-arrive)::after {
  background-color: var(--passage-base);
  background-image: var(--passage-art);
  background-size: 175% 155%, 155% 145%, 155% 145%, 160% 160%, 100% 100%;
  background-repeat: no-repeat;
}
::view-transition-image-pair(root) {
  animation: galaxy-passage 1.2s ease-in-out both;
}
::view-transition-old(root) { animation: galaxy-depart 1.2s ease-in-out both; }
::view-transition-new(root) { animation: galaxy-arrive 1.2s ease-in-out both; }
@keyframes galaxy-passage {
  from { background-position: -55% 5%, 0% 75%, 0% 75%, 110% 90%, center; }
  to { background-position: 95% 95%, 100% 15%, 100% 15%, -40% 10%, center; }
}
@keyframes galaxy-depart {
  0%, 14% { opacity: 1; transform: none; filter: none; }
  42% { opacity: 0; transform: scale(1.025); filter: blur(2px); }
  100% { opacity: 0; }
}
@keyframes galaxy-arrive {
  0%, 48% { opacity: 0; transform: scale(.98); filter: blur(2px); }
  100% { opacity: 1; transform: none; filter: none; }
}
/* Firefox and other browsers without cross-document snapshots use the same
   preloaded sky as a short, non-interactive bridge between normal documents. */
:root:is(.galaxy-fallback-depart, .galaxy-fallback-wait, .galaxy-fallback-arrive)::after {
  content: ""; position: fixed; inset: 0; z-index: 2147483647; pointer-events: none;
}
:root.galaxy-fallback-depart::after { animation: galaxy-passage 4s linear infinite, galaxy-cover .42s ease-out both; }
:root.galaxy-fallback-wait::after { opacity: 1; animation: galaxy-passage 4s linear infinite; }
:root.galaxy-fallback-arrive::after { animation: galaxy-passage 1s ease-in-out both, galaxy-reveal .85s ease-in-out both; }
@keyframes galaxy-cover { from { opacity: 0; } to { opacity: 1; } }
@keyframes galaxy-reveal { 0%, 18% { opacity: 1; } 100% { opacity: 0; } }

/* Carry the timed galaxy curtain across navigation before the first frame. */
:root[data-scroll-passage-arrival]::after {
  content: ""; position: fixed; inset: 0; z-index: 2147483646; pointer-events: none;
  background-color: var(--passage-base);
  background-image: var(--passage-art);
  background-size: 175% 155%, 155% 145%, 155% 145%, 160% 160%, 100% 100%;
  background-repeat: no-repeat;
  background-position: 95% 95%, 100% 15%, 100% 15%, -40% 10%, center;
}
:root[data-scroll-passage-arrival].scroll-passage-reveal::after { animation: scroll-passage-arrive .45s ease-in-out both; }
@keyframes scroll-passage-arrive { to { transform: translateX(100%); } }
/* The curtain, rather than another snapshot animation, joins the documents. */
:root:is([data-scroll-passage-depart], [data-scroll-passage-arrival])::view-transition-group(root),
:root:is([data-scroll-passage-depart], [data-scroll-passage-arrival])::view-transition-image-pair(root),
:root:is([data-scroll-passage-depart], [data-scroll-passage-arrival])::view-transition-old(root),
:root:is([data-scroll-passage-depart], [data-scroll-passage-arrival])::view-transition-new(root) {
  animation-duration: .01ms !important;
  animation-delay: 0s !important;
}
:root[data-cosmos-motion="still"]:is(.galaxy-fallback-depart, .galaxy-fallback-wait, .galaxy-fallback-arrive)::after { display: none; }
:root[data-cosmos-motion="still"]::view-transition-group(root),
:root[data-cosmos-motion="still"]::view-transition-image-pair(root),
:root[data-cosmos-motion="still"]::view-transition-old(root),
:root[data-cosmos-motion="still"]::view-transition-new(root) { animation-duration: .01ms !important; }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(root), ::view-transition-image-pair(root),
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .01ms !important; }
  :root:is(.galaxy-fallback-depart, .galaxy-fallback-wait, .galaxy-fallback-arrive)::after { display: none; }
}