/* Punchy product motion. Each feature explains a task in a six-second loop. */
.motion-section { animation-play-state: paused; }
.motion-section *, .motion-section::before, .motion-section::after,
.motion-section *::before, .motion-section *::after { animation-play-state: inherit; }
body[data-motion="running"] .motion-section[data-in-view="true"] { animation-play-state: running; }
body[data-motion="paused"] .motion-section,
body[data-motion="paused"] .motion-section * { animation-play-state: paused; }

/* Scan, open, stamp: the QR becomes a bold restaurant touchpoint. */
.feature-menu .menu-art { position: relative; padding-top: 26px; padding-bottom: 12px; overflow: clip; isolation: isolate; }
.feature-menu .menu-art::before {
  content: ""; position: absolute; z-index: -1; inset: 26px 6px 16px;
  background: var(--purple); border: 3px solid var(--ink); border-radius: 3px;
  opacity: .15; transform: rotate(-5deg) scale(.92);
  animation-name: fogono-menu-backdrop; animation-duration: var(--lower-motion-cycle, 6s);
  animation-timing-function: var(--ease-out); animation-iteration-count: infinite;
}
.feature-menu .qr-card {
  position: relative; z-index: 2; overflow: hidden; border: 3px solid var(--ink);
  border-radius: 4px; background: var(--cream); color: var(--ink); box-shadow: 6px 6px 0 var(--ink);
  transform-origin: 50% 85%;
  animation-name: fogono-qr-card; animation-duration: var(--lower-motion-cycle, 6s);
  animation-timing-function: var(--ease-out); animation-iteration-count: infinite;
}
.feature-menu .qr-card > svg { color: var(--ink); stroke-width: 2.5; }
.feature-menu .qr-card .qr-scan-line {
  position: absolute; z-index: 3; top: 23px; left: 9%; right: 9%; height: 4px;
  margin: 0; border-radius: 0; background: var(--orange); box-shadow: 0 0 0 4px #ff4f1f26;
  opacity: 0; pointer-events: none; --qr-scan-distance: 67px;
  animation-name: fogono-qr-scan; animation-duration: var(--lower-motion-cycle, 6s);
  animation-timing-function: linear; animation-iteration-count: infinite;
}
.feature-menu .qr-card .qr-scan-confirm {
  position: absolute; z-index: 4; top: 37px; left: 50%; margin: 0;
  width: 43px; height: 43px; border: 3px solid var(--ink); border-radius: 50%;
  display: grid; place-items: center; background: var(--lime); color: var(--ink);
  opacity: 0; transform: translate(-50%, 9px) rotate(-12deg) scale(.9);
  pointer-events: none;
  animation-name: fogono-qr-confirm; animation-duration: var(--lower-motion-cycle, 6s);
  animation-timing-function: var(--ease-out); animation-iteration-count: infinite;
}
.feature-menu .qr-card .qr-scan-confirm svg { width: 23px; height: 23px; margin: 0; stroke-width: 2.8; }
.feature-menu .menu-chips { position: relative; z-index: 3; gap: 9px; }
.feature-menu .menu-chips > span {
  border: 2px solid var(--ink); border-radius: 2px; background: var(--orange); color: var(--ink);
  box-shadow: 3px 3px 0 var(--ink); font-weight: 800; transform-origin: left center;
  animation-name: fogono-menu-result; animation-duration: var(--lower-motion-cycle, 6s); animation-fill-mode: both;
  animation-timing-function: var(--ease-out); animation-iteration-count: infinite;
}
.feature-menu .menu-chips > span:nth-child(2) { background: var(--lime); margin-left: 0; animation-delay: .12s; }
.feature-menu .menu-chips > span:nth-child(3) { background: var(--purple); color: var(--cream); animation-delay: .24s; }
@keyframes fogono-menu-backdrop {
  0%, 8%, 100% { opacity: .15; transform: rotate(-5deg) scale(.92); }
  13%, 82% { opacity: 1; transform: rotate(4deg) scale(1.02); }
  89% { opacity: .15; transform: rotate(-5deg) scale(.92); }
}
@keyframes fogono-qr-card {
  0%, 8%, 100% { transform: translateY(0) rotate(-8deg) scale(.94); }
  13%, 35% { transform: translateY(-9px) rotate(7deg) scale(1.14); }
  40%, 84% { transform: translateY(-3px) rotate(-3deg) scale(1.03); }
  90% { transform: translateY(0) rotate(-8deg) scale(.94); }
}
@keyframes fogono-qr-scan {
  0%, 13% { opacity: 0; transform: translateY(0); }
  16% { opacity: 1; transform: translateY(0); }
  34% { opacity: 1; transform: translateY(var(--qr-scan-distance)); }
  38%, 99% { opacity: 0; transform: translateY(var(--qr-scan-distance)); }
  100% { opacity: 0; transform: translateY(0); }
}
@keyframes fogono-qr-confirm {
  0%, 33% { opacity: 0; transform: translate(-50%, 9px) rotate(-12deg) scale(.9); }
  38% { opacity: 1; transform: translate(-50%, 0) rotate(6deg) scale(1.22); }
  42%, 75% { opacity: 1; transform: translate(-50%, 0) rotate(-3deg) scale(1.08); }
  80%, 100% { opacity: 0; transform: translate(-50%, -7px) rotate(8deg) scale(1.13); }
}
@keyframes fogono-menu-result {
  0%, 17%, 100% { opacity: .2; transform: translate(10px, 16px) rotate(-6deg) scale(.92); }
  22% { opacity: 1; transform: translate(9px, 0) rotate(6deg) scale(1.12); }
  27%, 84% { opacity: 1; transform: translate(6px, 0) rotate(-2deg) scale(1); }
  90% { opacity: .2; transform: translate(10px, 16px) rotate(-6deg) scale(.92); }
}

