.access-page > .login-mascot-runway {
  position: relative;
  z-index: 3;
  flex: 0 0 120px;
  width: 100%;
  min-height: 120px;
}

.login-mascot {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 112px;
  height: 149px;
  padding: 0;
  border: 0;
  border-radius: 40%;
  background: transparent;
  cursor: pointer;
  user-select: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  will-change: transform;
}

.login-mascot:focus-visible {
  outline: 2px dashed #d97e9f;
  outline-offset: 3px;
}

.mascot-facing,
.mascot-character,
.mascot-image {
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.mascot-facing {
  transform: scaleX(var(--mascot-facing, 1));
}

.mascot-character {
  transform-origin: 50% 90%;
}

.mascot-image {
  object-fit: contain;
  -webkit-user-drag: none;
}

.mascot-ground-shadow {
  position: absolute;
  left: 24%;
  right: 20%;
  bottom: 6%;
  height: 7%;
  border-radius: 50%;
  background: #a8768f25;
  filter: blur(3px);
  pointer-events: none;
}

.login-mascot-bubble {
  position: absolute;
  bottom: 143px;
  width: max-content;
  max-width: 180px;
  padding: 9px 13px;
  border: 1px solid #f1dbe5;
  border-radius: 15px 15px 15px 5px;
  background: #fffafdee;
  box-shadow: 0 4px 20px #a5557c0c;
  color: #a16b85;
  font-size: 11px;
  line-height: 1.6;
  text-align: center;
  transform: translateX(-50%);
  pointer-events: none;
}

.mascot-state-effects {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.mascot-state-effects i {
  position: absolute;
  left: 45%;
  top: 38%;
  opacity: 0;
  color: #e780a3;
  font-style: normal;
  font-size: 15px;
  animation-delay: calc(var(--n, 0) * -0.24s);
}

.mascot-state-effects i:nth-child(2) { --n: 1; left: 20%; color: #ab96d6; }
.mascot-state-effects i:nth-child(3) { --n: 2; left: 72%; color: #e4b268; }
.mascot-state-effects i:nth-child(4) { --n: 3; left: 32%; }
.mascot-state-effects i:nth-child(5) { --n: 4; left: 63%; color: #86a3d9; }
.mascot-state-effects i:nth-child(6) { --n: 5; left: 51%; }

.login-mascot[data-mood="run"] .mascot-character {
  animation: mascot-jog 0.38s ease-in-out infinite;
}

.login-mascot[data-mood="idle"] .mascot-character {
  animation: mascot-breathe 2s ease-in-out infinite;
}

.login-mascot[data-mood="wave"] .mascot-character {
  animation: mascot-wave 0.65s ease-in-out infinite;
}

.login-mascot[data-mood="jump"] .mascot-character {
  animation: mascot-jump 0.8s ease-in-out infinite;
}

.login-mascot[data-mood="shy"] .mascot-character {
  animation: mascot-shy 1.1s ease-in-out infinite;
}

.login-mascot[data-mood="heart"] .mascot-character {
  animation: mascot-heart 0.9s ease-in-out infinite;
}

.login-mascot[data-mood="spin"] .mascot-character {
  animation: mascot-spin 1.2s ease-in-out infinite;
}

.login-mascot[data-mood="dance"] .mascot-character {
  animation: mascot-dance 0.65s ease-in-out infinite;
}

.login-mascot[data-mood="sleep"] .mascot-character {
  animation: mascot-sleep 2.1s ease-in-out infinite;
}

.login-mascot[data-mood="celebrate"] .mascot-character {
  animation: mascot-jump 0.65s ease-in-out infinite;
}

.login-mascot[data-mood="heart"] .mascot-state-effects i,
.login-mascot[data-mood="celebrate"] .mascot-state-effects i {
  animation-name: mascot-float;
  animation-duration: 1.5s;
  animation-timing-function: ease-out;
  animation-iteration-count: infinite;
}

.login-mascot[data-mood="sleep"] .mascot-state-effects i {
  left: 73%;
  top: 28%;
  font-size: 12px;
  color: #a3a2bd;
  animation-name: mascot-snooze;
  animation-duration: 2s;
  animation-timing-function: ease-out;
  animation-iteration-count: infinite;
}

@keyframes mascot-jog {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50% { transform: translateY(-4px) rotate(2deg); }
}

@keyframes mascot-breathe {
  0%, 100% { transform: scaleY(1); }
  50% { transform: scaleY(1.025); }
}

@keyframes mascot-wave {
  0%, 100% { transform: rotate(-4deg) translateY(0); }
  50% { transform: rotate(3deg) translateY(-3px); }
}

@keyframes mascot-jump {
  0%, 100% { transform: translateY(0) scale(1.04, 0.96); }
  22% { transform: translateY(0) scale(1.08, 0.89); }
  52% { transform: translateY(-27px) scale(0.96, 1.05); }
  82% { transform: translateY(0) scale(1.08, 0.91); }
}

@keyframes mascot-shy {
  0%, 100% { transform: scale(0.96) rotate(-5deg); }
  50% { transform: scale(0.96) rotate(5deg); }
}

@keyframes mascot-heart {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.07) translateY(-3px); }
}

@keyframes mascot-spin {
  0% { transform: rotateY(0) translateY(0); }
  50% { transform: rotateY(180deg) translateY(-8px); }
  100% { transform: rotateY(360deg) translateY(0); }
}

@keyframes mascot-dance {
  0%, 100% { transform: translateX(-4px) rotate(-9deg); }
  50% { transform: translateX(4px) rotate(9deg); }
}

@keyframes mascot-sleep {
  0%, 100% { transform: rotate(-12deg) scaleY(1); }
  50% { transform: rotate(-12deg) scaleY(1.025); }
}

@keyframes mascot-float {
  0% { opacity: 0; transform: translateY(0) scale(0.5); }
  25% { opacity: 0.85; }
  100% { opacity: 0; transform: translateY(-68px) scale(1.15); }
}

@keyframes mascot-snooze {
  0% { opacity: 0; transform: translate(0, 0) scale(0.8); }
  25% { opacity: 0.9; }
  100% { opacity: 0; transform: translate(16px, -33px) scale(1.35); }
}

@media (max-width: 720px) {
  .access-page > .login-mascot-runway { flex-basis: 100px; min-height: 100px; }
  .login-mascot { width: 88px; height: 117px; }
  .login-mascot-bubble { bottom: 112px; font-size: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .login-mascot[data-mood="run"] .mascot-character { animation-duration: 0.55s; }
}