/* Individual translate/rotate properties preserve the artwork's base transforms. */
.motion-enabled .button {
  transition: background .2s ease, color .2s ease, box-shadow .28s ease,
    translate .4s cubic-bezier(.2, 1.65, .35, 1), rotate .4s cubic-bezier(.2, 1.65, .35, 1);
}
@media (hover: hover) and (pointer: fine) {
  .motion-enabled .button:hover { translate: none; rotate: none; }
  .motion-enabled .button:active { translate: none; rotate: none; }
  .motion-enabled .meal-image-link img { transition: transform .65s cubic-bezier(.18, .8, .22, 1); }
  .motion-enabled .meal-image-link:hover img { transform: scale(1.055); }
}

.motion-ready [data-reveal] {
  opacity: 0;
  translate: 0 55px;
  rotate: var(--reveal-turn, -2.5deg);
  scale: .96;
}
.motion-ready [data-reveal].is-visible {
  opacity: 1; translate: 0 var(--scroll-y, 0px); rotate: var(--scroll-tilt, 0deg); scale: 1;
}
.motion-ready [data-reveal].is-visible:not(.reveal-complete) {
  animation: reveal-arrive .95s cubic-bezier(.18, .9, .25, 1.12) var(--reveal-delay, 0ms) backwards;
}
.motion-ready [data-reveal]:focus-within {
  opacity: 1; translate: 0 var(--scroll-y, 0px); rotate: var(--scroll-tilt, 0deg); scale: 1;
  animation: none !important;
}
.motion-enabled .hero-copy { animation: hero-arrive .9s cubic-bezier(.15, .85, .3, 1) both; }
.motion-enabled .hero-visual { animation: hero-arrive 1.1s cubic-bezier(.15, .85, .3, 1) .1s both; }
.motion-enabled .hero-copy:focus-within { animation: none; }
.motion-enabled .scroll-layer {
  translate: 0 var(--scroll-y, 0px);
  rotate: var(--scroll-tilt, 0deg);
}
.motion-enabled [data-parallax] {
  translate: 0 var(--parallax-y, 0px);
  rotate: var(--parallax-angle, 0deg);
}
.motion-enabled .orbit-sticker.motion-seen { animation: sticker-arrive 1s cubic-bezier(.15, 1.25, .35, 1) .2s both; }
.motion-enabled .faq-icon:after { transition: transform .35s cubic-bezier(.18, 1.5, .35, 1); }
.motion-enabled details[open] .faq-answer { animation: answer-arrive .3s ease-out both; }

/* A simple, decorative ribbon; its accessible text is supplied by the parent. */
.scroll-ribbon { overflow: hidden; }
.ribbon-track { display: flex; width: max-content; }
.ribbon-copy { flex: 0 0 auto; }
.motion-enabled .ribbon-track {
  animation: ribbon-travel 22s linear infinite;
  animation-play-state: paused;
}
.motion-enabled .scroll-ribbon.ribbon-in-view .ribbon-track { animation-play-state: running; }
.motion-enabled .scroll-ribbon:hover .ribbon-track,
.motion-enabled .scroll-ribbon:focus-within .ribbon-track { animation-play-state: paused; }

