.shoebox {
  display: block;
  width: min(70vw, 340px);
  height: auto;
  overflow: visible;
}

.shoebox .base { fill: #c98b4f; }
.shoebox .base-shade { fill: #a86f38; }
.shoebox .lid-top { fill: #d99a5b; }
.shoebox .lid-edge { fill: #b5773c; }
.shoebox .shadow { fill: rgb(0 0 0 / 0.18); }
.shoebox .eye-white { fill: #fff; }
.shoebox .pupil { fill: #2b2118; }
.shoebox .mouth-inside { fill: #4a1f1f; }
.shoebox .tongue { fill: #e8707e; }

.shoebox .box,
.shoebox .lid,
.shoebox .mouth,
.shoebox .eye,
.shoebox .shadow {
  transform-box: fill-box;
  transform-origin: 50% 50%;
}

.shoebox .box { animation: shoebox-bob 2.4s ease-in-out infinite; }
.shoebox .shadow { animation: shoebox-shadow 2.4s ease-in-out infinite; }
.shoebox .mouth { animation: shoebox-talk 2.4s ease-in-out infinite; }
.shoebox .eye { animation: shoebox-blink 4.8s ease-in-out infinite; }

/* The lid hinges on its left edge and lifts in time with the mouth. */
.shoebox .lid {
  transform-origin: 0% 100%;
  animation: shoebox-lid 2.4s ease-in-out infinite;
}

/* A burst of chatter, then a pause before the loop repeats. */
@keyframes shoebox-talk {
  0%, 66%, 100% { transform: scaleY(0.12); }
  8% { transform: scaleY(1); }
  16% { transform: scaleY(0.4); }
  24% { transform: scaleY(0.9); }
  32% { transform: scaleY(0.2); }
  42% { transform: scaleY(0.8); }
  50% { transform: scaleY(0.5); }
  58% { transform: scaleY(1); }
}

@keyframes shoebox-lid {
  0%, 66%, 100% { transform: rotate(0deg); }
  8% { transform: rotate(-5deg); }
  16% { transform: rotate(-2deg); }
  24% { transform: rotate(-4.5deg); }
  32% { transform: rotate(-1deg); }
  42% { transform: rotate(-4deg); }
  50% { transform: rotate(-2.5deg); }
  58% { transform: rotate(-5deg); }
}

@keyframes shoebox-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

@keyframes shoebox-shadow {
  0%, 100% { transform: scaleX(1); }
  50% { transform: scaleX(0.92); }
}

@keyframes shoebox-blink {
  0%, 46%, 50%, 100% { transform: scaleY(1); }
  48% { transform: scaleY(0.1); }
}

@media (prefers-reduced-motion: reduce) {
  .shoebox .box,
  .shoebox .lid,
  .shoebox .mouth,
  .shoebox .eye,
  .shoebox .shadow {
    animation: none;
  }
}