/* Four four-second chapters: choose, send, prepare, record. One shared CSS clock. */
.motion-toggle { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 0; margin-top: 12px; border: 0; background: transparent; font-size: 12px; color: #51634d; }
.motion-toggle[hidden] { display: none; }
.motion-toggle-icon { display: grid; place-items: center; width: 23px; height: 23px; border: 1px solid #a9b69d; border-radius: 50%; font-size: 10px; }
.hero-signature { margin-top: 16px; }
.hero-stage { --hero-cycle: 16s; perspective: 1200px; overflow: clip; overflow-clip-margin: 0; aspect-ratio: .98; background: var(--purple); color: var(--ink); border: 3px solid var(--cream); border-radius: 14px; }
.hero-stage::before, .hero-stage::after { display: none; }
.stage-backdrops { position: absolute; inset: 0; overflow: clip; border-radius: inherit; z-index: -1; background: var(--purple); }
.stage-backdrops > i { position: absolute; inset: 0; background: var(--lime); transform: translateY(105%); animation-name: stage-lime; }
.stage-backdrops > i:nth-child(2) { background: var(--orange); transform: translateX(105%); animation-name: stage-orange; }
.stage-shout { position: absolute; z-index: 0; top: 3%; left: 5%; right: 5%; display: grid; font-family: FogonoDisplay, Impact, "Arial Narrow", sans-serif; font-size: 27cqw; text-transform: uppercase; letter-spacing: -.04em; line-height: 1; pointer-events: none; }
.stage-shout > span { grid-area: 1 / 1; opacity: 0; color: var(--lime); }
.stage-shout > span:nth-child(1) { opacity: 1; animation-name: shout-pide; }
.stage-shout > span:nth-child(2) { color: var(--ink); animation-name: shout-mueve; }
.stage-shout > span:nth-child(3) { color: var(--ink); animation-name: shout-cobra; }
.hero-stage .dashboard { z-index: 1; }
.hero-stage .window-top { background: var(--ink); color: var(--cream); }
.hero-stage .window-dots i { background: var(--lime); }
.hero-stage .window-dots i:first-child { background: var(--orange); }
.hero-stage .mock-sidebar { background: var(--ink); border-right-color: var(--ink); }
.hero-stage .mock-sidebar > svg { color: #b6a5e8; }
.hero-stage .mock-sidebar .selected { color: var(--lime); }
.hero-stage .mock-heading h2 { font-family: "Arial Black", sans-serif; font-size: 3cqw; font-weight: 900; text-transform: none; }
.hero-stage .mock-metrics > div { background: #f0e9ff; border-color: #e0d5f5; }
.hero-stage .chart-bars i { background: var(--purple); }
.hero-stage .chart-bars i:nth-child(even) { background: var(--orange); }
.hero-stage .chart-bars i:nth-child(8) { background: #a6cf00; }
.hero-stage .restaurant-monogram { background: var(--ink); color: var(--lime); border-color: var(--ink); }
.hero-stage .phone-categories span:first-child { color: var(--ink); background: var(--lime); }
.hero-stage .food-visual { background: #ddd0ff; border: 2px solid var(--ink); box-shadow: 4px 4px 0 var(--orange); }
.hero-stage .mock-add { background: var(--orange); color: var(--ink); border: 1px solid var(--ink); width: 4cqw; height: 4cqw; }
.hero-stage .phone-cart { background: var(--ink); color: var(--lime); }
.hero-stage .hero-order-status { background: var(--lime); color: var(--ink); font-weight: 800; }
.hero-stage .order-square { background: var(--purple); color: var(--cream); }
.hero-stage .floating-ticket { border: 2px solid var(--ink); background: var(--lime); box-shadow: 4px 4px 0 var(--ink); }
.hero-stage .ticket-icon { background: var(--ink); color: var(--lime); }
.hero-stage .floating-ticket div > span { color: #393f20; }
.hero-stage .hero-receipt > b { color: var(--ink); border-top-color: var(--ink); }
.hero-stage .hero-receipt > svg { color: var(--purple); }
.hero-stage .dashboard { left: 2%; top: 14%; width: 85%; transform-origin: 55% 65%; animation-name: operation-camera; }
.hero-stage .phone-preview { right: 7%; top: 19%; z-index: 3; transform-origin: 50% 65%; animation-name: menu-camera; }
.hero-stage .food-visual { z-index: 4; animation-name: choose-dish; }
.hero-stage .mock-add { animation-name: add-dish; }
.hero-stage .phone-cart { position: relative; }
.hero-stage .phone-cart::after { content: ""; position: absolute; inset: 0; border-radius: inherit; border: 1px solid #b8d88f; opacity: 0; animation-name: cart-confirmation; }
.phone-cart > span:first-child { font-size: 1.25cqw; font-weight: 650; }
.cart-state { display: grid; }
.phone-cart .cart-state > span { grid-area: 1 / 1; margin: 0; font-size: .95cqw; white-space: nowrap; }
.cart-state > span:first-child { animation-name: cart-empty; }
.cart-state > span:last-child { opacity: 0; animation-name: cart-full; }
.hero-tap { position: absolute; z-index: 6; right: 2cqw; bottom: 7cqw; width: 4.3cqw; height: 4.3cqw; opacity: 0; animation-name: tap-to-order; }
.hero-tap svg { width: 3cqw; height: 3.7cqw; fill: var(--paper); color: var(--ink); stroke-width: 1.5; }
.hero-tap::after { content: ""; position: absolute; left: -.6cqw; top: -.6cqw; width: 3cqw; height: 3cqw; border: .2cqw solid var(--orange); border-radius: 50%; opacity: 0; animation-name: tap-ring; }
.flying-order { position: absolute; z-index: 5; left: 59%; top: 62%; display: flex; align-items: center; gap: 1.3cqw; width: 34%; padding: 2cqw 1.7cqw; border: 2px solid var(--ink); border-radius: .6cqw; background: var(--lime); box-shadow: 5px 5px 0 var(--ink); opacity: 0; animation-name: send-order; }
.flying-order > svg { width: 3.4cqw; height: 3.4cqw; color: var(--orange); }
.flying-order div { flex: 1; }
.flying-order strong { display: block; font-size: 1.5cqw; }
.flying-order div > span { display: block; font-size: 1.15cqw; margin-top: .5cqw; color: #6f7b63; }
.flying-order-check { font-size: 2cqw; color: #5c7c3c; }
.hero-stage .mock-order { position: relative; animation-name: receive-order; }
.hero-stage .mock-order::after { content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: .35cqw; border-radius: 2cqw; background: #8ba967; transform-origin: left center; animation-name: prepare-order; }
.hero-order-status { display: grid; min-width: 11cqw; text-align: center; padding-inline: .7cqw; }
.hero-order-status > span { grid-area: 1 / 1; }
.hero-order-status > span:nth-child(1) { animation-name: order-received; }
.hero-order-status > span:nth-child(2) { opacity: 0; animation-name: order-preparing; }
.hero-order-status > span:nth-child(3) { opacity: 0; animation-name: order-ready; }
.hero-stage .chart-bars i { transform-origin: center bottom; animation-name: record-sale; }
.hero-stage .chart-bars i:nth-child(even) { animation-name: record-sale-secondary; }
.hero-stage .floating-ticket { left: 4%; bottom: 13%; z-index: 4; animation-name: connected-order; }
.hero-receipt { position: absolute; z-index: 4; left: 17%; top: 44%; width: 28%; display: flex; flex-direction: column; align-items: center; padding: 3cqw 2cqw 2.5cqw; background: var(--cream); border: 2px solid var(--ink); border-radius: .6cqw; box-shadow: 7px 7px 0 var(--ink); opacity: 0; transform-origin: center bottom; animation-name: print-receipt; }
.hero-receipt > svg { width: 3.6cqw; height: 3.6cqw; color: #6a844c; }
.hero-receipt > span { margin-top: 1.4cqw; font-size: .95cqw; letter-spacing: .12em; color: #7b8969; }
.hero-receipt > strong { margin-top: 1.4cqw; font-size: 3.7cqw; letter-spacing: -.06em; }
.hero-receipt > small { margin-top: 1cqw; font-size: 1.1cqw; color: #7a876b; }
.hero-receipt > b { display: flex; align-items: center; gap: 1cqw; width: 100%; justify-content: center; border-top: 1px dashed #cdd7bd; margin-top: 2cqw; padding-top: 1.5cqw; font-size: 1.15cqw; font-weight: 550; color: #5c7c3e; }
.hero-receipt > b svg { width: 1.5cqw; height: 1.5cqw; }
.motion-captions { display: grid; position: absolute; z-index: 6; bottom: max(2%, 10px); left: 4%; right: 4%; padding: 8px 12px; overflow: clip; isolation: isolate; background: var(--ink); border: 2px solid var(--cream); border-radius: 6px; box-shadow: 4px 4px 0 var(--lime); color: var(--cream); font-family: FogonoDisplay, Impact, "Arial Narrow", sans-serif; font-size: clamp(18px, 3.4cqw, 34px); font-weight: 400; line-height: 1.5; text-transform: uppercase; }
.motion-captions::before { content: ""; position: absolute; z-index: 0; inset: 0; background: var(--purple); opacity: 0; transform: translateX(-105%); animation-name: caption-sweep; }
.motion-captions > span { grid-area: 1 / 1; position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 10px; opacity: 0; animation-name: caption-state; }
.motion-captions > span > b { flex: none; padding: 3px 8px; border-radius: 3px; background: var(--lime); color: var(--ink); font-size: 1.15em; font-weight: 400; line-height: inherit; animation-name: caption-badge-pop; }
.motion-captions > span > span { min-width: 0; text-wrap: balance; }
.motion-captions > span:nth-child(1) { opacity: 1; }
.motion-captions > span:nth-child(2) { animation-delay: calc(var(--hero-cycle) * .25); }
.motion-captions > span:nth-child(3) { animation-delay: calc(var(--hero-cycle) * .5); }
.motion-captions > span:nth-child(4) { animation-delay: calc(var(--hero-cycle) * .75); }
.hero-stage .dashboard, .hero-stage .phone-preview, .hero-stage .food-visual,
.hero-stage .mock-add, .hero-stage .phone-cart::after, .cart-state > span,
.hero-tap, .hero-tap::after, .flying-order, .hero-stage .mock-order,
.hero-stage .mock-order::after, .hero-order-status > span,
.hero-stage .chart-bars i, .hero-stage .floating-ticket, .hero-receipt, .motion-captions > span, .motion-captions > span > b, .motion-captions::before,
.stage-backdrops > i, .stage-shout > span {
  animation-duration: var(--hero-cycle); animation-delay: 0s; animation-iteration-count: infinite;
  animation-fill-mode: both; animation-timing-function: var(--ease-out);
  animation-play-state: inherit;
}
.motion-captions > span > b { animation-delay: inherit; }
.motion-captions::before { animation-duration: calc(var(--hero-cycle) * .25); }
body:not([data-motion]) .motion-captions > span,
body:not([data-motion]) .motion-captions > span > b,
body:not([data-motion]) .motion-captions::before { animation-name: none; }
@keyframes stage-lime {
  0%, 24% { opacity: 0; transform: translateY(105%); }
  25% { opacity: 1; transform: translateY(105%); }
  27%, 74% { opacity: 1; transform: translateY(0); }
  75%, 99% { opacity: 0; transform: translateY(0); }
  99.5%, 100% { opacity: 0; transform: translateY(105%); }
}
@keyframes stage-orange {
  0%, 74% { opacity: 0; transform: translateX(105%); }
  75% { opacity: 1; transform: translateX(105%); }
  77%, 98% { opacity: 1; transform: translateX(0); }
  99.5% { opacity: 1; transform: translateX(-105%); }
  99.75% { opacity: 0; transform: translateX(-105%); }
  100% { opacity: 0; transform: translateX(105%); }
}
@keyframes shout-pide { 0%, 24%, 100% { opacity: 1; transform: translateY(0) rotate(-3deg) scale(1); } 25.5%, 99% { opacity: 0; transform: translateY(-2cqw) rotate(-3deg) scale(1.25); } }
@keyframes shout-mueve { 0%, 25%, 74%, 100% { opacity: 0; transform: translateY(3cqw) rotate(5deg) scale(1.2); } 27% { opacity: 1; transform: translateY(-1cqw) rotate(-2deg) scale(1.04); } 28.5%, 72% { opacity: 1; transform: translateY(0) rotate(-1deg) scale(1); } }
@keyframes shout-cobra { 0%, 74%, 100% { opacity: 0; transform: translateY(3cqw) rotate(-5deg) scale(1.25); } 76% { opacity: 1; transform: translateY(-1cqw) rotate(2deg) scale(1.04); } 77.5%, 98% { opacity: 1; transform: translateY(0) rotate(1deg) scale(1); } }
@keyframes menu-camera {
  0%, 100% { transform: translate3d(0, 0, 0) rotateY(-15deg) rotateZ(12deg) scale(.98); }
  4% { transform: translate3d(-8cqw, 1cqw, 40px) rotateY(5deg) rotateZ(-9deg) scale(1.3); }
  5.5%, 24% { transform: translate3d(-7cqw, 1cqw, 32px) rotateY(0deg) rotateZ(-6deg) scale(1.23); }
  26%, 74% { transform: translate3d(4cqw, 2cqw, -25px) rotateY(-25deg) rotateZ(13deg) scale(.87); }
  76%, 98% { transform: translate3d(1cqw, 0, 0) rotateY(-8deg) rotateZ(6deg) scale(1.04); }
  99.5% { transform: translate3d(0, 0, 0) rotateY(-15deg) rotateZ(12deg) scale(.98); }
}
@keyframes operation-camera {
  0%, 24%, 100% { transform: translate3d(-2cqw, 2cqw, -25px) rotateY(14deg) rotateZ(-10deg) scale(.88); }
  26% { transform: translate3d(3cqw, -1cqw, 24px) rotateY(-3deg) rotateZ(3deg) scale(1.09); }
  27.5%, 74% { transform: translate3d(2cqw, 0, 16px) rotateY(0deg) rotateZ(1deg) scale(1.03); }
  76%, 98% { transform: translate3d(-1cqw, 1cqw, -15px) rotateY(10deg) rotateZ(-7deg) scale(.91); }
  99.5% { transform: translate3d(-2cqw, 2cqw, -25px) rotateY(14deg) rotateZ(-10deg) scale(.88); }
}
@keyframes choose-dish {
  0%, 10%, 30%, 100% { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
  14% { transform: translate3d(-7cqw, -1cqw, 0) rotate(-10deg) scale(1.42); }
  17%, 25% { transform: translate3d(-6cqw, -1cqw, 0) rotate(-7deg) scale(1.3); }
}
@keyframes tap-to-order {
  0%, 10% { opacity: 0; transform: translate3d(3cqw, 5cqw, 0) rotate(-12deg); }
  18%, 23% { opacity: 1; transform: translate3d(-.2cqw, -1cqw, 0) rotate(-4deg); }
  25% { opacity: 1; transform: translate3d(-.2cqw, -1cqw, 0) rotate(-4deg) scale(.93); }
  31%, 100% { opacity: 0; transform: translate3d(2cqw, 2cqw, 0) rotate(-8deg); }
}
@keyframes tap-ring {
  0%, 23% { opacity: 0; transform: scale(.95); }
  25% { opacity: 1; transform: scale(1); }
  31%, 100% { opacity: 0; transform: scale(2); }
}
@keyframes add-dish {
  0%, 21%, 30%, 100% { transform: scale(1); }
  25% { transform: scale(.92); }
  27% { transform: scale(1.12); }
}
@keyframes cart-confirmation {
  0%, 25% { opacity: 0; transform: scale(.98); }
  28%, 32% { opacity: 1; transform: scale(1.04); }
  37%, 100% { opacity: 0; transform: scale(1.08); }
}
@keyframes cart-empty { 0%, 23%, 100% { opacity: 1; } 28%, 96% { opacity: 0; } }
@keyframes cart-full { 0%, 23%, 100% { opacity: 0; } 28%, 96% { opacity: 1; } }
@keyframes send-order {
  0%, 27% { opacity: 0; transform: translate3d(3cqw, 4cqw, 0) rotate(7deg) scale(.96); }
  31% { opacity: 1; transform: translate3d(-2cqw, -2cqw, 0) rotate(-12deg) scale(1.36); }
  37%, 39% { opacity: 1; transform: translate3d(-29cqw, -15cqw, 0) rotate(4deg) scale(1.04); }
  44%, 100% { opacity: 0; transform: translate3d(-31cqw, -16cqw, 0) rotate(-2deg) scale(.94); }
}
@keyframes receive-order { 0%, 35%, 100% { opacity: .3; transform: translateY(1cqw); } 43%, 95% { opacity: 1; transform: translateY(0); } }
@keyframes prepare-order {
  0%, 49%, 100% { opacity: 0; transform: scaleX(.04); }
  51.5% { opacity: 1; transform: scaleX(.04); }
  75%, 98% { opacity: 1; transform: scaleX(1); }
  99.5% { opacity: 0; transform: scaleX(1); }
}
@keyframes order-received { 0%, 49%, 100% { opacity: 1; } 50%, 98% { opacity: 0; } }
@keyframes order-preparing { 0%, 50%, 74%, 100% { opacity: 0; } 51.5%, 72.5% { opacity: 1; } }
@keyframes order-ready { 0%, 73%, 100% { opacity: 0; } 75%, 98% { opacity: 1; } }
@keyframes record-sale { 0%, 74%, 100% { transform: scaleY(.35); opacity: .6; } 76.5%, 98% { transform: scaleY(1); opacity: 1; } }
@keyframes record-sale-secondary { 0%, 75%, 100% { transform: scaleY(.5); opacity: .65; } 78%, 98% { transform: scaleY(1); opacity: 1; } }
@keyframes connected-order { 0%, 39%, 100% { opacity: 0; transform: translateY(2cqw) rotate(-3deg); } 44% { opacity: 1; transform: translateY(-1cqw) rotate(4deg) scale(1.12); } 47%, 91% { opacity: 1; transform: translateY(0) rotate(-3deg) scale(1.04); } }
@keyframes print-receipt {
  0%, 74%, 100% { opacity: 0; transform: translate3d(0, 5cqw, 0) rotate(-6deg) scale(.96); }
  76% { opacity: 1; transform: translate3d(3cqw, 0, 0) rotate(7deg) scale(1.48); }
  77.5%, 98% { opacity: 1; transform: translate3d(3cqw, 0, 0) rotate(4deg) scale(1.38); }
  99.5% { opacity: 0; transform: translate3d(0, -1cqw, 0) rotate(-4deg) scale(.98); }
}
/* 240ms entrance, 3.6s of still reading, then a 160ms exit. */
@keyframes caption-state {
  0% { opacity: 0; transform: translateY(6px) scale(.94); }
  1.125% { opacity: 1; transform: translateY(-1px) scale(1); }
  1.5%, 24% { opacity: 1; transform: translateY(0) scale(1); }
  25% { opacity: 0; transform: translateY(-6px) scale(.96); }
  25.001%, 100% { opacity: 0; transform: translateY(6px) scale(.94); }
}
@keyframes caption-badge-pop {
  0% { transform: rotate(-8deg) scale(.9); }
  1.125% { transform: rotate(4deg) scale(1.14); }
  1.5%, 100% { transform: rotate(0) scale(1); }
}
@keyframes caption-sweep {
  0% { opacity: .95; transform: translateX(-105%); }
  6% { opacity: .95; transform: translateX(105%); }
  6.001%, 100% { opacity: 0; transform: translateX(105%); }
}

/* The larger walkthrough plays by itself as well, and stays controllable by keyboard. */
.workflow-demo { position: relative; }
body[data-motion] .motion-section.workflow-demo[data-playback="paused"] { animation-play-state: paused; }
.workflow-demo .demo-journey > i { position: relative; }
.workflow-demo .demo-journey > i::after { content: ""; position: absolute; width: 7px; height: 7px; left: 0; top: -4px; border-radius: 50%; background: #c5d99e; opacity: 0; animation-name: journey-message; animation-duration: 4s; animation-timing-function: linear; animation-iteration-count: infinite; }
.workflow-demo .demo-journey > i:nth-of-type(2)::after { animation-delay: .4s; }
.workflow-demo .scene-status svg { animation-name: status-check; animation-duration: 4s; animation-timing-function: var(--ease-out); animation-iteration-count: infinite; }
@keyframes journey-message { 0%, 15% { opacity: 0; transform: translateX(0); } 25% { opacity: 1; transform: translateX(0); } 70% { opacity: 1; transform: translateX(30px); } 80%, 100% { opacity: 0; transform: translateX(30px); } }
@keyframes status-check { 0%, 20%, 100% { opacity: .5; transform: scale(.95); } 35%, 85% { opacity: 1; transform: scale(1.08); } }

@media (max-width: 699px) {
  .hero-stage { aspect-ratio: .94; }
  .hero-stage .phone-preview { right: 8%; top: 18%; }
  .hero-stage .floating-ticket { left: 4%; bottom: 16%; }
  .motion-toggle { font-size: 12px; margin-top: 5px; }
}
@media (prefers-reduced-motion: reduce) {
  body:not([data-motion-opt-in="true"]) .hero-stage *,
  body:not([data-motion-opt-in="true"]) .hero-stage *::before,
  body:not([data-motion-opt-in="true"]) .hero-stage *::after,
  body:not([data-motion-opt-in="true"]) .workflow-demo *::after,
  body:not([data-motion-opt-in="true"]) .workflow-demo .scene-status svg { animation: none; }
  body:not([data-motion-opt-in="true"]) .hero-stage .mock-order { opacity: 1; transform: none; }
}