.celebration-character {
  position: absolute;
  z-index: 12;
  transform: translateX(-50%);
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  isolation: isolate;
}

.celebration-character[hidden] { display: none !important; }
.celebration-character.is-ready {
  transform-origin: 50% 100%;
  animation: mayor-door-emergence 480ms ease-out both;
}
@keyframes mayor-door-emergence {
  from { opacity: 0; transform: translateX(-50%) scale(.38); }
  to { opacity: 1; transform: translateX(-50%) scale(1); }
}

.celebration-character::after {
  content: '';
  position: absolute;
  left: 4%;
  right: 4%;
  bottom: -3%;
  height: 8%;
  border-radius: 50%;
  background: #263e2e38;
  filter: blur(3px);
  z-index: -1;
}

.celebration-character__figure {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100%;
  transform-origin: 50% 95%;
}

.celebration-character__portrait {
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
  filter: drop-shadow(0 3px 2px #192e2945);
  -webkit-user-drag: none;
}

.celebration-character.is-celebrating .celebration-character__figure {
  animation: mayor-celebration-hop 2s ease-in-out 3;
}

@keyframes mayor-celebration-hop {
  0%, 62%, 100% { transform: translateY(0) rotate(0); }
  10% { transform: translateY(-7%) rotate(-3deg); }
  22% { transform: translateY(0) rotate(2deg); }
  34% { transform: translateY(-3%) rotate(3deg); }
  48% { transform: translateY(0) rotate(-2deg); }
}

@media (prefers-reduced-motion: reduce) {
  .celebration-character.is-ready { animation: none; }
  .celebration-character.is-celebrating .celebration-character__figure {
    animation: none;
  }
}