/* Движок сцен телефона: скопировано из clients/kp-venue/anim/anim.css (строки 15–178), классы переименованы с префиксом a-,
   чтобы не пересекаться с css/story.css. Исходник не меняли. */
.an{margin:0;width:300px;display:flex;flex-direction:column;align-items:center;gap:14px}
.an-dev{position:relative;width:100%;aspect-ratio:360/740;filter:drop-shadow(0 30px 40px rgba(22,19,15,.28))}
.an-cv{position:absolute;left:0;top:0;width:360px;height:740px;transform-origin:0 0;font:400 15px/1.4 "Onest",system-ui,sans-serif;color:var(--i);
  -webkit-font-smoothing:antialiased;contain:layout paint}
.an-cv *{box-sizing:border-box}
.an-cv svg{display:block;width:100%;height:100%}
.a-ph{position:absolute;inset:0;border-radius:52px;background:#0C0B0A;padding:12px;box-shadow:inset 0 0 0 2px #2E2925,inset 0 0 0 4px #0C0B0A;transform-origin:50% 0}
.a-scr{position:relative;width:100%;height:100%;border-radius:41px;overflow:hidden;background:var(--g);isolation:isolate}
.a-isl{position:absolute;left:50%;top:22px;width:96px;height:27px;margin-left:-48px;border-radius:20px;background:#000;z-index:30}
.a-v{position:absolute;inset:0;opacity:0;transition:opacity .45s ease,transform .55s cubic-bezier(.22,.8,.24,1);will-change:opacity,transform}
.an-cap{display:flex;flex-direction:column;align-items:center;gap:10px;margin:0;min-height:52px;text-align:center}
.an-pr{display:flex;gap:5px}
.an-pr i{width:18px;height:3px;border-radius:2px;background:var(--line,#E6E1DA);transition:background .3s}
.an-pr i.a-on{background:var(--ember)}
.an-t{font:600 14px/1.35 var(--text);color:var(--ink);max-width:30ch;transition:opacity .25s}
.an-t.a-sw{opacity:0}
.an-note{font-size:12.5px;color:var(--faint);text-align:center;margin-top:-6px}

/* палец */
.an-f{position:absolute;left:0;top:0;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;z-index:50;pointer-events:none;opacity:0;
  background:rgba(255,255,255,.34);border:2px solid rgba(255,255,255,.9);box-shadow:0 6px 18px rgba(0,0,0,.35);
  transition:transform .42s cubic-bezier(.3,.7,.2,1),opacity .25s}
.an-f.a-on{opacity:1}
.an-f::after{content:"";position:absolute;inset:-2px;border-radius:50%;border:2px solid #fff;opacity:0}
.an-f.a-press{background:rgba(255,255,255,.6)}
.an-f.a-press::after{animation:an-rip .5s ease-out}
@keyframes an-rip{from{transform:scale(.7);opacity:.9}to{transform:scale(1.9);opacity:0}}

/* сброс между повторами и статичный кадр */
.an.an-fade .a-scr>.a-v,.an.an-fade .an-f{opacity:0!important;transition:opacity .45s}
.an.an-inst *,.an.an-inst *::before,.an.an-inst *::after{transition:none!important;animation:none!important}

/* ---------- общие экраны меню ---------- */
.a-mh{padding:54px 20px 10px;text-align:center;position:relative}
.a-lg{font:600 26px/1 var(--lf);letter-spacing:.2em;text-transform:uppercase;padding-left:.2em;color:var(--i)}
.a-ls{font:600 9.5px/1 "Onest",sans-serif;letter-spacing:.32em;text-transform:uppercase;color:var(--a);margin-top:8px}
.a-tb{display:inline-block;margin-top:11px;font-size:12px;font-weight:600;padding:5px 12px;border-radius:99px;background:var(--as);color:var(--i);border:1px solid var(--l)}
.a-chp{display:flex;gap:7px;padding:8px 16px 10px;overflow:hidden;white-space:nowrap;border-bottom:1px solid var(--l)}
.a-chp span{flex:none;font-size:12.5px;font-weight:600;padding:7px 12px;border-radius:99px;background:var(--p);color:var(--s);border:1px solid var(--l);transition:background .3s,color .3s}
.a-chp span.a-on{background:var(--a);color:var(--on);border-color:var(--a)}
.a-lw{position:absolute;left:0;right:0;top:196px;bottom:0;overflow:hidden}
.a-lst{position:absolute;left:0;right:0;top:0;padding:6px 14px 120px;transition:transform .9s cubic-bezier(.45,.05,.25,1),opacity .4s}
.a-lst.a-l2{opacity:0;transform:translateX(40px)}
.a-it{display:flex;gap:12px;align-items:center;padding:11px 0;border-bottom:1px solid var(--l);position:relative}
.a-r-ph{width:72px;height:72px;border-radius:14px;object-fit:cover;flex:none;background:var(--p)}
.a-r-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.a-r-t b{font-size:14.5px;font-weight:600;line-height:1.25;color:var(--i)}
.a-r-t small{font-size:11.5px;line-height:1.35;color:var(--s);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.a-r-p{font-size:13.5px;font-weight:700;color:var(--a)}
.a-it.a-np{padding:13px 0}
.a-plus{flex:none;position:relative;width:34px;height:34px;border-radius:50%;border:1.5px solid var(--a);color:var(--a);padding:7px;transition:background .3s,color .3s}
.a-plus i{position:absolute;inset:7px;opacity:0;transition:opacity .25s}
.a-plus>svg{transition:opacity .25s}
.a-bar{position:absolute;left:14px;right:14px;bottom:18px;height:56px;border-radius:18px;background:var(--a);color:var(--on);display:flex;align-items:center;gap:12px;
  padding:0 16px;font-weight:600;transform:translateY(90px);transition:transform .5s cubic-bezier(.22,.9,.3,1.2);box-shadow:0 10px 30px rgba(0,0,0,.35)}
.a-bar .a-q{width:28px;height:28px;border-radius:50%;background:rgba(0,0,0,.18);display:grid;place-items:center;font-size:13px}
.a-bar span{flex:1;font-size:14.5px}
.a-bar .a-sum{font-size:15px;font-variant-numeric:tabular-nums}
.a-sheet{top:auto;height:auto;bottom:0;border-radius:26px 26px 0 0;background:var(--p);opacity:1;transform:translateY(105%);padding:10px 18px 26px;
  box-shadow:0 -12px 40px rgba(0,0,0,.4);z-index:5}
.a-grab{display:block;width:38px;height:4px;border-radius:2px;background:var(--l);margin:0 auto 12px}
.a-sheet h4{margin:4px 0 8px;font:700 11px/1 "Onest",sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--a)}
.a-sh-ph{display:block;width:100%;height:210px;border-radius:18px;object-fit:cover;background:var(--as)}
.a-sh-ph.a-np{display:grid;place-items:center;height:120px;padding:16px;text-align:center;font:600 22px/1.2 var(--lf);color:var(--i);
  background:radial-gradient(120% 100% at 50% 0%,var(--as),var(--p))}
.a-sh-c{display:flex;flex-direction:column;gap:6px;padding-top:14px}
.a-sh-c b{font:600 21px/1.2 var(--lf);color:var(--i)}
.a-sh-c small{font-size:12.5px;color:var(--s);line-height:1.45;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.a-add{margin-top:10px;height:52px;border-radius:16px;background:var(--a);color:var(--on);display:flex;align-items:center;justify-content:space-between;padding:0 18px;font-weight:700}
.a-pr{display:flex;align-items:center;gap:10px;padding:12px 0;border-top:1px solid var(--l);font-size:14.5px}
.a-pr span:first-child{flex:1}
.a-pr b{font-weight:600;color:var(--s);font-size:13.5px}
.a-ch{display:flex;justify-content:space-between;align-items:baseline;padding:58px 20px 14px;border-bottom:1px solid var(--l)}
.a-ch b{font:600 22px/1 var(--lf)}
.a-ch span{font-size:13px;font-weight:600;color:var(--a)}
.a-cr{display:grid;grid-template-columns:1fr auto auto;gap:10px;padding:13px 20px;border-bottom:1px solid var(--l);font-size:14px;align-items:baseline}
.a-cr i{font-style:normal;color:var(--s);font-size:12.5px}
.a-cr b{font-weight:600;font-variant-numeric:tabular-nums}
.a-ct{display:flex;justify-content:space-between;padding:16px 20px 6px;font-size:17px;font-weight:700}
.a-ct b{color:var(--a)}
.a-cn{margin:0;padding:0 20px;font-size:12px;color:var(--s)}
.a-send{position:absolute;left:16px;right:16px;bottom:22px;height:56px;border-radius:18px;background:var(--a);color:var(--on);display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:15px;transition:transform .2s}
.a-sp{position:absolute;width:20px;height:20px;border-radius:50%;border:2.5px solid currentColor;border-right-color:transparent;opacity:0}
.a-cart{background:var(--g);transform:translateX(100%);opacity:1;z-index:6}
.a-ok{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;padding:30px;background:var(--g);z-index:9}
.a-okc{width:84px;height:84px;border-radius:50%;background:var(--a);color:var(--on);padding:20px;transform:scale(.4);transition:transform .6s cubic-bezier(.3,1.6,.4,1)}
.a-ok b{font:600 26px/1.15 var(--lf);margin-top:8px}
.a-ok small{font-size:13.5px;color:var(--s)}
.a-okn{margin:6px 0 0;font-size:12.5px;color:var(--s);max-width:24ch}
.a-stp{display:flex;gap:6px;margin-top:18px}
.a-stp span{font-size:12px;font-weight:600;padding:7px 11px;border-radius:99px;border:1px solid var(--l);color:var(--s)}
.a-stp span.a-on{background:var(--as);color:var(--a);border-color:var(--a)}
.a-fld{height:44px;border-radius:12px;background:var(--g);border:1px solid var(--l);display:flex;align-items:center;padding:0 13px;font-size:14px;color:var(--i);transition:border-color .3s}
.a-cur{width:1.5px;height:18px;background:var(--a);margin-left:1px;opacity:0}

/* Telegram официанта */
.a-tg{z-index:8;background:#C8D9B5;transform:translateX(30px)}
.a-tgv{position:absolute;inset:0;display:flex;flex-direction:column;font-size:14px;color:#111}
.a-tgh{display:flex;align-items:center;gap:10px;padding:52px 16px 12px;background:#fff;border-bottom:1px solid #E3E3E3}
.a-tgh .a-av{width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,#5FB0F0,#2C86D9);color:#fff;display:grid;place-items:center;font:600 16px/1 "Onest",sans-serif;font-style:normal}
.a-tgh b{display:block;font-size:15px}.a-tgh small{color:#8A8F95;font-size:12px}
.a-tgb{flex:1;padding:14px 12px;display:flex;flex-direction:column;gap:6px;background:linear-gradient(160deg,#D5E4C0,#B9CFA1);position:relative}
.a-day{align-self:center;font-size:11.5px;color:#fff;background:rgba(60,80,50,.35);padding:3px 10px;border-radius:99px;margin-bottom:6px}
.a-bub{align-self:flex-start;max-width:92%;background:#fff;border-radius:16px 16px 16px 4px;padding:10px 12px 8px;box-shadow:0 1px 1px rgba(0,0,0,.12);
  transform:translateY(16px) scale(.96);opacity:0;transition:transform .45s cubic-bezier(.2,.9,.3,1.2),opacity .3s;transform-origin:0 100%}
.a-bub p{margin:0;font-size:13.5px;line-height:1.42}
.a-bub time{display:block;text-align:right;font-size:11px;color:#9AA0A6;margin-top:2px}
.a-kb{display:flex;gap:5px;max-width:92%;opacity:0;transform:translateY(10px);transition:opacity .3s .15s,transform .4s .15s}
.a-kb span{flex:1;text-align:center;font-size:11.5px;font-weight:600;color:#fff;background:rgba(70,95,60,.5);border-radius:10px;padding:8px 2px;white-space:nowrap;transition:background .3s}
.a-toast{position:absolute;left:50%;top:44%;transform:translate(-50%,10px);background:rgba(20,20,20,.82);color:#fff;font-size:13px;padding:9px 16px;border-radius:12px;opacity:0;transition:opacity .3s,transform .3s}

/* ---------- 1. QR-меню ---------- */
.a-cam{opacity:1;background:#0B0A09;z-index:1}
.a-cam-bg{position:absolute;inset:-20px;background:center/cover no-repeat;filter:blur(10px) brightness(.55) saturate(1.1);transform:scale(1.1)}
.a-tent{position:absolute;left:50%;top:170px;width:190px;margin-left:-95px;padding:18px 16px 16px;border-radius:14px;background:#FBF8F3;color:#1A1714;text-align:center;
  box-shadow:0 24px 50px rgba(0,0,0,.55);transform:perspective(600px) rotateX(14deg)}
.a-tn{font:600 18px/1 var(--lf);letter-spacing:.18em;text-transform:uppercase}
.a-tq{width:118px;height:118px;margin:12px auto 10px;image-rendering:pixelated}
.a-tt{font:700 16px/1 "Onest",sans-serif}
.a-th{font-size:11px;color:#6B635A;margin-top:5px}
.a-scan{position:absolute;left:50%;top:202px;width:150px;height:150px;margin-left:-75px;opacity:0;transition:opacity .4s}
.a-scan i{position:absolute;width:30px;height:30px;border:4px solid #FFD54A;transition:transform .5s}
.a-scan i:nth-child(1){left:0;top:0;border-right:0;border-bottom:0;border-radius:10px 0 0 0}
.a-scan i:nth-child(2){right:0;top:0;border-left:0;border-bottom:0;border-radius:0 10px 0 0}
.a-scan i:nth-child(3){left:0;bottom:0;border-right:0;border-top:0;border-radius:0 0 0 10px}
.a-scan i:nth-child(4){right:0;bottom:0;border-left:0;border-top:0;border-radius:0 0 10px 0}
.a-scan b{position:absolute;left:8px;right:8px;top:8px;height:2px;background:#FFD54A;box-shadow:0 0 12px #FFD54A;opacity:.85}
.an.is-scan .a-scan{opacity:1}
.an.is-scan .a-scan b{animation:an-scan 1.1s ease-in-out infinite alternate}
@keyframes an-scan{to{transform:translateY(130px)}}
.an.is-found .a-scan i:nth-child(1){transform:translate(14px,14px)}.an.is-found .a-scan i:nth-child(2){transform:translate(-14px,14px)}
.an.is-found .a-scan i:nth-child(3){transform:translate(14px,-14px)}.an.is-found .a-scan i:nth-child(4){transform:translate(-14px,-14px)}
.an.is-found .a-scan b{animation:none;opacity:0}
.a-pill{position:absolute;left:28px;right:28px;bottom:120px;height:50px;border-radius:16px;background:#FFD54A;color:#1A1714;display:flex;align-items:center;gap:10px;
  padding:0 16px;font-weight:700;font-size:14.5px;opacity:0;transform:translateY(16px);transition:opacity .35s,transform .45s cubic-bezier(.2,.9,.3,1.3)}
.a-pi{width:24px;height:24px;border-radius:50%;background:#1A1714;color:#FFD54A;padding:5px;flex:none;transform:rotate(45deg)}
.an.is-found .a-pill{opacity:1;transform:none}
.an-menu .a-menu{z-index:2;transform:scale(.94)}
.an.is-menu .a-cam{opacity:0}
.an.is-menu .a-menu,.an-dlv .a-v.a-menu{opacity:1;transform:none}
.an.is-sc1 .a-l1{transform:translateY(-58px)}
.an.is-dish .a-dish{transform:none}
.an.is-pair .a-pair{transform:none;z-index:6}
.an.is-dish .a-menu .a-lw,.an.is-dish .a-menu .a-chp{opacity:.35;transition:opacity .4s}
.an.is-a1 .a-bar{transform:none}
.an.is-a2 .a-pair .a-o1 .a-plus,.an.is-a1 .a-l1 .a-d1 .a-plus,.an.is-a3 .a-l2 .a-d3 .a-plus,.an.is-a2 .a-l1 .a-d2 .a-plus{background:var(--a);color:var(--on)}
.an.is-a2 .a-pair .a-o1 .a-plus>svg,.an.is-a1 .a-l1 .a-d1 .a-plus>svg,.an.is-a3 .a-l2 .a-d3 .a-plus>svg,.an.is-a2 .a-l1 .a-d2 .a-plus>svg{opacity:0}
.an.is-a2 .a-pair .a-o1 .a-plus i,.an.is-a1 .a-l1 .a-d1 .a-plus i,.an.is-a3 .a-l2 .a-d3 .a-plus i,.an.is-a2 .a-l1 .a-d2 .a-plus i{opacity:1}
.an.is-s2 .a-l1{opacity:0;transform:translateX(-40px)}
.an.is-s2 .a-l2{opacity:1;transform:none}
.an.is-s2 .a-chp .a-c1{background:var(--p);color:var(--s);border-color:var(--l)}
.an.is-s2 .a-chp .a-tgt{background:var(--a);color:var(--on);border-color:var(--a)}
.an.is-cart .a-cart,.an.is-co .a-co{transform:none}
.an.is-sending .a-send .a-sp{opacity:1;animation:an-spin .8s linear infinite}
.an.is-sending .a-send span{opacity:0}
@keyframes an-spin{to{transform:rotate(360deg)}}
.an.is-tg .a-tg{opacity:1;transform:none}
.an.is-msg .a-bub{opacity:1;transform:none}
.an.is-msg .a-kb{opacity:1;transform:none}
.an.is-acc .a-kb .a-b1{background:rgba(46,125,50,.85)}
.an.is-acc .a-toast{opacity:1;transform:translate(-50%,0)}
.an.is-ok .a-v.a-ok:not(.a-sent):not(.a-fin):not(.a-bok),.an.is-sent .a-v.a-ok.a-sent,.an.is-fin .a-v.a-ok.a-fin,.an.is-bok .a-v.a-ok.a-bok{opacity:1}
.an.is-ok .a-v.a-ok .a-okc,.an.is-sent .a-sent .a-okc,.an.is-fin .a-fin .a-okc,.an.is-bok .a-bok .a-okc{transform:none}
