.popcon-ci {
  display: block;
  flex: none;
  height: 52px;
  width: auto;
  max-width: none;
  object-fit: contain;
  transform-origin: 50% 65%;
  cursor: pointer;
  animation: popcon-idle 5s ease-in-out infinite;
}
.popcon-ci.is-popping { animation: popcon-click 620ms cubic-bezier(.2,.75,.25,1) both; }

.topbar-brand .popcon-mascot {
  display: block;
  flex: none;
  object-fit: contain;
  transform-origin: 50% 78%;
  cursor: pointer;
  animation: popcon-idle 5s ease-in-out infinite;
}
.topbar-brand .popcon-mascot.is-popping { animation: popcon-click 620ms cubic-bezier(.2,.75,.25,1) both; }

.auth-logo .popcon-ci { height: 64px; width: auto; }
.topbar-logo .popcon-ci { height: 44px; }
.header-logo .popcon-ci { height: 48px; width: auto; }
.topbar-brand .popcon-ci,
.footer-brand-name .popcon-ci { height: 52px; }
.header-brand .popcon-ci { height: 52px; width: auto; }

@media (max-width: 600px) {
  .topbar-brand .popcon-ci { height: 46px; }
}

@keyframes popcon-idle {
  0%, 72%, 100% { transform: translateY(0) scale(1) rotate(0); }
  77% { transform: translateY(2px) scale(.96) rotate(-2deg); }
  83% { transform: translateY(-2px) scale(1.04) rotate(2deg); }
  90% { transform: translateY(0) scale(1) rotate(0); }
}

@keyframes popcon-click {
  0%, 100% { transform: translateY(0) scale(1) rotate(0); }
  20% { transform: translateY(2px) scale(.94) rotate(-3deg); }
  50% { transform: translateY(-4px) scale(1.08) rotate(3deg); }
  75% { transform: translateY(0) scale(.98) rotate(-1deg); }
}

@media (prefers-reduced-motion: reduce) {
  .popcon-ci, .popcon-ci.is-popping,
  .topbar-brand .popcon-mascot, .topbar-brand .popcon-mascot.is-popping { animation: none; }
}