/* The illustration is complete by default. JavaScript adds staged exploration. */
.prep-playground .ingredient {
  transform-box: fill-box;
  transform-origin: center;
  opacity: 1;
  translate: 0 0;
  rotate: 0deg;
  scale: 1;
}
.motion-enabled .prep-playground .ingredient {
  transition: translate .7s cubic-bezier(.22, 1.2, .35, 1), rotate .7s cubic-bezier(.22, 1.2, .35, 1),
    scale .7s cubic-bezier(.22, 1.2, .35, 1), opacity .28s ease;
}
.motion-enabled .prep-playground .ingredient-rice { transition-delay: .03s; }
.motion-enabled .prep-playground .ingredient-chicken { transition-delay: .14s; }
.motion-enabled .prep-playground .ingredient-pepper { transition-delay: .27s; }
.motion-enabled .prep-playground .ingredient-lid { transition-delay: .05s; }
.prep-playground[data-stage="1"] .ingredient-rice { translate: 0 -70px; rotate: -8deg; scale: .92; }
.prep-playground[data-stage="1"] .ingredient-chicken { translate: -30px -140px; rotate: -18deg; scale: .8; opacity: 0; }
.prep-playground[data-stage="1"] .ingredient-pepper { translate: 40px -170px; rotate: 22deg; scale: .8; opacity: 0; }
.prep-playground:not([data-stage="3"]) .ingredient-lid { translate: 135px -55px; rotate: 12deg; scale: .93; opacity: 0; }
.motion-enabled .prep-playground.is-replaying .ingredient { transition-duration: .48s; }
.motion-enabled .prep-playground.is-replaying .ingredient-rice { transition-delay: 0s; }
.motion-enabled .prep-playground.is-replaying .ingredient-chicken { transition-delay: .08s; }
.motion-enabled .prep-playground.is-replaying .ingredient-pepper { transition-delay: .16s; }
.motion-enabled .prep-playground.is-replaying .ingredient-lid { transition-delay: 0s; }
.motion-enabled [data-prep-step], .motion-enabled [data-prep-replay] {
  transition: background .2s ease, color .2s ease, translate .25s cubic-bezier(.2, 1.4, .35, 1);
}
[data-prep-replay]:disabled { cursor: not-allowed; opacity: .5; }
@media (hover: hover) and (pointer: fine) {
  .motion-enabled [data-prep-step]:hover, .motion-enabled [data-prep-replay]:hover { translate: none; }
}

#motion-toggle { cursor: pointer; }
#motion-toggle .motion-icon { display: inline-block; line-height: 1; }
.motion-enabled #motion-toggle .motion-icon { transition: rotate .5s cubic-bezier(.2, 1.4, .35, 1); }
.motion-enabled #motion-toggle:hover .motion-icon { rotate: 70deg; }
#motion-toggle[aria-pressed="false"] .motion-icon { opacity: .55; }

/* The visible off state also cancels effects declared by the main stylesheet. */
html.motion-off { scroll-behavior: auto !important; }
.motion-off *, .motion-off *:before, .motion-off *:after {
  animation: none !important;
  transition: none !important;
  scroll-behavior: auto !important;
}
.motion-off [data-reveal] { opacity: 1 !important; translate: none !important; rotate: none !important; scale: none !important; }
.motion-off [data-parallax] { translate: none !important; rotate: none !important; }
.motion-off .scroll-layer, .motion-off .ribbon-track { translate: none !important; rotate: none !important; }
.motion-off .button:hover { transform: none; translate: none; rotate: none; }
.motion-off .meal-card:hover { transform: rotate(var(--card-tilt, 0deg)); }
.motion-off .meal-image-link:hover img { transform: none; }
.motion-off .text-link:hover span { transform: none; }

/* CSS fallback covers first paint and visits where JavaScript is unavailable. */
@media (prefers-reduced-motion: reduce) {
  html:not(.motion-enabled) { scroll-behavior: auto !important; }
  html:not(.motion-enabled) *, html:not(.motion-enabled) *:before, html:not(.motion-enabled) *:after {
    animation: none !important;
    transition: none !important;
  }
}
@keyframes hero-arrive {
  from { opacity: 0; translate: 0 42px; }
  to { opacity: 1; translate: 0 0; }
}
@keyframes sticker-arrive {
  0% { opacity: 0; scale: .65; }
  65% { opacity: 1; scale: 1.07; }
  100% { opacity: 1; scale: 1; }
}
@keyframes reveal-arrive {
  from { opacity: 0; translate: 0 calc(55px + var(--scroll-y, 0px)); rotate: var(--reveal-turn, -2.5deg); scale: .96; }
  to { opacity: 1; translate: 0 var(--scroll-y, 0px); rotate: var(--scroll-tilt, 0deg); scale: 1; }
}
@keyframes ribbon-travel { to { translate: -50% 0; } }
@keyframes answer-arrive {
  from { opacity: 0; translate: 0 -5px; }
  to { opacity: 1; translate: 0 0; }
}
/* The longer phrase list keeps a calm reading speed. */
.motion-enabled .ribbon-track{animation-duration:32s}

