.l2-character {
  --l2-shadow: drop-shadow(0 18px 26px rgb(35 64 151 / 0.24));
  --l2-tint: saturate(1) brightness(1) hue-rotate(0deg);
  display: inline-block;
  inline-size: clamp(96px, 16vw, 192px);
  aspect-ratio: 245 / 304;
  transform-origin: 50% 84%;
  filter: var(--l2-shadow) var(--l2-tint);
  will-change: transform, filter;
  animation: l2-idle 3.8s ease-in-out infinite;
}

.l2-character img,
img.l2-character {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
}

.l2-reaction-happy {
  --l2-tint: saturate(1.18) brightness(1.06);
  animation: l2-happy 860ms cubic-bezier(.2, .8, .2, 1) 1, l2-idle 3.8s ease-in-out 860ms infinite;
}

.l2-reaction-sad {
  --l2-tint: saturate(.72) brightness(.92) hue-rotate(-8deg);
  animation: l2-sad 1200ms ease-in-out 1, l2-sad-idle 4.4s ease-in-out 1200ms infinite;
}

.l2-reaction-fear {
  --l2-tint: saturate(.88) brightness(1.08) hue-rotate(8deg);
  animation: l2-fear 620ms steps(2, jump-none) 2, l2-idle 3.8s ease-in-out 1240ms infinite;
}

.l2-reaction-surprise {
  --l2-tint: saturate(1.12) brightness(1.12);
  animation: l2-surprise 820ms cubic-bezier(.16, 1, .3, 1) 1, l2-idle 3.8s ease-in-out 820ms infinite;
}

.l2-reaction-neutral {
  --l2-tint: saturate(.96) brightness(1);
  animation: l2-neutral 900ms ease-out 1, l2-idle 3.8s ease-in-out 900ms infinite;
}

.l2-reaction-angry {
  --l2-tint: saturate(1.2) brightness(.94) hue-rotate(-18deg);
  animation: l2-angry 760ms cubic-bezier(.3, 0, .15, 1) 1, l2-angry-idle 2.8s ease-in-out 760ms infinite;
}

.l2-reaction-disgust {
  --l2-tint: saturate(.95) brightness(.96) hue-rotate(28deg);
  animation: l2-disgust 980ms cubic-bezier(.25, .8, .25, 1) 1, l2-disgust-idle 3.6s ease-in-out 980ms infinite;
}

@keyframes l2-idle {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
  38% { transform: translate3d(0, -5px, 0) rotate(-1.2deg) scale(1.01); }
  68% { transform: translate3d(0, 2px, 0) rotate(1deg) scale(.995); }
}

@keyframes l2-happy {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
  28% { transform: translate3d(0, -18px, 0) rotate(-5deg) scale(1.06); }
  52% { transform: translate3d(0, 2px, 0) rotate(4deg) scale(.99); }
  74% { transform: translate3d(0, -8px, 0) rotate(-2deg) scale(1.025); }
}

@keyframes l2-sad {
  0% { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
  42%, 100% { transform: translate3d(0, 10px, 0) rotate(-3deg) scale(.965); }
}

@keyframes l2-sad-idle {
  0%, 100% { transform: translate3d(0, 8px, 0) rotate(-2deg) scale(.97); }
  50% { transform: translate3d(0, 12px, 0) rotate(-2.8deg) scale(.965); }
}

@keyframes l2-fear {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
  20% { transform: translate3d(-6px, -3px, 0) rotate(-4deg) scale(1.02); }
  40% { transform: translate3d(7px, 2px, 0) rotate(4deg) scale(.99); }
  60% { transform: translate3d(-5px, 1px, 0) rotate(-3deg) scale(1.01); }
  80% { transform: translate3d(4px, -2px, 0) rotate(2deg) scale(1); }
}

@keyframes l2-surprise {
  0% { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
  26% { transform: translate3d(0, -12px, 0) rotate(0deg) scale(1.14); }
  58% { transform: translate3d(0, 0, 0) rotate(0deg) scale(1.06); }
  100% { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
}

@keyframes l2-neutral {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
  45% { transform: translate3d(0, -2px, 0) rotate(.4deg) scale(1.005); }
}

@keyframes l2-angry {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
  25% { transform: translate3d(5px, -2px, 0) rotate(3deg) scale(1.035); }
  50% { transform: translate3d(-5px, 0, 0) rotate(-3deg) scale(1.03); }
  76% { transform: translate3d(3px, 1px, 0) rotate(2deg) scale(1.015); }
}

@keyframes l2-angry-idle {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(1deg) scale(1.01); }
  50% { transform: translate3d(1px, -3px, 0) rotate(-1deg) scale(1.015); }
}

@keyframes l2-disgust {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg) skewX(0deg) scale(1); }
  34% { transform: translate3d(-6px, 2px, 0) rotate(-7deg) skewX(-3deg) scale(.985); }
  70% { transform: translate3d(2px, -1px, 0) rotate(3deg) skewX(1deg) scale(1); }
}

@keyframes l2-disgust-idle {
  0%, 100% { transform: translate3d(0, 1px, 0) rotate(-1.4deg) scale(.99); }
  50% { transform: translate3d(-2px, 3px, 0) rotate(-2.4deg) scale(.985); }
}

@media (prefers-reduced-motion: reduce) {
  .l2-character,
  .l2-reaction-happy,
  .l2-reaction-sad,
  .l2-reaction-fear,
  .l2-reaction-surprise,
  .l2-reaction-neutral,
  .l2-reaction-angry,
  .l2-reaction-disgust {
    animation-duration: 1ms;
    animation-iteration-count: 1;
  }
}