/* Navigation storyboard
 *   0ms  the logo and header rule stay in place; the old menu fades up
 *  60ms  the new menu fades in from 6px below
 * 220ms  the new navigation is settled
 * Native document navigation remains immediate. No router or loading delay.
 */
@media (scripting:enabled) {
  @view-transition { navigation:auto; }
}
:root {
  --navigation-duration:220ms;
  --navigation-exit:120ms;
  --navigation-enter:160ms;
  --navigation-delay:60ms;
  --navigation-offset:6px;
  --navigation-ease:cubic-bezier(0.23,1,0.32,1);
}
.nav { view-transition-name:unblo-navigation; }
.nav .in > .wordmark { view-transition-name:unblo-brand; justify-self:start; }
.nav .in > nav, .nav .mobile-menu { view-transition-name:unblo-menu; }
.nav .in > .btn { view-transition-name:unblo-action; }
.nav li a[aria-current="page"] { border-bottom-color:var(--klein); }
.nav .mobile-menu a[aria-current="page"] { border-bottom-color:transparent; text-decoration:underline; text-underline-offset:4px; }

::view-transition-group(*) {
  animation-duration:var(--navigation-duration);
  animation-timing-function:var(--navigation-ease);
}
::view-transition-old(root),
::view-transition-old(unblo-navigation),
::view-transition-old(unblo-brand) { display:none; }
::view-transition-new(root),
::view-transition-new(unblo-navigation),
::view-transition-new(unblo-brand) { animation:none; }
::view-transition-old(unblo-menu),
::view-transition-old(unblo-action) {
  animation:navigation-leave var(--navigation-exit) var(--navigation-ease) both;
}
::view-transition-new(unblo-menu),
::view-transition-new(unblo-action) {
  animation:navigation-enter var(--navigation-enter) var(--navigation-ease) var(--navigation-delay) both;
}
@keyframes navigation-leave {
  to { opacity:0; transform:translateY(calc(-1 * var(--navigation-offset))); }
}
@keyframes navigation-enter {
  from { opacity:0; transform:translateY(var(--navigation-offset)); }
  to { opacity:1; transform:translateY(0); }
}
@media (prefers-reduced-motion:reduce) {
  @view-transition { navigation:none; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation:none; }
}