/* ====================================================================
   BRAND · masked logo, theme-tinted, shimmering
   ====================================================================
   The trick: logo asset is solid-black on transparent. We never paint
   it as an <img>. Instead we use it as a CSS mask over a gradient
   filled with --io-accent* values. When the active theme changes,
   the logo retints instantly — same DOM node, same mask, new fill.

   The shimmer slides a brighter band across the masked silhouette on
   a 7.5s linear loop. The gradient is symmetric (dim → bright → dim)
   so the loop seam is invisible.
   ==================================================================== */

.pub-brand-logo {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  background: linear-gradient(
    90deg,
    var(--io-accent-dim)     0%,
    var(--io-accent)        30%,
    var(--io-accent-bright) 50%,
    var(--io-accent)        70%,
    var(--io-accent-dim)   100%
  );
  background-size: 220% 100%;
  background-position: 100% 0;
  filter: drop-shadow(0 0 6px var(--io-accent-glow));
          mask: url('/img/assets/kernelriotlogo.webp') center center / contain no-repeat alpha;
  -webkit-mask: url('/img/assets/kernelriotlogo.webp') center center / contain no-repeat alpha;
  animation: pub-brand-logo-shimmer 7.5s linear infinite;
}

@keyframes pub-brand-logo-shimmer {
  0%   { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}