/* A slow change in the orange cut-paper shape gives the photo a little life.
   The photo itself, type, and click targets hold still. No layout is animated. */
.motion-enabled .hero-visual:before {
  animation: soft-shape 12s ease-in-out infinite alternate;
  animation-play-state: paused;
  transform-origin: center;
}
.motion-enabled .hero-visual.ambient-in-view:before { animation-play-state: running; }
.motion-enabled .hero-visual:hover:before,
.motion-enabled .hero-visual:focus-within:before { animation-play-state: paused; }
.motion-enabled .scroll-spark {
  transform-box: view-box;
  transform-origin: center;
  rotate: var(--spark-turn, 0deg);
  transition: rotate .15s linear;
}
.motion-enabled .mobile-nav:not([hidden]) { animation: menu-arrive .22s ease-out both; }
.motion-enabled .demo-meal-details[open] > p { animation: answer-arrive .24s ease-out both; }
.motion-enabled .demo-header-cart [data-cart-count].bag-count-pop { animation: bag-count-pop .5s cubic-bezier(.2,.8,.3,1) both; }
.motion-enabled .button > span[aria-hidden],
.motion-enabled .demo-primary > span[aria-hidden] { transition: transform .25s ease; }
@media (hover: hover) and (pointer: fine) {
  .motion-enabled .button:hover > span[aria-hidden],
  .motion-enabled .demo-primary:hover > span[aria-hidden] { transform: translate(3px,-3px); }
}
.motion-off .scroll-spark { rotate: none !important; }
.motion-off .button > span[aria-hidden],
.motion-off .demo-primary > span[aria-hidden] { transform: none !important; }
html.motion-paused *, html.motion-paused *:before, html.motion-paused *:after { animation-play-state: paused !important; }
@keyframes soft-shape {
  from { transform: rotate(5deg) scale(1.025,.965); }
  to { transform: rotate(17deg) scale(.965,1.025); }
}
@keyframes bag-count-pop {
  0%,100% { scale: 1; }
  45% { scale: 1.28; }
}
@keyframes menu-arrive {
  from { opacity: 0; translate: 0 -7px; }
  to { opacity: 1; translate: 0 0; }
}

/* Static photo frames roll into place once. Text and controls keep their places,
   and the source photos keep their existing crops and base transforms. */
.motion-enabled .photo-roll.photo-in-view:not(.photo-roll-complete) {
  animation: photo-roll-in 1.05s cubic-bezier(.16,.9,.25,1) both;
}
.motion-enabled .scroll-spark.spark-in-view:not(.spark-enter-complete) {
  animation: spark-unfurl 1.15s cubic-bezier(.2,.8,.25,1) both;
}
.motion-enabled .home-faq details[open] .faq-answer {
  animation: faq-unfold .4s cubic-bezier(.2,.7,.3,1) both;
}
.motion-off .photo-roll {
  translate: none !important;
  rotate: none !important;
  scale: none !important;
}
.motion-off .scroll-spark { scale: none !important; }
@keyframes photo-roll-in {
  from { translate: var(--photo-entry-x, -48px) 28px; rotate: var(--photo-entry-turn, -6deg); scale: .96; }
  to { translate: 0 0; rotate: 0deg; scale: 1; }
}
@keyframes spark-unfurl {
  0% { rotate: calc(var(--spark-turn, 0deg) - 160deg); scale: .55; }
  72% { rotate: calc(var(--spark-turn, 0deg) + 12deg); scale: 1.1; }
  100% { rotate: var(--spark-turn, 0deg); scale: 1; }
}
@keyframes faq-unfold {
  from { opacity: 0; translate: 0 -13px; }
  to { opacity: 1; translate: 0 0; }
}
/* The answer moves; the question stays easy to click while it appears. */
.motion-ready .faq-list details[data-reveal]{translate:none;rotate:none;scale:1}
.motion-ready .faq-list details[data-reveal].is-visible:not(.reveal-complete){animation:faq-question-arrive .4s ease-out var(--reveal-delay,0ms) backwards}
@keyframes faq-question-arrive{from{opacity:0}to{opacity:1}}