/* Display the supplied PNGs at their original proportions.
   The clipping frames remove only transparent canvas padding. */
.brand { position: relative; }
.brand-logo-frame {
  position: absolute;
  inset: 24px 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.brand-logo-crop {
  position: relative;
  display: block;
  overflow: hidden;
  flex: none;
  transform: scale(.8);
  transform-origin: center;
}
.brand-logo-image {
  position: absolute;
  display: block;
  max-width: none;
  height: auto;
}
/* Original PNG: 2500 x 964; visible bounds: 388,346 -> 2103,567. */
.brand-logo-crop--wide { width: 100%; max-width: 320px; aspect-ratio: 1715 / 221; }
.brand-logo-crop--wide .brand-logo-image {
  width: 145.7725947522%;
  left: -22.6239067055%;
  top: -156.5610859729%;
}
/* Original PNG: 2500 x 2500; visible bounds: 358,333 -> 2141,2151. */
.brand-logo-crop--square {
  height: 100%;
  max-height: 172px;
  max-width: 100%;
  aspect-ratio: 1783 / 1818;
}
.brand-logo-crop--square .brand-logo-image {
  width: 140.2131239484%;
  left: -20.0785193494%;
  top: -18.3168316832%;
}
@media (min-width: 810px) and (max-height: 650px) {
  .brand-logo-frame { inset: 14px 24px; }
}
@media (max-width: 809.98px) {
  .brand-logo-frame { inset: 12px 20px; }
  .brand-logo-crop--wide { max-width: 290px; }
}

/* Keep the comparison switch visually identical to the static mark. */
.sidebar .brand.brand-static,
.sidebar .brand.brand-static:hover,
.sidebar .brand.brand-static:active {
  background: transparent;
  cursor: default;
  scale: none;
  transform: none;
  transition: none;
}

/* Hidden comparison: only the artwork crossfades, with no visible control UI. */
#brand-switcher .brand-logo-frame { transition: opacity 160ms ease-out; }
#brand-switcher [data-logo="wide"] { opacity: 0; }
#brand-switcher[data-logo-variant="wide"] [data-logo="square"] { opacity: 0; }
#brand-switcher[data-logo-variant="wide"] [data-logo="wide"] { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  #brand-switcher .brand-logo-frame { transition: none; }
}