/* transitions.css — the page wipe.
 *
 * The template used next-view-transitions to drive
 * ::view-transition-old(root) / ::view-transition-new(root): the old page
 * shrinks and fades while the new one opens from a circle at the centre.
 *
 * That is the browser's own View Transitions API, and it works across real
 * page navigations with one CSS rule — no library, no JavaScript. Browsers
 * without cross-document view transitions simply navigate normally.
 */
@view-transition {
  navigation: auto;
}

::view-transition-old(root) {
  animation: terrene-out 2s cubic-bezier(0.87, 0, 0.13, 1) forwards;
}

::view-transition-new(root) {
  animation: terrene-in 2s cubic-bezier(0.87, 0, 0.13, 1) forwards;
}

@keyframes terrene-out {
  to {
    opacity: 0;
    transform: scale(0.5);
  }
}

@keyframes terrene-in {
  from {
    clip-path: circle(0% at 50% 50%);
  }
  to {
    clip-path: circle(75% at 50% 50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  @view-transition {
    navigation: none;
  }
}