/* Fast, tactile tickets snap through three queue positions; two remain visible. */
.feature-operation .order-stack {
  position: relative; display: block; height: 218px; min-height: 218px;
  padding: 18px 0; overflow: clip; isolation: isolate;
}
.feature-operation .order-stack > div {
  position: absolute; top: 18px; left: 12px; right: 16px; min-height: 46px;
  margin: 0; padding: 12px 10px; gap: 7px; opacity: 1;
  border: 3px solid var(--ink); border-radius: 3px; box-shadow: 5px 5px 0 var(--ink);
  background: var(--orange); color: var(--ink); font-size: 10px; font-weight: 850;
  transform: translateY(0) rotate(-2deg) scale(1.05); transform-origin: center center;
  animation-name: fogono-order-queue; animation-duration: var(--lower-motion-cycle, 6s); animation-fill-mode: both;
  animation-timing-function: var(--ease-out); animation-iteration-count: infinite;
}
.feature-operation .order-stack > div:nth-child(1) { animation-delay: -4s; }
.feature-operation .order-stack > div:nth-child(2) { margin: 0; background: var(--lime); transform: translateY(60px); animation-delay: -2s; }
.feature-operation .order-stack > div:nth-child(3) { margin: 0; background: var(--purple); color: var(--cream); transform: translateY(120px) rotate(3deg) scale(.92); }
.feature-operation .order-stack b { background: var(--ink); color: var(--cream); border-radius: 2px; font-size: 7px; font-weight: 750; padding: 5px 6px; }
.feature-operation .order-stack > div:nth-child(2) b { background: var(--ink); color: var(--lime); }
.feature-operation .order-stack > div:nth-child(3) b { background: var(--cream); color: var(--ink); }
.feature-operation .tiny-dot { background: currentColor; }
@keyframes fogono-order-queue {
  0%, 26%, 100% { opacity: .9; transform: translateY(120px) rotate(3deg) scale(.92); }
  30%, 59% { opacity: 1; transform: translateY(60px) rotate(0deg) scale(1); }
  63%, 90% { opacity: 1; transform: translateY(0) rotate(-2deg) scale(1.06); }
  94% { opacity: 0; transform: translateY(-74px) rotate(6deg) scale(.94); }
  95% { opacity: 0; transform: translateY(180px) rotate(3deg) scale(.9); }
}

