/* Mascot sizes and motions — same rules as PMS */

.pms-mascot {
  display: block;
  flex-shrink: 0;
  width: 120px;
  height: 120px;
  object-fit: contain;
  user-select: none;
  pointer-events: none;
  transform-origin: 50% 85%;
}
.pms-mascot.is-xs { width: 40px; height: 40px; }
.pms-mascot.is-sm { width: 72px; height: 72px; }
.pms-mascot.is-md { width: 120px; height: 120px; }
.pms-mascot.is-lg { width: 168px; height: 168px; }
.pms-mascot.is-xl { width: 220px; height: 220px; }

.pms-mascot.is-float { animation: mascotFloat 3.6s ease-in-out infinite; }
.pms-mascot.is-wave { animation: mascotWave 2.8s ease-in-out infinite; }
.pms-mascot.is-run { animation: mascotRun 0.62s ease-in-out infinite; }
.pms-mascot.is-bounce { animation: mascotBounce 1.5s cubic-bezier(0.3, 0.7, 0.4, 1) infinite; }
.pms-mascot.is-pop { animation: mascotPop 0.6s cubic-bezier(0.2, 1.4, 0.4, 1) both, mascotFloat 3.6s ease-in-out 0.6s infinite; }
.pms-mascot.is-shake { animation: mascotShake 0.7s ease-in-out both, mascotFloat 3.6s ease-in-out 0.7s infinite; }
.pms-mascot.is-nod { animation: mascotNod 2.4s ease-in-out infinite; }
.pms-mascot.is-sway { animation: mascotSway 3.2s ease-in-out infinite; }
.pms-mascot.is-breathe { animation: mascotBreathe 3.8s ease-in-out infinite; }

@keyframes mascotFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes mascotWave { 0%, 100% { transform: rotate(0) translateY(0); } 20% { transform: rotate(-4deg) translateY(-2px); } 40% { transform: rotate(3deg) translateY(-3px); } 60% { transform: rotate(-3deg) translateY(-2px); } 80% { transform: rotate(1deg) translateY(0); } }
@keyframes mascotRun { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-6px) rotate(2deg); } }
@keyframes mascotBounce { 0%, 100% { transform: translateY(0) scale(1, 1); } 12% { transform: translateY(0) scale(1.05, 0.94); } 45% { transform: translateY(-14px) scale(0.97, 1.04); } 78% { transform: translateY(0) scale(1.04, 0.96); } }
@keyframes mascotPop { 0% { transform: scale(0.6); opacity: 0; } 60% { transform: scale(1.08); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
@keyframes mascotShake { 0%, 100% { transform: translateX(0); } 15% { transform: translateX(-7px) rotate(-3deg); } 30% { transform: translateX(6px) rotate(3deg); } 45% { transform: translateX(-5px) rotate(-2deg); } 60% { transform: translateX(4px) rotate(2deg); } 75% { transform: translateX(-2px); } }
@keyframes mascotNod { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-3deg); } 75% { transform: rotate(3deg); } }
@keyframes mascotSway { 0%, 100% { transform: rotate(-2deg); } 50% { transform: rotate(2deg); } }
@keyframes mascotBreathe { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.03, 0.97); } }

.pms-mascot-pic { display: contents; }

.hero-slide-content .pms-mascot,
.ds-hero .pms-mascot,
.ct-hero .pms-mascot,
.final-cta .pms-mascot,
.gg-empty .pms-mascot,
.st-empty .pms-mascot,
.pf-empty .pms-mascot,
.cp-empty .pms-mascot,
.ds-loading .pms-mascot,
.ds-empty .pms-mascot,
.pub-error .pms-mascot {
  margin-inline: auto;
  margin-bottom: 0.65rem;
  filter: drop-shadow(0 14px 22px rgba(38, 38, 45, 0.12));
}

html body .hero-slide-content .hero-figure .pms-mascot.is-xl {
  width: clamp(280px, 34vw, 440px);
  height: clamp(280px, 34vw, 440px);
  margin: 0;
}
.hero-slide:not(.active) .pms-mascot,
.hero-slide:not(.active) .pms-mascot-pic { display: none; }
.st-ordered {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  overflow: visible;
}
.st-ordered .pms-mascot { margin: 0; filter: none; flex-shrink: 0; }
.ct-status.ok {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  text-align: center;
}
.ds-loading .pms-mascot { margin-bottom: 0.35rem; }

.error-page .error-icon {
  width: 180px;
  height: 180px;
  margin: 0 auto 0.35rem;
  background: url('../../../../uploads/mascot/web/search.webp') center / contain no-repeat;
  animation: mascotFloat 3.6s ease-in-out infinite;
}
.error-page .error-icon i { display: none; }

@media (max-width: 768px) {
  html body .hero-slide-content .hero-figure .pms-mascot.is-xl {
    width: min(240px, 62vw);
    height: min(240px, 62vw);
    margin-inline: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pms-mascot,
  .error-page .error-icon { animation: none !important; }
}