/* 1) .grve-logo: invisibile a scroll=0, visibile quando scroll > 0 */
.grve-logo{
  transition: opacity .25s ease;
}

html.sq-at-top .grve-logo{
  opacity: 0;
  pointer-events: none;
}

html:not(.sq-at-top) .grve-logo{
  opacity: 1;
  pointer-events: auto;
}


/* 2) sq-blend-logo: visibile SOLO a scroll=0 */
.sq-blend-logo-wrap{
  position: fixed;
  z-index: 99999;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  /* Blend sul wrapper (come ti dicevo) */
  mix-blend-mode: difference;

  /* transizione + default visibile */
  opacity: 1;
  transition: opacity .25s ease;
}

html:not(.sq-at-top) .sq-blend-logo-wrap{
  opacity: 0;
}

/* immagine */
.sq-blend-logo{
  display: block;
  max-height: 36px;
  width: auto;
}