Blend single element within a fixed/sticky container with the body

Question

In my project, I have a top bar with position: fixed that consists of a small layout of a logo and some other items. What I'm trying to achieve is to apply a mix-blend-mode: multiply to the logo only, such that it blends with the body. But:

• The other items should not get the blend effect and should just be rendered black
• The Logo and the other items should stay in a container (with display: flex) together, so that I can control their layout.

body {
  background-image: linear-gradient(to bottom, lime, deeppink, lime);
  height: 200vh;
}

.top-bar {
  position: fixed;
  top: 0;
  width: 100%;

  display: flex;
  justify-content: center;
  gap: 10px;

  color: white;
  mix-blend-mode: difference;
}

.item {
  /* How can I escape from mix-blend mode here and just render this black? */
}

<div class="top-bar">  
  <div class="logo">
    LOGO
  </div>
  
  <div class="item">
    item-1
  </div>

  <div class="item">
    item-2
  </div>
</div>

What I tried:

• Apply mix-blend-mode: multiply to .logo. But then it will blend with it's container (.top-bar) and not with body. (Resulting in no effect)
• Try to use isolation: isolate, but I'm not sure if this is the right approach here.
• Try to get rid of the wrapper div (.top-bar) and make .logo and the .item-elements direct children of body. But then I lose the ability to layout those elements correctly in a flexbox.