body { font-family: system-ui; margin: 40px; background: #1a1a1a; color: white; }
a { color: #2eade8; }
img { width: 200px; }
/* 1. Enable cross-document transitions */
@view-transition {
  navigation: auto;
}

/* 2. Set the stage to black */
::view-transition {
  background-color: #1a1a1a;
}

/* 3. Fade out the old page first */
::view-transition-old(root) {
  animation: 0.3s ease-in forwards fade-out;
}

/* 4. Fade in the new page with a slight delay */
::view-transition-new(root) {
  animation: 0.3s ease-out 0.3s backwards fade-in;
}

@keyframes fade-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}