/* The same physical object connects the desk and its independent computer page. */
@view-transition { navigation:auto; }
::view-transition-group(desk-computer) { animation-duration:680ms; animation-timing-function:cubic-bezier(.22,.8,.22,1); }
::view-transition-old(desk-computer),::view-transition-new(desk-computer) { height:100%; object-fit:contain; mix-blend-mode:normal; }
::view-transition-old(desk-computer) { animation:computer-out 440ms ease both; }
::view-transition-new(desk-computer) { animation:computer-in 680ms ease both; }
::view-transition-old(root) { animation:computer-out 400ms ease both; }
::view-transition-new(root) { animation:computer-in 600ms ease both; }
@keyframes computer-out { to { opacity:0; } }
@keyframes computer-in { from { opacity:0; } to { opacity:1; } }
@media(prefers-reduced-motion:reduce) {
  @view-transition { navigation:none; }
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*) { animation:none!important; }
}

::view-transition-group(desk-computer) { animation-duration:800ms; animation-timing-function:cubic-bezier(.35,0,.18,1); }
::view-transition-old(root) { animation:computer-room-recede 800ms ease both; }
@keyframes computer-room-recede { to { opacity:0; filter:blur(3px); scale:1.06; } }
@media(prefers-reduced-motion:reduce) { ::view-transition-old(root) { animation:none; } }