html[data-page-outgoing],html[data-page-incoming]{overflow:hidden;background:#151710}
html[data-page-outgoing] body,html[data-page-incoming] body{will-change:transform,opacity}
html[data-page-outgoing="right"] body{animation:out-right .7s cubic-bezier(.45,0,.2,1) both}
html[data-page-outgoing="down"] body{animation:out-down .7s cubic-bezier(.45,0,.2,1) both}
html[data-page-outgoing="left"] body{animation:out-left .7s cubic-bezier(.45,0,.2,1) both}
html[data-page-outgoing="up"] body{animation:out-up .7s cubic-bezier(.45,0,.2,1) both}
html[data-page-incoming="right"] body{animation:in-right .75s cubic-bezier(.22,1,.36,1) both}
html[data-page-incoming="down"] body{animation:in-down .75s cubic-bezier(.22,1,.36,1) both}
html[data-page-incoming="left"] body{animation:in-left .75s cubic-bezier(.22,1,.36,1) both}
html[data-page-incoming="up"] body{animation:in-up .75s cubic-bezier(.22,1,.36,1) both}
@keyframes out-right{to{transform:translateX(100vw);opacity:.85}}@keyframes in-right{from{transform:translateX(-100vw);opacity:.85}}
@keyframes out-down{to{transform:translateY(100vh);opacity:.85}}@keyframes in-down{from{transform:translateY(-100vh);opacity:.85}}
@keyframes out-left{to{transform:translateX(-100vw);opacity:.85}}@keyframes in-left{from{transform:translateX(100vw);opacity:.85}}
@keyframes out-up{to{transform:translateY(-100vh);opacity:.85}}@keyframes in-up{from{transform:translateY(100vh);opacity:.85}}
@media(prefers-reduced-motion:reduce){html[data-page-outgoing] body,html[data-page-incoming] body{animation:none}}

/* Both page snapshots move together, like adjacent parts of a canvas. */
@view-transition { navigation: auto; }
::view-transition-group(root){animation-duration:1s;animation-timing-function:cubic-bezier(.45,0,.2,1)}
html[data-native-direction]::view-transition-old(root),html[data-native-direction]::view-transition-new(root){animation-duration:1s;animation-timing-function:cubic-bezier(.45,0,.2,1);animation-fill-mode:both;mix-blend-mode:normal}
html[data-native-direction="right"]::view-transition-old(root){animation-name:sheet-out-right}
html[data-native-direction="right"]::view-transition-new(root){animation-name:sheet-in-right}
html[data-native-direction="down"]::view-transition-old(root){animation-name:sheet-out-down}
html[data-native-direction="down"]::view-transition-new(root){animation-name:sheet-in-down}
html[data-native-direction="left"]::view-transition-old(root){animation-name:sheet-out-left}
html[data-native-direction="left"]::view-transition-new(root){animation-name:sheet-in-left}
html[data-native-direction="up"]::view-transition-old(root){animation-name:sheet-out-up}
html[data-native-direction="up"]::view-transition-new(root){animation-name:sheet-in-up}
@keyframes sheet-out-right{to{transform:translateX(100%)}}@keyframes sheet-in-right{from{transform:translateX(-100%)}}
@keyframes sheet-out-down{to{transform:translateY(100%)}}@keyframes sheet-in-down{from{transform:translateY(-100%)}}
@keyframes sheet-out-left{to{transform:translateX(-100%)}}@keyframes sheet-in-left{from{transform:translateX(100%)}}
@keyframes sheet-out-up{to{transform:translateY(-100%)}}@keyframes sheet-in-up{from{transform:translateY(100%)}}
@media(prefers-reduced-motion:reduce){::view-transition-old(root),::view-transition-new(root){animation:none}}