/* The default lid is open. Only an explicitly playing ancestor adds motion. */
.box-scene-art { overflow: visible; }
.box-scene-lid { transform-box: view-box; transform-origin: 180px 106px; }
.box-scene-food, .box-scene-bagels, .box-scene-sandwiches, .box-scene-coffee, .box-scene-shadow, .box-scene-steam, .box-scene-sparkles { transform-box: fill-box; transform-origin: center; }
.catering-motion.is-playing .box-scene-lid { animation: box-scene-open 3.2s cubic-bezier(0.3, 0.6, 0.2, 1) both; }
.catering-motion.is-playing .box-scene-lid-inside { animation: box-scene-inside 3.2s both; }
.catering-motion.is-playing .box-scene-food { animation: box-scene-reveal 3.2s both; }
.catering-motion.is-playing .box-scene-bagels { animation: box-scene-bagels 3.2s both; }
.catering-motion.is-playing .box-scene-sandwiches { animation: box-scene-sandwiches 3.2s both; }
.catering-motion.is-playing .box-scene-coffee { animation: box-scene-coffee 3.2s both; }
.catering-motion.is-playing .box-scene-shadow { animation: box-scene-shadow 3.2s both; }
.catering-motion.is-playing .box-scene-steam { animation: box-scene-steam 3.2s both; }
.catering-motion.is-playing .box-scene-sparkles { animation: box-scene-sparkles 3.2s both; }
@keyframes box-scene-open {
  0%, 10% { transform: scaleY(-0.857); }
  35% { transform: scaleY(0.08); }
  61% { transform: scaleY(1.06); }
  73% { transform: scaleY(0.97); }
  86%, 100% { transform: none; }
}
@keyframes box-scene-inside {
  0%, 28% { opacity: 0; }
  43%, 100% { opacity: 1; }
}
@keyframes box-scene-reveal {
  0%, 17% { opacity: 0; }
  34%, 100% { opacity: 1; }
}
@keyframes box-scene-bagels {
  0%, 23% { transform: translateY(7px); }
  46% { transform: translateY(-3px) rotate(-2deg); }
  62%, 100% { transform: none; }
}
@keyframes box-scene-sandwiches {
  0%, 27% { transform: translateY(6px) rotate(3deg); }
  51% { transform: translateY(-2px) rotate(-1deg); }
  67%, 100% { transform: none; }
}
@keyframes box-scene-coffee {
  0%, 31% { transform: translateY(5px); }
  54% { transform: translateY(-2px) rotate(2deg); }
  69%, 100% { transform: none; }
}
@keyframes box-scene-shadow {
  0%, 10% { opacity: 0.18; transform: scaleX(0.9); }
  66%, 100% { opacity: 0.14; transform: none; }
}
@keyframes box-scene-steam {
  0%, 56% { opacity: 0; transform: translateY(4px); }
  80% { opacity: 0.65; transform: translateY(-2px); }
  100% { opacity: 0.6; transform: none; }
}
@keyframes box-scene-sparkles {
  0%, 52% { opacity: 0; transform: scale(0.85); }
  73% { opacity: 0.9; transform: scale(1.04); }
  100% { opacity: 0.65; transform: none; }
}