/* R1 (After only, html.ux-r1 is set by ux/r1.js before the first frame). The site's own @view-transition rule
   (play.css) stays the only one; these rules style the names r1.js gives per navigation. */
html.ux-r1::view-transition-old(root){animation:ux-r1-fade-out .36s ease both}
html.ux-r1::view-transition-new(root){animation:ux-r1-fade-in .36s ease both}
/* paired cover / title: one morph curve, a little longer than the page so the eye follows it */
html.ux-r1::view-transition-group(*.uxflow){animation-duration:.5s;animation-timing-function:cubic-bezier(.22,1,.36,1)}
html.ux-r1::view-transition-old(*.uxflow){animation:ux-r1-fade-out .3s ease .1s both}
html.ux-r1::view-transition-new(*.uxflow){animation:ux-r1-fade-in .28s ease .06s both}
/* unpaired blocks: drift out / in, staggered (never a one-frame cut) */
html.ux-r1:root::view-transition-old(.uxflow):only-child{animation:ux-r1-flow-out .32s cubic-bezier(.45,0,.55,1) both}
html.ux-r1:root::view-transition-new(.uxflow):only-child{animation:ux-r1-flow-in .44s cubic-bezier(.22,1,.36,1) .12s both}
html.ux-r1:root::view-transition-new(.d2):only-child{animation-delay:.17s}
html.ux-r1:root::view-transition-new(.d3):only-child{animation-delay:.22s}
html.ux-r1:root::view-transition-new(.d4):only-child{animation-delay:.27s}
/* nothing paired (e.g. browser Back restored a case scrolled down): the restored blocks start at once */
html.ux-r1.ux-r1-unpaired:root::view-transition-new(.uxflow):only-child{animation-delay:0s}
html.ux-r1.ux-r1-back:root::view-transition-old(.uxflow):only-child{animation-name:ux-r1-flow-out-back}
html.ux-r1.ux-r1-back:root::view-transition-new(.uxflow):only-child{animation-name:ux-r1-flow-in-back}
/* fixed controls are the same on both pages: they keep still */
html.ux-r1::view-transition-group(ux-fix-notes),html.ux-r1::view-transition-group(ux-fix-theme),html.ux-r1::view-transition-group(ux-fix-type),html.ux-r1::view-transition-group(ux-fix-r3){animation:none;z-index:6}
html.ux-r1::view-transition-old(ux-fix-notes),html.ux-r1::view-transition-old(ux-fix-theme),html.ux-r1::view-transition-old(ux-fix-type){animation:none;opacity:0}
html.ux-r1::view-transition-new(ux-fix-notes),html.ux-r1::view-transition-new(ux-fix-theme),html.ux-r1::view-transition-new(ux-fix-type){animation:none}
@keyframes ux-r1-fade-out{to{opacity:0}}
@keyframes ux-r1-fade-in{from{opacity:0}}
@keyframes ux-r1-flow-out{to{opacity:0;transform:translateY(-16px)}}
@keyframes ux-r1-flow-in{from{opacity:0;transform:translateY(22px)}}
@keyframes ux-r1-flow-out-back{to{opacity:0;transform:translateY(16px)}}
@keyframes ux-r1-flow-in-back{from{opacity:0;transform:translateY(-14px)}}