/* Page-to-page navigation, "iris" style (browser view transitions): the new page opens as a circle that grows out of the spot you clicked
   while the old page dims and shrinks a little behind it. Sidebar / top bar stay put. Browsers without support just load normally. */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vt-back .7s cubic-bezier(.7,0,.2,1) both;mix-blend-mode:normal}
::view-transition-new(root){animation:vt-iris .7s cubic-bezier(.7,0,.2,1) both;mix-blend-mode:normal}
@keyframes vt-iris{from{clip-path:circle(0 at var(--vt-x,50%) var(--vt-y,38%))}to{clip-path:circle(170vmax at var(--vt-x,50%) var(--vt-y,38%))}}
@keyframes vt-back{to{transform:scale(.97);filter:brightness(.82) blur(1px)}}
.side{view-transition-name:sidebar}
header.nav{view-transition-name:topbar}
::view-transition-group(sidebar),::view-transition-group(topbar){animation-duration:0s}
::view-transition-old(sidebar),::view-transition-new(sidebar),::view-transition-old(topbar),::view-transition-new(topbar){animation:none;mix-blend-mode:normal}
@media (prefers-reduced-motion:reduce){::view-transition-old(root),::view-transition-new(root){animation:none}}

/* thin loading bar at the very top while the next page is coming */
#nbar{position:fixed;top:0;left:0;height:3px;width:0;z-index:99999;background:linear-gradient(90deg,#53b2fe,#065af3 60%,#ff7a29);box-shadow:0 0 10px rgba(6,90,243,.55);opacity:0;pointer-events:none}
#nbar.run{opacity:1;width:86%;transition:width 8s cubic-bezier(.08,.6,.2,1)}