*{box-sizing:border-box}

.site-nav {
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  background: pink;
}

.site-nav a {
  margin: 35px;
}

.site-nav a.dormant {
  display: none;
}

#link-home { view-transition-name: link-home; }
#link-music { view-transition-name: link-music; }
#link-photos { view-transition-name: link-photos; }
#link-audio { view-transition-name: link-audio; }

::view-transition-old(*), ::view-transition-new(*) { /* default, keep short */
  animation-duration: 500ms;
}

@keyframes fade-out { from { opacity: 1; transform: none } to { opacity: 0; transform: scale(.98) } }
@keyframes fade-in  { from { opacity: 0; transform: scale(.98) } to { opacity: 1; transform: none } }