/* Native page navigation: a short fade, with the lab's book corner preserved. */
@view-transition { navigation: auto; }
::view-transition { pointer-events: none; }
::view-transition-group(root) { animation-duration: .28s; }
::view-transition-old(root), ::view-transition-new(root) { mix-blend-mode: normal; }
::view-transition-old(root) { animation: page-out .22s ease-out both; }
::view-transition-new(root) { animation: page-in .28s cubic-bezier(.2,.65,.3,1) both; }
html[data-page-transition="into-lab"]::view-transition-group(root),
html[data-page-transition="from-lab"]::view-transition-group(root) { animation-duration: .62s; }
html[data-page-transition="into-lab"]::view-transition-old(root) { z-index: 2; animation: fold-away .62s cubic-bezier(.65,0,.25,1) both; }
html[data-page-transition="into-lab"]::view-transition-new(root) { z-index: 1; animation: none; }
html[data-page-transition="from-lab"]::view-transition-old(root) { z-index: 1; animation: none; }
html[data-page-transition="from-lab"]::view-transition-new(root) { z-index: 2; animation: unfold-home .62s cubic-bezier(.65,0,.25,1) both; }
@keyframes page-out { to { opacity: 0; } }
@keyframes page-in { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
@keyframes fold-away { from { clip-path: polygon(0 0,200% 0,0 200%); } to { clip-path: polygon(0 0,0 0,0 0); } }
@keyframes unfold-home { from { clip-path: polygon(0 0,0 0,0 0); } to { clip-path: polygon(0 0,200% 0,0 200%); } }
/* Older browsers navigate normally and softly reveal the new page. */
html.page-entry body { animation: page-in .28s ease-out both; }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  ::view-transition-group(root), ::view-transition-old(root), ::view-transition-new(root), html.page-entry body { animation: none !important; }
}