/* Progressive enhancement: links retain their native navigation behavior. */
@view-transition { navigation: auto; }

.site-header { view-transition-name: site-header; }
::view-transition-group(root) { animation-duration: 260ms; }
::view-transition-old(root) { animation: 170ms ease-out both page-fade-out; }
::view-transition-new(root) { animation: 260ms ease-out both page-fade-in; }
::view-transition-group(site-header) { animation-duration: 0s; z-index: 2; }
::view-transition-old(site-header) { animation: none; opacity: 0; }
::view-transition-new(site-header) { animation: none; opacity: 1; }

@keyframes page-fade-out { to { opacity: 0; } }
@keyframes page-fade-in { from { opacity: 0; } }
@keyframes mosaic-enter {
  from { opacity: .15; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

/* The first frame remains usable and the entire reveal ends within 570ms. */
@media (prefers-reduced-motion: no-preference) {
  body[data-motion="on"] .mosaic-board > *,
  body[data-motion="on"] .orbit-board > * {
    animation: mosaic-enter 360ms cubic-bezier(.2,.7,.3,1) both;
    animation-delay: var(--entry-delay, 0ms);
  }
  body[data-motion="on"] :is(.mosaic-board, .orbit-board) > :nth-child(2) { --entry-delay: 35ms; }
  body[data-motion="on"] :is(.mosaic-board, .orbit-board) > :nth-child(3) { --entry-delay: 70ms; }
  body[data-motion="on"] :is(.mosaic-board, .orbit-board) > :nth-child(4) { --entry-delay: 105ms; }
  body[data-motion="on"] :is(.mosaic-board, .orbit-board) > :nth-child(5) { --entry-delay: 140ms; }
  body[data-motion="on"] :is(.mosaic-board, .orbit-board) > :nth-child(6) { --entry-delay: 175ms; }
  body[data-motion="on"] :is(.mosaic-board, .orbit-board) > :nth-child(7) { --entry-delay: 210ms; }
}

/* An incoming page transition already reveals the page; do not replay both. */
html.arrived-via-transition body[data-motion="on"] :is(.mosaic-board, .orbit-board) > *,
body[data-motion="on"] :is(.mosaic-board, .orbit-board) > *:focus-within { animation: none; }

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
  body[data-motion="on"] :is(.mosaic-board, .orbit-board) > * { animation: none !important; }
}