/* Finished artwork is the default. Motion is a short, optional enhancement. */
.catering-motion { display: flex; align-items: center; justify-content: center; gap: clamp(0.6rem, 2vw, 2rem); width: 100%; min-height: 180px; margin: 0; padding: 0 1.2rem; overflow: hidden; border: 1px solid #d8decc; border-radius: 12px; background: linear-gradient(115deg, #f6f4e9, #e9eedf); }
.catering-motion-stage { flex: 0 1 265px; min-width: 0; height: 178px; }
.catering-motion-art { width: 100%; height: 100%; overflow: visible; }
.catering-motion-caption { flex: 0 1 185px; padding-block: 0.6rem; }
.catering-motion-line { display: block; color: var(--green, #304c3b); font-family: var(--font-display, Georgia, serif); font-size: clamp(1.35rem, 2.2vw, 1.9rem); font-weight: 500; line-height: 1.2; letter-spacing: -0.025em; }
.catering-motion-replay { display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem; min-width: 86px; min-height: 44px; margin-top: 0.6rem; padding: 0.5rem 0.75rem; border: 1px solid #c3cbb6; border-radius: 99px; background: #fffdf6; color: var(--green, #304c3b); font-family: var(--font-body, sans-serif); font-size: 0.73rem; font-weight: 600; line-height: 1.3; cursor: pointer; transition: background-color 160ms ease, border-color 160ms ease; }
.catering-motion-replay svg { flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.catering-motion-replay:hover:not(:disabled) { border-color: var(--orange, #b64f28); background: #fff; color: var(--orange, #b64f28); }
.catering-motion-replay:focus-visible { outline: 3px solid var(--focus, #28614c); outline-offset: 3px; }
.catering-motion-replay:disabled { color: #626c58; cursor: default; }
.catering-motion-base, .catering-motion-cheese, .catering-motion-filling, .catering-motion-top, .catering-motion-shadow, .catering-motion-rays, .catering-motion-seeds { transform-box: fill-box; transform-origin: center; }
.catering-motion-rays { opacity: 0.65; }
.catering-motion.is-playing .catering-motion-base { animation: catering-motion-base 2.8s both; }
.catering-motion.is-playing .catering-motion-cheese { animation: catering-motion-cheese 2.8s both; }
.catering-motion.is-playing .catering-motion-filling { animation: catering-motion-filling 2.8s both; }
.catering-motion.is-playing .catering-motion-top { animation: catering-motion-top 2.8s both; }
.catering-motion.is-playing .catering-motion-shadow { animation: catering-motion-shadow 2.8s both; }
.catering-motion.is-playing .catering-motion-rays { animation: catering-motion-rays 2.8s both; }
.catering-motion.is-playing .catering-motion-seeds { animation: catering-motion-seeds 2.8s both; }
.browse-category-grid.is-arriving { perspective: 1000px; }
.browse-category-grid.is-arriving > .browse-category-card { animation: catering-motion-tile-in 500ms cubic-bezier(0.2, 0.7, 0.2, 1) both; transform-origin: center bottom; }
.browse-category-grid.is-arriving > .browse-category-card:nth-child(2) { animation-delay: 100ms; }
.browse-category-grid.is-arriving > .browse-category-card:nth-child(3) { animation-delay: 200ms; }
.browse-category-grid.is-arriving > .browse-category-card:nth-child(4) { animation-delay: 300ms; }
.browse-category-grid.is-arriving > .browse-category-card:nth-child(5) { animation-delay: 400ms; }
.browse-category-grid.is-arriving > .browse-category-card:nth-child(6) { animation-delay: 500ms; }
@keyframes catering-motion-base {
  0% { opacity: 0; transform: translate(-18px, -35px) rotate(-7deg); }
  6% { opacity: 1; }
  19% { transform: translate(0, 3px) rotate(1deg) scale(1.025, 0.95); }
  26%, 100% { opacity: 1; transform: none; }
}
@keyframes catering-motion-cheese {
  0%, 12% { opacity: 0; transform: translate(18px, -56px) rotate(9deg); }
  18% { opacity: 1; }
  35% { transform: translate(0, 3px) rotate(-2deg); }
  44%, 100% { opacity: 1; transform: none; }
}
@keyframes catering-motion-filling {
  0%, 27% { opacity: 0; transform: translate(-14px, -70px) rotate(-8deg); }
  33% { opacity: 1; }
  49% { transform: translate(0, 3px) rotate(1deg) scale(1.02, 0.95); }
  57%, 100% { opacity: 1; transform: none; }
}
@keyframes catering-motion-top {
  0%, 42% { opacity: 0; transform: translate(15px, -70px) rotate(10deg); }
  49% { opacity: 1; }
  68% { transform: translate(0, 5px) rotate(-2deg) scale(1.025, 0.95); }
  76% { transform: translate(0, -3px) rotate(1deg); }
  86%, 100% { opacity: 1; transform: none; }
}
@keyframes catering-motion-shadow {
  0% { opacity: 0.04; transform: scale(0.75); }
  22% { opacity: 0.12; transform: scale(1); }
  67% { opacity: 0.12; }
  73% { opacity: 0.22; transform: scale(1.05); }
  90%, 100% { opacity: 0.18; transform: none; }
}
@keyframes catering-motion-rays {
  0%, 71% { opacity: 0; transform: scale(0.88); }
  85% { opacity: 1; transform: scale(1.025); }
  100% { opacity: 0.65; transform: none; }
}
@keyframes catering-motion-seeds {
  0%, 68% { transform: none; }
  76% { transform: translateY(-5px); }
  88%, 100% { transform: none; }
}
@keyframes catering-motion-tile-in {
  from { transform: translateY(8px) rotateX(4deg); }
  to { transform: none; }
}
@media (min-width: 1101px) {
  .browse-intro-with-art > .catering-motion { flex-direction: column; gap: 0; min-height: 180px; padding: 4px 8px; }
  .browse-intro-with-art > .catering-motion .catering-motion-stage { flex: 0 0 auto; width: 190px; max-width: 100%; height: 126px; }
  .browse-intro-with-art > .catering-motion .catering-motion-caption { display: flex; flex: 0 0 auto; align-items: center; justify-content: space-between; gap: 0.4rem; width: 100%; padding: 0; }
  .browse-intro-with-art > .catering-motion .catering-motion-line { font-size: 0.88rem; }
  .browse-intro-with-art > .catering-motion .catering-motion-replay { min-width: 76px; margin-top: 0; padding-inline: 0.55rem; }
}
@media (max-width: 1100px) {
  .browse-intro-with-art > .catering-motion { min-height: 140px; }
  .browse-intro-with-art > .catering-motion .catering-motion-stage { height: 138px; }
}
@media (max-width: 680px) {
  .catering-motion { min-height: 140px; gap: 0.5rem; padding-inline: 0.6rem; }
  .catering-motion-stage { flex-basis: 200px; height: 138px; }
  .catering-motion-caption { flex-basis: 130px; }
  .catering-motion-line { font-size: 1.25rem; }
  .catering-motion-replay { margin-top: 0.35rem; padding-inline: 0.65rem; font-size: 0.7rem; }
}
@media (prefers-reduced-motion: reduce) {
  .catering-motion:not(.is-manual) * { animation: none !important; transition: none !important; }
  .browse-category-grid.is-arriving > .browse-category-card { animation: none !important; }
}
@media print {
  .catering-motion-replay { display: none; }
  .catering-motion *, .catering-motion.is-playing * { animation: none !important; }
  .browse-category-grid.is-arriving > .browse-category-card { animation: none !important; }
}

.catering-motion-replay[hidden], .catering-motion-preference[hidden] { display: none; }
.catering-motion-controls { min-width: 0; }
.catering-motion-preference { display: block; max-width: 22ch; margin-top: 0.5rem; color: #5e675f; font-size: 0.65rem; line-height: 1.45; }
@media (min-width: 1101px) { .browse-intro-with-art .catering-motion-preference { max-width: 14ch; } }