/* ===== Animated ordering demo (shared by How it works + menu page) ===== */
/* Demo stage */
.demo{display:grid;grid-template-columns:auto auto;justify-content:center;align-items:end;gap:18px}
.phone{width:250px;height:510px;background:#0f172a;border-radius:40px;padding:12px;box-shadow:0 30px 60px rgba(15,23,42,.3),inset 0 0 0 2px #334155;position:relative;grid-row:1}
.notch{position:absolute;top:12px;left:50%;transform:translateX(-50%);width:90px;height:22px;background:#0f172a;border-radius:0 0 14px 14px;z-index:5}
.screen{position:relative;width:100%;height:100%;background:#f6f7fb;border-radius:30px;overflow:hidden}
.scr{position:absolute;inset:0;padding:34px 12px 12px;opacity:0;transform:translateX(30px);transition:opacity .45s,transform .45s;pointer-events:none;font-size:12px}
.scr.on{opacity:1;transform:none}

/* Scene 1 — scan */
.s1{background:#111827;padding:34px 0 0}
.cam{position:relative;height:100%;display:grid;place-items:center;background:radial-gradient(circle at 50% 45%,#374151,#0b0f19 70%)}
.table-stand{background:#fff;border-radius:10px;padding:12px 16px;text-align:center;transform:perspective(500px) rotateX(8deg);box-shadow:0 10px 30px rgba(0,0,0,.5)}
.ts-title{font-weight:800;font-size:16px}
.ts-sub{font-weight:700;font-size:11px;margin-top:6px}
.mini-qr{display:grid;grid-template-columns:repeat(7,12px);gap:1px;margin:8px auto 0;width:max-content}
.mini-qr i{width:12px;height:12px;background:#e5e7eb}
.mini-qr i.k{background:#0f172a}
.frame{position:absolute;width:150px;height:150px;top:50%;left:50%;transform:translate(-50%,-55%)}
.frame span{position:absolute;width:26px;height:26px;border:3px solid #22c55e}
.frame span:nth-child(1){top:0;left:0;border-right:0;border-bottom:0;border-radius:8px 0 0 0}
.frame span:nth-child(2){top:0;right:0;border-left:0;border-bottom:0;border-radius:0 8px 0 0}
.frame span:nth-child(3){bottom:0;left:0;border-right:0;border-top:0;border-radius:0 0 0 8px}
.frame span:nth-child(4){bottom:0;right:0;border-left:0;border-top:0;border-radius:0 0 8px 0}
.s1.on .frame{animation:frameIn 1.2s ease-out both}
@keyframes frameIn{from{transform:translate(-50%,-55%) scale(1.5);opacity:0}to{transform:translate(-50%,-55%) scale(1);opacity:1}}
.laser{position:absolute;left:22%;right:22%;height:3px;background:#22c55e;box-shadow:0 0 12px #22c55e;top:30%;opacity:0}
.s1.on .laser{animation:laser 1.4s ease-in-out .6s 2 alternate both}
@keyframes laser{0%{top:28%;opacity:1}100%{top:62%;opacity:1}}
.toast{position:absolute;left:12px;right:12px;bottom:22px;background:#fff;border-radius:12px;padding:10px;font-weight:700;text-align:center;color:#15803d;opacity:0;transform:translateY(20px)}
.s1.on .toast{animation:up .5s ease-out 3.2s both}
@keyframes up{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}

/* Shared mini-app bits */
.m-top{display:flex;justify-content:space-between;align-items:center;background:var(--accent);color:#fff;margin:-34px -12px 8px;padding:34px 12px 10px;font-size:13px}
.m-top span{background:#fff;color:var(--accent);border-radius:999px;padding:2px 8px;font-weight:800;font-size:11px}
.m-chips{display:flex;gap:5px;margin-bottom:8px}
.m-chips i{font-style:normal;background:#e9edf5;border-radius:999px;padding:4px 10px;font-weight:600;font-size:11px}
.m-chips i.on{background:var(--accent);color:#fff}
.m-item{display:flex;align-items:center;gap:8px;background:#fff;border-radius:10px;padding:7px;margin-bottom:6px;box-shadow:0 1px 2px rgba(0,0,0,.05)}
.m-img{width:38px;height:38px;border-radius:8px;background:linear-gradient(135deg,#eef2ff,#fef3c7);display:grid;place-items:center;font-size:20px}
.m-txt{flex:1;display:flex;flex-direction:column}
.m-txt span{color:#64748b;font-weight:700}
.m-plus{position:relative;width:24px;height:24px;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center;font-weight:800}
.tap{position:absolute;inset:0;border-radius:inherit;pointer-events:none}
.tap::after{content:"";position:absolute;width:26px;height:26px;border-radius:50%;background:rgba(255,255,255,.9);border:2px solid var(--accent);left:50%;top:50%;transform:translate(-50%,-50%) scale(0);opacity:0}
.s2.on .p1 .tap::after{animation:tap .7s ease-out .9s both}
.s2.on .p2 .tap::after{animation:tap .7s ease-out 2s both}
@keyframes tap{0%{transform:translate(-50%,-50%) scale(.2);opacity:.9}100%{transform:translate(-50%,-50%) scale(1.8);opacity:0}}
.s2.on .p1{animation:bump .3s ease 1s}
.s2.on .p2{animation:bump .3s ease 2.1s}
@keyframes bump{50%{transform:scale(1.3)}}
.m-cart{position:absolute;left:10px;right:10px;bottom:12px;background:var(--accent);color:#fff;border-radius:10px;padding:10px;display:flex;justify-content:space-between;align-items:center;font-weight:700;opacity:0;transform:translateY(30px)}
.m-cart .badge{background:rgba(255,255,255,.25);border-radius:6px;padding:0 7px}
.s2.on .m-cart{animation:up .45s ease-out 2.4s both}

/* Scene 3 — details */
.f-lbl{font-weight:700;color:#334155;margin:8px 0 3px;font-size:11px}
.f-in{background:#fff;border:1.5px solid #e5e7eb;border-radius:9px;padding:8px;height:32px;font-family:ui-monospace,Menlo,monospace;font-size:12px}
.type{display:inline-block;overflow:hidden;white-space:nowrap;width:0;border-right:2px solid var(--accent);vertical-align:bottom}
.s3.on .t1{animation:type .8s steps(5) .4s forwards,caret .6s step-end 4}
.s3.on .t2{animation:type 1s steps(9) 1.4s forwards}
@keyframes type{to{width:var(--w)}}
@keyframes caret{50%{border-color:transparent}}
.f-methods{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
.f-methods i{font-style:normal;text-align:center;border:1.5px solid #e5e7eb;border-radius:8px;padding:7px 0;font-weight:700;font-size:10.5px;background:#fff}
.s3.on .f-methods .evc{animation:pick .3s ease 2.8s forwards}
@keyframes pick{to{border-color:#16a34a;color:#16a34a;background:#f0fdf4}}
.f-btn{position:relative;margin-top:14px;background:var(--accent);color:#fff;border-radius:10px;padding:11px;text-align:center;font-weight:800}
.s3.on .f-btn .tap::after{animation:tap .7s ease-out 3.5s both}

/* Scene 4 — pay */
.p-title{font-weight:800;font-size:14px;text-align:center;margin:10px 0}
.p-code{font-family:ui-monospace,Menlo,monospace;font-weight:800;font-size:13.5px;background:#fff;border-radius:10px;padding:10px;text-align:center;word-break:break-all}
.p-btn{position:relative;margin-top:10px;background:var(--accent);color:#fff;border-radius:10px;padding:11px;text-align:center;font-weight:800}
.s4.on .p-btn .tap::after{animation:tap .7s ease-out .9s both}
.dialer{position:absolute;inset:0;background:#0b0f19;color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;opacity:0;transform:translateY(100%)}
.s4.on .dialer{animation:dialIn .45s ease-out 1.4s both}
@keyframes dialIn{to{opacity:1;transform:none}}
.d-code{font-family:ui-monospace,Menlo,monospace;font-size:16px;font-weight:700;padding:0 8px;text-align:center;word-break:break-all}
.d-lbl{color:#94a3b8}
.d-pin{display:flex;gap:10px}
.d-pin i{width:12px;height:12px;border-radius:50%;border:2px solid #64748b}
.s4.on .d-pin i{animation:fill .1s linear forwards}
.s4.on .d-pin i:nth-child(1){animation-delay:2.2s}.s4.on .d-pin i:nth-child(2){animation-delay:2.5s}.s4.on .d-pin i:nth-child(3){animation-delay:2.8s}.s4.on .d-pin i:nth-child(4){animation-delay:3.1s}
@keyframes fill{to{background:#fff;border-color:#fff}}
.d-ok{background:#16a34a;border-radius:999px;padding:6px 14px;font-weight:800;opacity:0}
.s4.on .d-ok{animation:up .4s ease-out 3.6s both}

/* Scene 5 — served */
.st{list-style:none;padding:8px 10px;margin:8px 0;background:#fff;border-radius:12px}
.st li{display:flex;align-items:center;gap:8px;padding:8px 0;font-weight:700;color:#94a3b8}
.st li i{font-style:normal;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:#e9edf5;color:transparent;font-size:12px}
.s5.on .st li{animation:done .4s ease forwards}
.s5.on .st li i{animation:check .4s ease forwards}
.s5.on .st .a,.s5.on .st .a i{animation-delay:.2s}
.s5.on .st .b,.s5.on .st .b i{animation-delay:1.1s}
.s5.on .st .c,.s5.on .st .c i{animation-delay:2.6s}
@keyframes done{to{color:#0f172a}}
@keyframes check{to{background:#16a34a;color:#fff;transform:scale(1.1)}}
.tray{font-size:44px;text-align:center;margin-top:10px;opacity:0;transform:translateX(-120px)}
.tray span{margin-left:6px;font-size:30px}
.s5.on .tray{animation:tray 1s cubic-bezier(.2,.8,.2,1.2) 2.1s forwards}
@keyframes tray{to{opacity:1;transform:none}}
.enjoy{text-align:center;font-weight:800;font-size:15px;color:var(--accent);opacity:0}
.s5.on .enjoy{animation:up .5s ease-out 3.1s both}

/* Cashier tablet */
.tablet{width:210px;height:250px;background:#111827;border-radius:18px;padding:10px;box-shadow:0 20px 40px rgba(15,23,42,.25),inset 0 0 0 2px #334155;color:#e2e8f0;font-size:12px;position:relative;overflow:hidden;margin-bottom:30px}
.tb-head{display:flex;align-items:center;gap:6px;font-weight:700;color:#94a3b8;margin-bottom:10px}
.tb-head .dot{width:8px;height:8px;border-radius:50%;background:#22c55e;animation:blink 1.5s infinite}
@keyframes blink{50%{opacity:.3}}
.tb-idle{position:absolute;top:50%;left:0;right:0;text-align:center;color:#64748b;transition:opacity .3s}
.tb-card{background:#1e293b;border-radius:10px;padding:10px;border-left:4px solid #ef4444;opacity:0;transform:translateX(60px);transition:all .5s cubic-bezier(.2,.8,.2,1.2)}
.tb-row{display:flex;justify-content:space-between;align-items:center;font-size:15px}
.tb-new{background:#ef4444;color:#fff;border-radius:5px;font-size:10px;font-weight:800;padding:2px 6px;animation:blink 1s infinite}
.tb-no{color:#fbbf24;font-weight:800;margin:2px 0}
.tb-sub{color:#cbd5e1}
.tb-btn{margin-top:10px;background:#16a34a;color:#fff;border-radius:8px;padding:8px;text-align:center;font-weight:800;transition:transform .15s}
.tb-done{display:none;margin-top:10px;background:#1d4ed8;color:#fff;border-radius:8px;padding:8px;text-align:center;font-weight:800}
.demo[data-step="3"] .tb-card,.demo[data-step="4"] .tb-card{opacity:1;transform:none}
.demo[data-step="3"] .tb-idle,.demo[data-step="4"] .tb-idle{opacity:0}
.demo[data-step="4"] .tb-card{border-left-color:#f59e0b}
.demo[data-step="4"] .tb-new{display:none}
.demo[data-step="4"] .tb-btn{animation:press .5s ease .5s both}
@keyframes press{50%{transform:scale(.9);filter:brightness(1.3)}}
.demo[data-step="4"] .tb-done{display:block;animation:up .4s ease-out 1s both}
.demo[data-step="4"] .tb-btn{display:none}

/* Controls */
.demo-ctrl{grid-column:1/-1;display:flex;justify-content:center;align-items:center;gap:10px}
.dots{display:flex;gap:6px;background:#fff;padding:6px;border-radius:999px;box-shadow:0 4px 18px rgba(15,23,42,.08)}
.dot-btn{border:0;background:transparent;display:flex;align-items:center;gap:5px;padding:5px 8px;border-radius:999px;color:#64748b;font-weight:700;font-size:13px}
.dot-btn span{width:22px;height:22px;border-radius:50%;background:#e9edf5;display:grid;place-items:center;font-size:12px}
.dot-btn em{font-style:normal;display:none}
.dot-btn.on{background:var(--accent);color:#fff}
.dot-btn.on span{background:rgba(255,255,255,.25)}
.dot-btn.on em{display:inline}
.pause{border:0;width:36px;height:36px;border-radius:50%;background:#fff;box-shadow:0 4px 18px rgba(15,23,42,.08);font-size:11px;color:#334155}
.caption{grid-column:1/-1;text-align:center;font-weight:600;color:#334155;min-height:44px;max-width:420px;margin:0 auto;line-height:1.45;animation:up .4s ease-out}


@media (max-width:560px){
  .demo:not(.compact){grid-template-columns:1fr;gap:12px}
  .demo:not(.compact) .phone{margin:0 auto}
  .demo:not(.compact) .tablet{margin:0 auto;height:auto;min-height:150px;width:250px}
  .dot-btn{padding:5px 6px}
}

/* Compact version on the menu page: small phone + caption side by side */
.demo.compact{grid-template-columns:auto 1fr;gap:10px 14px;align-items:center}
.demo.compact .phone{width:250px;height:510px;transform:scale(.56);transform-origin:top left;margin:0 -110px -224px 0;grid-row:1/3}
.demo.compact .tablet{display:none}
.demo.compact .demo-ctrl{grid-column:2;grid-row:2;justify-content:flex-start;align-self:start;flex-wrap:wrap}
.demo.compact .caption{grid-column:2;grid-row:1;text-align:left;align-self:end;margin:0;font-size:14.5px;min-height:0}
.demo.compact .dots{flex-wrap:wrap;border-radius:14px}
.demo.compact .dot-btn em{display:none}
.demo.compact .dot-btn{padding:3px}
.demo.compact .pause{width:30px;height:30px}
@media (prefers-reduced-motion:reduce){.scr *,.tablet *{animation-duration:.01ms!important}}