/* Moving between case studies: only the content area changes. The current story slides up
   and away while the next one rises in; the sidebar stays exactly where it is.
   Every case page loads this file, which opts both pages into the cross-page view transition. */
@view-transition {
    navigation: auto;
}

main {
    view-transition-name: case-content;
}

#right-side-menu {
    view-transition-name: case-sidebar;
}

/* With the side nav hidden, the top bar stands in for it, so going to or from About (where the
   nav closes, js/boot.js .nav-morph) the side nav and the bar morph into each other */
html.nav-collapsed #right-side-menu { view-transition-name: none; }
html.nav-collapsed .navbar { view-transition-name: case-sidebar; }
/* Phones: the menu is part of the home page itself and the top bar is the navigation, so the bar
   is what holds still across pages */
@media (max-width: 780px) {
    html #right-side-menu { view-transition-name: none; }
    html .navbar { view-transition-name: case-sidebar; }
    html .menu-projects .menu-row.selected { view-transition-name: none; }
}

/* The bottom bar (Home / Next project) holds still too, instead of leaving with the story */
.pager { view-transition-name: site-pager; }

/* The sidebar doesn't animate: only the new one is shown (blending the two snapshots turned
   the links a muddy grey). The page behind everything (the project's glow) fades from the old
   colors to the new ones: the old stays put while the new fades in over it. */
::view-transition-group(root),
::view-transition-group(case-sidebar),
::view-transition-group(site-pager),
::view-transition-old(root),
::view-transition-new(case-sidebar),
::view-transition-new(site-pager) {
    animation: none;
    mix-blend-mode: normal;
}

/* A bar the last page didn't have (the top bar, leaving Home on a phone) fades in with the page
   instead of landing on top of the old one */
::view-transition-new(case-sidebar):only-child,
::view-transition-new(site-pager):only-child {
    animation: page-glow-in 0.5s ease 0.3s both;
}

::view-transition-new(root) {
    animation: page-glow-in 0.7s ease both;
    mix-blend-mode: normal;
}

::view-transition-old(case-sidebar),
::view-transition-old(site-pager) {
    display: none;
}

/* The morph: a soft white shape flows from the panel into the bar (or back); the panel's
   contents fade out as it starts and the bar's fade in while it's still moving, so the shape is
   never an empty box */
html.nav-morph::view-transition-group(case-sidebar) {
    animation: revert;
    animation-duration: 2s;
    animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
    background-color: rgba(255, 255, 255, 0.9);
    border-radius: 22px;
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.08);
    overflow: hidden;
}
html.nav-morph::view-transition-old(case-sidebar),
html.nav-morph::view-transition-new(case-sidebar) {
    display: block;
    height: 100%;
    object-fit: none;
    object-position: 50% 0;
    mix-blend-mode: normal;
}
html.nav-morph::view-transition-old(case-sidebar) { animation: nav-morph-out 0.5s ease both; }
html.nav-morph::view-transition-new(case-sidebar) { animation: nav-morph-in 0.6s ease 0.45s both; }
/* Into About (panel to bar) the panel's rows stay in view, squeezed by the shrinking shape, until
   it's nearly the bar */
html.nav-morph.nav-collapsed::view-transition-old(case-sidebar) { animation: nav-morph-out 0.5s ease 0.9s both; }
html.nav-morph.nav-collapsed::view-transition-new(case-sidebar) { animation: nav-morph-in 0.6s ease 1.2s both; }

@keyframes nav-morph-out { to { opacity: 0; } }
@keyframes nav-morph-in { from { opacity: 0; } }

@keyframes page-glow-in {
    from { opacity: 0; }
}

::view-transition-group(case-content) {
    overflow: clip;
    animation-duration: 0s;
}

/* The current story leaves completely before the next one comes in */
::view-transition-old(case-content) {
    animation: case-out 0.55s cubic-bezier(0.55, 0, 0.7, 0.2) both;
}

::view-transition-new(case-content) {
    animation: case-in 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.5s both;
}

::view-transition-image-pair(case-content) {
    isolation: auto;
}

::view-transition-old(case-content),
::view-transition-new(case-content) {
    mix-blend-mode: normal;
}

/* The selected project in the menu glides from the old row to the new one, its label
   crossfading as it moves, instead of jumping (the rest of the menu stays still) */
.menu-projects:not(.has-pills) .menu-row.selected,
.menu-pill-current {
    view-transition-name: menu-selected;
}

::view-transition-group(menu-selected) {
    animation-duration: 0.65s;
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

::view-transition-old(menu-selected),
::view-transition-new(menu-selected) {
    height: 100%;
    animation-duration: 0.45s;
    animation-timing-function: ease;
    mix-blend-mode: normal;
}

@keyframes case-out {
    to { transform: translateY(-80px); opacity: 0; }
}

@keyframes case-in {
    from { transform: translateY(80px); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    ::view-transition-new(case-sidebar):only-child,
    ::view-transition-new(site-pager):only-child,
    ::view-transition-old(case-content),
    ::view-transition-new(case-content),
    ::view-transition-new(root),
    ::view-transition-group(menu-selected),
    ::view-transition-old(menu-selected),
    ::view-transition-new(menu-selected) {
        animation: none;
    }
}