/* Motion is additive: the unanimated page remains the layout and accessibility fallback. */
.motion-ready .mascot { animation: none; }
.motion-ready .hero__copy, .motion-ready .hero__lead, .motion-ready .hero__actions { animation: none; }
.ingredient-confetti { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 50; }
.ingredient-confetti img { position: absolute; object-fit: contain; pointer-events: none; }
.food-slide[data-position='center'] .food-slide__product { pointer-events: auto; cursor: pointer; }
.food-slide__product:focus-visible { outline: 3px solid var(--red-dark); outline-offset: -8px; border-radius: 24px; }
.hero__visual .decor--pineapple { --depth: .8; }
.hero__visual .decor--cilantro { --depth: 1.4; }
.hero__visual .foreground { translate: calc(var(--px, 0px) * 1.6) calc(var(--py, 0px) * 1.6); transition: translate 450ms ease-out; }
@keyframes drift {
  from { translate: calc(var(--px, 0px) * var(--depth, 1)) calc(var(--py, 0px) * var(--depth, 1)); }
  to { translate: calc(var(--px, 0px) * var(--depth, 1)) calc(var(--py, 0px) * var(--depth, 1) - 4px); }
}

/* Each card has its own perspective, keeping controls in their normal hit areas. */
.food-slide {
  --yaw: 0deg;
  transform: perspective(1000px) translateX(calc(-50% + var(--shift) + var(--drag, 0px))) scale(var(--scale)) rotateY(var(--yaw));
  transition: transform 850ms cubic-bezier(.4,0,.2,1), opacity 700ms ease-in-out;
}
.food-slide[data-position='left'] { --yaw: 12deg; filter: none; opacity: .64; }
.food-slide[data-position='right'] { --yaw: -12deg; filter: none; opacity: .64; }
.food-slide__product { translate: calc(var(--drag, 0px) * .18) 0; transition: translate 650ms cubic-bezier(.22,.8,.2,1); }
.menu-garnish { translate: calc(var(--drag, 0px) * .4) 0; transition: translate 650ms cubic-bezier(.22,.8,.2,1); }
.menu-garnish--cilantro { translate: calc(var(--drag, 0px) * -.25) 0; }
.is-dragging .food-slide, .is-dragging .food-slide__product, .is-dragging .menu-garnish { transition: none; }
.food-carousel__caption h3 { translate: calc(var(--drag, 0px) * .08) 0; }

.locations__building { transform-origin: 50% 85%; }
.locations__float { animation-duration: 7s; }
.locations__pin.locations__float { animation: pin-hover 7s ease-in-out infinite; }
.locations__route-reveal { stroke-dasharray: 1; stroke-dashoffset: 0; }
.closing__heart { animation: closing-heart-float 7s ease-in-out infinite; }
.closing__star { animation: closing-star-float 8s ease-in-out infinite; }
.closing__order { transition: transform .2s, box-shadow .2s; }
.closing__actions .closing__order:active { transform: translateY(5px) scale(.98); box-shadow: 0 2px 0 #c56d3040, 0 3px 8px #b4512520; }
.closing__visit:active, .locations__choices button:active, .food-menu__categories button:not(:disabled):active { transform: scale(.96); }
.closing-footer__brand path { stroke-dasharray: 1; stroke-dashoffset: 0; }
.closing-footer nav > a { transition: color .2s, translate .2s; }
.closing-footer__networks > span { transition: transform .25s; }
@media (hover: hover) and (pointer: fine) {
  .closing-footer nav > a:hover { color: var(--red); translate: 5px 0; }
  .closing-footer__networks > span:hover { transform: translateY(-4px) rotate(-6deg); }
  .locations__choices button { transition: transform .2s; }
  .locations__choices button:hover { transform: translateY(-3px); }
}
@keyframes location-float { 50% { transform: translateY(-4px) rotate(1deg); } }
@keyframes pin-hover { 50% { transform: translateY(-4px); } }
@keyframes closing-heart-float { 50% { translate: 0 -4px; rotate: -2deg; } }
@keyframes closing-star-float { 50% { translate: 0 3px; rotate: 4deg; } }

/* Offscreen/background sections do not keep decorative animation work running. */
.motion-ready .hero:not(.motion-active) .decor,
.motion-ready .locations:not(.motion-active) .locations__float,
.motion-ready .closing:not(.motion-active) :is(.closing__heart, .closing__star),
.motion-paused :is(.decor, .locations__float, .closing__heart, .closing__star) { animation-play-state: paused !important; }
@media (max-width: 600px) {
  .food-slide[data-position='left'] { --yaw: 8deg; }
  .food-slide[data-position='right'] { --yaw: -8deg; }
  @keyframes drift { from { translate: 0 0; } to { translate: 0 -3px; } }
  @keyframes closing-heart-float { 50% { translate: 0 -3px; rotate: -1deg; } }
  @keyframes closing-star-float { 50% { translate: 0 2px; rotate: 3deg; } }
}
@media (prefers-reduced-motion: reduce) {
  .food-slide { transform: translateX(calc(-50% + var(--shift))) scale(var(--scale)); }
  .closing__heart, .closing__star, .locations__pin.locations__float { animation: none; }
}

/* Scroll owns these layers. No timed replay, idle float or pointer parallax fighting it. */
.motion-ready .hero__visual,
.motion-ready .hero__visual .foreground { translate: none; transition: none; }
.motion-ready :is(.decor, .locations__float, .closing__heart, .closing__star) { animation: none; }
.motion-ready .scroll-reveal { transition: none; }
@media (prefers-reduced-motion: reduce) {
  .motion-ready .scroll-reveal { animation: none !important; translate: none !important; }
}