/* Page change between a section and its project (see /ml/transition.js). The path in the top-left corner and the
   black strip behind it are the site's fixed frame: the path is pinned (it never moves or flickers), and only the
   content below fades from one page to the other. */
@view-transition { navigation: auto; }
::view-transition { background: #0b0d0c; }
#corner-trail { view-transition-name: site-path; }
/* only the last step of the path is coloured: on /ml/, once "› AQUAMIND" starts typing, MACHINE LEARNING goes off-white */
#corner-trail.deeper .here, #corner-trail.deeper a.here:hover { color: rgba(233, 228, 215, .85); }

html:active-view-transition-type(deeper)::view-transition-old(root),
html:active-view-transition-type(back-up)::view-transition-old(root) { animation: .35s ease both page-fade-out; }
html:active-view-transition-type(deeper)::view-transition-new(root),
html:active-view-transition-type(back-up)::view-transition-new(root) { animation: .35s ease both page-fade-in; }
/* the path itself: no fade, no move; the new page's copy simply takes over (they read the same at that moment) */
html:active-view-transition-type(deeper)::view-transition-group(site-path),
html:active-view-transition-type(back-up)::view-transition-group(site-path),
html:active-view-transition-type(deeper)::view-transition-old(site-path),
html:active-view-transition-type(deeper)::view-transition-new(site-path),
html:active-view-transition-type(back-up)::view-transition-old(site-path),
html:active-view-transition-type(back-up)::view-transition-new(site-path) { animation: none; }
html:active-view-transition-type(deeper)::view-transition-old(site-path),
html:active-view-transition-type(back-up)::view-transition-old(site-path) { display: none; }

@keyframes page-fade-out { to { opacity: 0; } }
@keyframes page-fade-in { from { opacity: 0; } }

/* arriving on a project page from another one: its last step stays hidden until transition.js types it in */
html.trail-type .am-trail > :nth-last-child(2), html.trail-type .am-trail > :nth-last-child(3) { visibility: hidden; }