/* Staging-only rabbit animation. Self-host. No glow/blur. */
.demo-banner {
  background: #141414;
  color: #A3FF8F;
  font: 600 12px/1.4 Montserrat, system-ui, sans-serif;
  letter-spacing: .04em;
  text-align: center;
  padding: 8px 12px;
  border-bottom: 1px solid #222;
}
/* Smaller surface than H1 column; reserved box prevents CLS */
.hero-visual .mascot-slot {
  width: 100%;
  max-width: 200px;
  aspect-ratio: 270 / 523;
  position: relative;
  pointer-events: none;
  justify-self: end;
  align-self: end;
}
@media (max-width: 600px) {
  .hero-visual .mascot-slot {
    justify-self: center;
    max-width: 160px;
  }
}
.mascot-slot img.mascot,
.mascot-slot img.mascot-base {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 270 / 523;
  object-fit: contain;
}
.mascot-slot .eyes {
  position: absolute;
  left: 50%;
  top: 27%;
  width: 42%;
  height: auto;
  margin-left: -21%;
  transform-origin: center 55%;
  pointer-events: none;
  opacity: 0;
}
.mascot-slot.is-animated .eyes {
  opacity: 1;
  animation: krolik-blink 5.2s ease-in-out infinite;
}
@keyframes krolik-blink {
  0%, 90%, 100% { transform: scaleY(1); }
  92% { transform: scaleY(0.08); }
  94% { transform: scaleY(1); }
}
#krolik-kick {
  transition: transform .7s ease-out;
}
#krolik-kick.krolik-enter {
  transform: translateX(12px);
}
@media (prefers-reduced-motion: reduce) {
  .mascot-slot.is-animated .eyes { animation: none; opacity: 1; }
  #krolik-kick { transition: none; transform: none; }
}