/* The icon keeps its original size; the effect adds no layout or network cost. */
.brand .brand-mark {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  max-width: none;
  overflow: visible;
  line-height: 0;
}
.brand-logo {
  transform: perspective(180px) rotateX(var(--brand-tilt-x, 0deg)) rotateY(var(--brand-tilt-y, 0deg));
  transform-origin: center 65%;
  transition: transform 160ms ease-out;
}
.brand-flame {
  position: fixed;
  z-index: 30;
  width: 128px;
  height: 128px;
  pointer-events: none;
  contain: strict;
}
@media (prefers-reduced-motion: reduce) {
  .brand-logo { transform: none; transition: none; }
  .brand-flame { display: none; }
}