/* Colour is carried by the operation icons and the growing sales bars. */
.feature-control .control-art { min-height: 228px; justify-content: flex-start; padding-top: 8px; overflow: clip; isolation: isolate; }
.feature-control .control-art::before { display: none; }
.feature-control .control-art > span { font-family: inherit; font-style: normal; font-weight: 900; font-size: 27px; letter-spacing: -.06em; text-transform: uppercase; color: var(--ink); transform: rotate(-4deg); }
.feature-control .control-art > div:not(.mini-report) { position: absolute; top: 48px; left: 50%; margin: 0; gap: 13px; transform: translateX(-50%); z-index: 1; }
.feature-control .control-art > div:not(.mini-report) > svg {
  width: 24px; height: 24px; padding: 10px; border: 3px solid var(--ink); border-radius: 3px;
  box-shadow: 4px 4px 0 var(--ink); background: var(--orange); color: var(--ink);
  transform: rotate(0deg); transform-origin: center bottom;
  animation-name: fogono-operation-icon; animation-duration: var(--lower-motion-cycle, 6s);
  animation-timing-function: var(--ease-out); animation-iteration-count: infinite;
}
.feature-control .control-art > div:not(.mini-report) > svg:nth-child(2) { background: var(--lime); animation-delay: .14s; }
.feature-control .control-art > div:not(.mini-report) > svg:nth-child(3) { background: var(--purple); color: var(--cream); animation-delay: .28s; }
.feature-control .control-art .mini-report {
  position: absolute; left: 8%; right: 8%; bottom: 4px; display: flex; align-items: flex-end;
  gap: 6px; height: 88px; margin: 0; padding: 4px 6px 0; border-bottom: 3px solid var(--ink);
  background: repeating-linear-gradient(to top, transparent 0 25px, #1515151c 25px 27px);
}
.mini-report > i {
  display: block; flex: 1; height: 42%; border: 2px solid var(--ink); border-bottom: 0;
  border-radius: 2px 2px 0 0; background: var(--orange); transform-origin: center bottom;
  animation-name: fogono-report-bar; animation-duration: var(--lower-motion-cycle, 6s);
  animation-timing-function: var(--ease-out); animation-iteration-count: infinite;
}
.mini-report > i:nth-child(2) { height: 58%; background: var(--purple); animation-delay: .06s; }
.mini-report > i:nth-child(3) { height: 47%; background: var(--lime); animation-delay: .12s; }
.mini-report > i:nth-child(4) { height: 74%; background: var(--orange); animation-delay: .18s; }
.mini-report > i:nth-child(5) { height: 62%; background: var(--purple); animation-delay: .24s; }
.mini-report > i:nth-child(6) { height: 90%; background: var(--lime); animation-delay: .3s; }
.mini-report > i:nth-child(7) { height: 79%; background: var(--ink); animation-delay: .36s; }
@keyframes fogono-operation-icon {
  0%, 10%, 41%, 100% { opacity: 1; transform: translateY(0) rotate(0deg) scale(1); }
  14% { opacity: 1; transform: translateY(-12px) rotate(7deg) scale(1.2); }
  19%, 34% { opacity: 1; transform: translateY(-6px) rotate(-4deg) scale(1.06); }
}
@keyframes fogono-report-bar {
  0%, 25%, 100% { opacity: 1; transform: scaleY(.18); }
  30% { opacity: 1; transform: scaleY(1.14); }
  35%, 86% { opacity: 1; transform: scaleY(1); }
  92% { opacity: 1; transform: scaleY(.18); }
}

/* Read the purchase, reveal its rows, then hand it to a person for review. */
.intelligence-visual.motion-section { overflow: clip; }
.intelligence-visual.motion-section::before {
  display: block;
  inset: 30px; border: 3px solid var(--ink); border-radius: 6px; background: var(--purple);
  opacity: .4; transform: rotate(-8deg) scale(.92);
  animation-name: fogono-invoice-backdrop; animation-duration: var(--lower-motion-cycle, 6s);
  animation-timing-function: var(--ease-out); animation-iteration-count: infinite;
}
.intelligence-visual .invoice-art {
  border: 3px solid var(--ink); background: var(--cream); color: var(--ink);
  box-shadow: 7px 7px 0 var(--ink); transform-origin: center 80%;
  animation-name: fogono-invoice-paper; animation-duration: var(--lower-motion-cycle, 6s);
  animation-timing-function: var(--ease-out); animation-iteration-count: infinite;
}
.intelligence-visual .invoice-art > span:not(.invoice-scan-line) { color: var(--ink); font-weight: 850; }
.intelligence-visual .invoice-art > div { border-bottom-color: #1515155c; }
.intelligence-visual .invoice-art > p { color: var(--ink); font-weight: 750; }
.intelligence-visual .invoice-art .invoice-scan-line {
  position: absolute; z-index: 2; top: 29%; left: 5%; right: 5%; height: 4px;
  background: var(--orange); box-shadow: 0 0 0 5px #ff4f1f1a; opacity: 0; pointer-events: none;
  animation-name: fogono-invoice-scan; animation-duration: var(--lower-motion-cycle, 6s);
  animation-timing-function: linear; animation-iteration-count: infinite;
}
.intelligence-visual .invoice-art > div:not(:first-of-type) {
  animation-name: fogono-invoice-row; animation-duration: var(--lower-motion-cycle, 6s);
  animation-timing-function: var(--ease-out); animation-iteration-count: infinite;
}
.intelligence-visual .invoice-art > div:nth-of-type(3) { animation-delay: .18s; }
.intelligence-visual .review-note {
  right: 14px; border: 3px solid var(--ink); border-radius: 3px; box-shadow: 5px 5px 0 var(--ink);
  background: var(--lime); color: var(--ink); transform-origin: right bottom;
  animation-name: fogono-review-reminder; animation-duration: var(--lower-motion-cycle, 6s);
  animation-timing-function: var(--ease-out); animation-iteration-count: infinite;
}
.intelligence-visual .review-note svg { color: var(--ink); }
.intelligence-visual .review-note strong { font-weight: 850; }
@keyframes fogono-invoice-backdrop {
  0%, 8%, 100% { opacity: .4; transform: rotate(-8deg) scale(.92); }
  13%, 84% { opacity: 1; transform: rotate(5deg) scale(1.02); }
  90% { opacity: .4; transform: rotate(-8deg) scale(.92); }
}
@keyframes fogono-invoice-paper {
  0%, 8%, 100% { transform: translateY(9px) rotate(-10deg) scale(.92); }
  13% { transform: translateY(-8px) rotate(5deg) scale(1.14); }
  18%, 84% { transform: translateY(-2px) rotate(-3deg) scale(1.05); }
  90% { transform: translateY(9px) rotate(-10deg) scale(.92); }
}
@keyframes fogono-invoice-scan {
  0%, 15% { opacity: 0; transform: translateY(0); }
  18% { opacity: 1; transform: translateY(0); }
  40% { opacity: 1; transform: translateY(150px); }
  44%, 99% { opacity: 0; transform: translateY(150px); }
  100% { opacity: 0; transform: translateY(0); }
}
@keyframes fogono-invoice-row {
  0%, 32%, 100% { opacity: .3; transform: translateX(16px) scale(.94); }
  37% { opacity: 1; transform: translateX(-3px) scale(1.04); }
  42%, 86% { opacity: 1; transform: translateX(0) scale(1); }
  92% { opacity: .3; transform: translateX(16px) scale(.94); }
}
@keyframes fogono-review-reminder {
  0%, 47%, 100% { opacity: 0; transform: translateY(14px) rotate(9deg) scale(.9); }
  52% { opacity: 1; transform: translateY(-4px) rotate(-5deg) scale(1.18); }
  57%, 88% { opacity: 1; transform: translateY(0) rotate(3deg) scale(1.04); }
  94% { opacity: 0; transform: translateY(-8px) rotate(-4deg) scale(1.1); }
}

@media (min-width: 700px) and (max-width: 899px) {
  .feature-control .control-art > div:not(.mini-report) { gap: 7px; }
  .feature-control .control-art > div:not(.mini-report) > svg { width: 20px; height: 20px; padding: 8px; }
  .feature-control .control-art .mini-report { left: 5%; right: 5%; gap: 4px; }
  .feature-control .control-art > span { font-size: 23px; }
  .feature-menu .qr-card .qr-scan-line { top: 23px; --qr-scan-distance: 52px; }
  .feature-menu .qr-card .qr-scan-confirm { top: 29px; width: 36px; height: 36px; }
  .feature-operation .order-stack > div { font-size: 8px; padding-inline: 7px; gap: 5px; }
  .feature-operation .order-stack b { font-size: 6px; padding-inline: 4px; }
}
@media (max-width: 699px) {
  .feature-menu .qr-card .qr-scan-line { top: 20px; --qr-scan-distance: 70px; }
  .feature-menu .qr-card .qr-scan-confirm { top: 36px; }
  .feature-control .control-art .mini-report { left: 12%; right: 12%; }
  .intelligence-visual .invoice-art { animation-name: fogono-invoice-paper-mobile; }
  .intelligence-visual .review-note { right: 18px; }
}
@keyframes fogono-invoice-paper-mobile {
  0%, 8%, 100% { transform: translateY(8px) rotate(-8deg) scale(.94); }
  13% { transform: translateY(-6px) rotate(4deg) scale(1.08); }
  18%, 84% { transform: translateY(-2px) rotate(-3deg) scale(1.02); }
  90% { transform: translateY(8px) rotate(-8deg) scale(.94); }
}
@media (max-width: 359px) {
  .feature-menu .menu-art { gap: 12px; }
  .feature-menu .menu-chips > span { padding-inline: 7px; font-size: 9px; }
  .feature-operation .order-stack > div { font-size: 9px; padding-inline: 7px; gap: 5px; }
  .feature-operation .order-stack b { font-size: 6px; padding-inline: 4px; }
}
@media (prefers-reduced-motion: reduce) {
  body:not([data-motion-opt-in="true"]) .motion-section *,
  body:not([data-motion-opt-in="true"]) .motion-section::before,
  body:not([data-motion-opt-in="true"]) .motion-section *::before,
  body:not([data-motion-opt-in="true"]) .motion-section *::after { animation-name: none !important; }
  body:not([data-motion-opt-in="true"]) .qr-scan-line,
  body:not([data-motion-opt-in="true"]) .qr-scan-confirm,
  body:not([data-motion-opt-in="true"]) .invoice-scan-line { display: none !important; }
  body:not([data-motion-opt-in="true"]) .feature-menu .qr-card { transform: rotate(-3deg); }
  body:not([data-motion-opt-in="true"]) .feature-menu .menu-chips > span,
  body:not([data-motion-opt-in="true"]) .intelligence-visual .invoice-art > div:not(:first-of-type) { opacity: 1; transform: none; }
  body:not([data-motion-opt-in="true"]) .feature-menu .menu-art::before { opacity: .7; transform: rotate(3deg); }
  body:not([data-motion-opt-in="true"]) .feature-operation .order-stack > div { opacity: 1; }
  body:not([data-motion-opt-in="true"]) .feature-operation .order-stack > div:nth-child(1) { transform: translateY(0) rotate(-2deg); }
  body:not([data-motion-opt-in="true"]) .feature-operation .order-stack > div:nth-child(2) { transform: translateY(60px); }
  body:not([data-motion-opt-in="true"]) .feature-operation .order-stack > div:nth-child(3) { transform: translateY(120px) rotate(2deg); }
  body:not([data-motion-opt-in="true"]) .mini-report > i { opacity: 1; transform: scaleY(1); }
  body:not([data-motion-opt-in="true"]) .intelligence-visual .invoice-art { transform: rotate(-3deg); }
  body:not([data-motion-opt-in="true"]) .intelligence-visual .review-note { opacity: 1; transform: rotate(3deg); }
}