/* App-like page transitions (View Transitions between pages: Chrome, Edge, Safari 18.2+; other browsers simply
   open the page as before). The old page fades out and lifts a little while the new one rises in; going Back
   plays it the other way. The navbar (website) and the sidebar + top bar (admin) stay perfectly still, and so do
   the floating buttons. The "back" type is set by the small script in base.html / dashboard/base.html. */
@view-transition { navigation: auto; }

::view-transition-old(root) { animation: vtOut .2s cubic-bezier(.4, 0, 1, 1) both; }
::view-transition-new(root) { animation: vtIn .34s cubic-bezier(.16, 1, .3, 1) both; }
html:active-view-transition-type(back)::view-transition-old(root) { animation-name: vtOutBack; }
html:active-view-transition-type(back)::view-transition-new(root) { animation-name: vtInBack; }
@keyframes vtOut { to { opacity: 0; transform: translateY(-10px) scale(.995); } }
@keyframes vtIn { from { opacity: 0; transform: translateY(16px); } }
@keyframes vtOutBack { to { opacity: 0; transform: translateY(12px); } }
@keyframes vtInBack { from { opacity: 0; transform: translateY(-10px) scale(.995); } }

/* parts that stay where they are */
#mainNavbar { view-transition-name: rc-nav; }
.wa-float { view-transition-name: rc-wa; }
.rachy { view-transition-name: rc-rachy; }
.dashboard-sidebar { view-transition-name: rc-sidebar; }
.dashboard-topbar { view-transition-name: rc-topbar; }
::view-transition-group(rc-nav), ::view-transition-group(rc-wa), ::view-transition-group(rc-rachy),
::view-transition-group(rc-sidebar), ::view-transition-group(rc-topbar) { animation-duration: .25s; }
::view-transition-old(rc-nav), ::view-transition-new(rc-nav),
::view-transition-old(rc-sidebar), ::view-transition-new(rc-sidebar) { animation: none; mix-blend-mode: normal; }
::view-transition-old(rc-nav), ::view-transition-old(rc-sidebar) { display: none; }   /* show the new one at once: no double-exposure */

/* Photo morph: the photo of the card you tap grows into the big cover of the page that opens (blog posts), and
   shrinks back into its card when you go Back. The head script in base.html names the photo (rc-photo). */
.bl-hero-figure img { view-transition-name: rc-photo; }
::view-transition-group(rc-photo) { animation-duration: .5s; animation-timing-function: cubic-bezier(.2, .8, .2, 1); z-index: 2; }
::view-transition-old(rc-photo), ::view-transition-new(rc-photo) { width: 100%; height: 100%; object-fit: cover; overflow: hidden; }
::view-transition-old(rc-photo) { animation: none; }
::view-transition-new(rc-photo) { animation: vtPhotoIn .3s ease .12s both; }
@keyframes vtPhotoIn { from { opacity: 0; } }
/* the cover being morphed into is shown as itself, not as a skeleton block */
.sk-boot .bl-hero-figure img { object-position: 50% 50% !important; animation: none !important; background: none !important; }
/* tap-to-zoom pictures in blog posts (premium.js): the page itself stays still while a picture zooms */
html.rz-vt::view-transition-old(root), html.rz-vt::view-transition-new(root) { animation: none; }
::view-transition-group(rz-img) { animation-duration: .4s; animation-timing-function: cubic-bezier(.2, .8, .2, 1); }

@media (prefers-reduced-motion: reduce) {
    ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}