.site-logo {
  position: relative !important;
  isolation: isolate;
  --logo-light-opacity: 1;
}

.site-logo-stack {
  position: absolute;
  inset: 0;
  display: block;
  pointer-events: none;
}

.site-logo .site-logo-layer {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  margin: auto;
  object-fit: contain;
  transform: translateZ(0);
  transition: opacity .16s linear;
  will-change: opacity;
}

.site-logo .site-logo-layer--light {
  opacity: var(--logo-light-opacity, 1);
}

.site-logo .site-logo-layer--dark {
  opacity: calc(1 - var(--logo-light-opacity, 1));
}

@media (prefers-reduced-motion: reduce) {
  .site-logo .site-logo-layer { transition: none; }
}