.brand-logo {
  position: relative;
  display: inline-block;
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  overflow: hidden;
  vertical-align: middle;
  background: url('./manwith-art-logo.png') center / contain no-repeat;
}

.brand-logo > .brand-logo__color { display: none; }

@supports ((mask-image: url('')) or (-webkit-mask-image: url(''))) {
  .brand-logo {
    background: none;
    -webkit-mask: url('./manwith-art-logo.png') center / contain no-repeat;
    mask: url('./manwith-art-logo.png') center / contain no-repeat;
    mask-mode: alpha;
  }

  .brand-logo > .brand-logo__color {
    position: absolute;
    display: block;
    inset: -50%;
    background: conic-gradient(from 25deg,
      #ff647c, #ffb85c, #ecd877, #32d4bc,
      #6295ff, #b872ff, #ff78b7, #ff647c);
    transform-origin: center;
    animation: brand-color-flow 12s linear infinite;
  }
}

@keyframes brand-color-flow {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .brand-logo > .brand-logo__color {
    animation: none;
    transform: rotate(25deg);
  }
}

@media (forced-colors: active) {
  .brand-logo > .brand-logo__color {
    animation: none;
    background: CanvasText;
    forced-color-adjust: none;
  }
}

@media print {
  .brand-logo > .brand-logo__color {
    animation: none;
    background: #000;
    print-color-adjust: exact;
  }
}