/* Page flow (see route-entry.js). Where the browser supports it, one page is
   handed to the next without a blank sheet in between: the page being left
   stays on screen until the next one is ready, then the next page rises over
   it like a sheet of paper with an ink edge; with the browser's Back button the
   current sheet falls away instead and uncovers the page underneath. */
@view-transition{navigation:auto}
@media (prefers-reduced-motion:reduce){@view-transition{navigation:none}}

::view-transition-group(root){animation-duration:.82s}
html[data-flow]::view-transition-old(root),
html[data-flow]::view-transition-new(root){mix-blend-mode:normal;animation-duration:.82s;animation-timing-function:cubic-bezier(.76,0,.24,1);animation-fill-mode:both}

/* Forward: the next page rises over this one, which drifts up a little. */
html[data-flow="rise"]::view-transition-old(root){animation-name:flow-drift-up}
html[data-flow="rise"]::view-transition-new(root){animation-name:flow-rise;box-shadow:0 -1px 0 #1d1d1f}
/* Back: this page falls away and the one underneath settles into place. */
html[data-flow="fall"]::view-transition-old(root){z-index:2;animation-name:flow-fall;box-shadow:0 1px 0 #1d1d1f}
html[data-flow="fall"]::view-transition-new(root){z-index:1;animation-name:flow-settle}
/* Two pages that already meet on the same picture: the page being left
   stays on top, unchanged, until the new page has its copy of the picture
   ready (project/zoom-arrive.js then ends the transition), so there is never
   a frame without it. */
html[data-flow="still"]::view-transition-group(root){animation-duration:3s}
html[data-flow="still"]::view-transition-old(root){z-index:2;animation:flow-hold 3s linear both}
html[data-flow="still"]::view-transition-new(root){z-index:1;animation:none;opacity:1}
@keyframes flow-hold{from,99%{opacity:1}to{opacity:0}}

@keyframes flow-rise{from{transform:translateY(100%)}to{transform:none}}
@keyframes flow-drift-up{from{transform:none}to{transform:translateY(-10%)}}
@keyframes flow-fall{from{transform:none}to{transform:translateY(100%)}}
@keyframes flow-settle{from{transform:translateY(-10%)}to{transform:none}}

/* Selecting text: solid ink with paper-coloured letters instead of the
   system blue (on the dark panels, the other way round). Pictures never
   take a tint. */
::selection{background:#1d1d1f;color:#f5f5f7;-webkit-text-fill-color:#f5f5f7;text-shadow:none}
:is(.lt-pm,.sm-stage[data-theme="dark"],[data-theme="dark"]) ::selection{background:#f5f5f7;color:#1d1d1f;-webkit-text-fill-color:#1d1d1f}
img::selection,canvas::selection,svg::selection{background:transparent}