/* KOFI Order — σκηνή παρακολούθησης + μικρο-κινήσεις καλαθιού. Χρώματα από τα tokens του index.html. */
.track-scene{margin:16px 0 4px;border-radius:var(--radius,16px);background:linear-gradient(180deg,#F6EEE8 0%,var(--bg,#FBF7F3) 100%);
  border:1px solid var(--line,#E7D9D0);overflow:hidden;max-width:420px}
.track-scene svg{display:block;width:100%;height:auto}

/* υλικά */
.sc-floor{fill:#F1E4DA}.sc-wall{fill:#EADBD0}.sc-wall2{fill:#E0CDBF}
.sc-window{fill:#D6E6EC;stroke:#fff;stroke-width:2}.sc-frame{stroke:#fff;stroke-width:2}
.sc-sign{fill:var(--accent,#804839)}.sc-sign-t{fill:#fff;font:800 8.5px Inter,system-ui,sans-serif;letter-spacing:.5px}
.sc-wood-t{fill:#B98A72}.sc-wood-l{fill:#9C6D57}.sc-wood-r{fill:#875B47}
.sc-jar-t{fill:#F4E3C7}.sc-jar-l{fill:#E4C79A}.sc-jar-r{fill:#CFAE7E}
.sc-ctr-t{fill:#A9705C}.sc-ctr-l{fill:var(--accent,#804839)}.sc-ctr-r{fill:var(--accent-strong,#5C3229)}
.sc-mach-t{fill:#4A3A34}.sc-mach-l{fill:#D8D1CC}.sc-mach-r{fill:#B3AAA4}
.sc-head-t{fill:#6E625C}.sc-head-l{fill:#8E847E}.sc-head-r{fill:#7A706A}
.sc-print-t{fill:#3B3230}.sc-print-l{fill:#5A4F4B}.sc-print-r{fill:#4A403D}
.sc-pot-t{fill:#6E4A3C}.sc-pot-l{fill:#C9876B}.sc-pot-r{fill:#AE7158}.sc-leaf{fill:#7FA36B}
.sc-road{fill:#E6D8CD}.sc-dash{fill:#fff}
.sc-light{fill:#9C928C}
.sc-paper{fill:#fff;stroke:#D8CBC2;stroke-width:.6}.sc-ink{stroke:#A3938A;stroke-width:1.1;stroke-linecap:round}
.sc-cup{fill:#fff;stroke:#D8CBC2;stroke-width:.8}.sc-cup-rim{fill:#F7F1EC;stroke:#D8CBC2;stroke-width:.8}
.sc-cup-handle{fill:none;stroke:#fff;stroke-width:2.6}.sc-saucer{fill:#fff;stroke:#D8CBC2;stroke-width:.8}
.sc-coffee{fill:#7A4A36;transform-box:fill-box;transform-origin:50% 100%;transform:scaleY(0)}
.sc-steam path{fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round;opacity:0}
.sc-body{fill:var(--accent,#804839)}.sc-seat{fill:#3B2A24}.sc-bag{fill:#F2B544}.sc-bag-t{fill:#5C3229;font:800 8px Inter,system-ui,sans-serif}
.sc-wheel{fill:#2E2522}.sc-hub{fill:#CFC6C0}
.sc-check circle{fill:var(--ok,#2E7D32)}.sc-check path{fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}

/* ό,τι δεν ανήκει στο τρέχον στάδιο είναι κρυμμένο */
.sc-cupA,.sc-cupB,.sc-steam,.sc-ticket,.sc-scooter,.sc-check{opacity:0;transition:opacity .4s ease}
.sc-check-in{transform-box:fill-box;transform-origin:center}

/* 1. καταχωρήθηκε: τυπώνεται το δελτίο */
.track-scene[data-stage="received"] .sc-ticket{opacity:1}
.track-scene[data-stage="received"] .sc-ticket-in{animation:sc-print 2.4s ease-in-out infinite}
.track-scene[data-stage="received"] .sc-light{animation:sc-blink 1.2s steps(2,start) infinite}

/* 2. ετοιμάζεται: γεμίζει η κούπα κάτω από τη μηχανή */
.track-scene[data-stage="making"] .sc-cupA{opacity:1}
.track-scene[data-stage="making"] .sc-cupA .sc-coffee{animation:sc-fill 3.2s ease-in-out infinite}
.track-scene[data-stage="making"] .sc-steamA{opacity:1}
.track-scene[data-stage="making"] .sc-steamA path{animation:sc-steam 2.2s ease-out infinite}
.track-scene[data-stage="making"] .sc-steamA path:nth-child(2){animation-delay:.6s}
.track-scene[data-stage="making"] .sc-steamA path:nth-child(3){animation-delay:1.2s}
.track-scene[data-stage="making"] .sc-light{fill:#6BBF59}

/* 3. καθ' οδόν (μόνο delivery): το μηχανάκι φεύγει, ξανά και ξανά */
.track-scene[data-stage="road"] .sc-scooter{opacity:1;animation:sc-ride 3.6s linear infinite}
.track-scene[data-stage="road"] .sc-bob{animation:sc-bob .35s ease-in-out infinite alternate}
.track-scene[data-stage="road"] .sc-light{fill:#6BBF59}

/* 4. ολοκληρώθηκε */
.track-scene[data-stage="done"] .sc-cupB{opacity:1}
.track-scene[data-stage="done"] .sc-cupB .sc-coffee{transform:scaleY(.86)}
.track-scene[data-stage="done"] .sc-steamB{opacity:1}
.track-scene[data-stage="done"] .sc-steamB path{animation:sc-steam 2.4s ease-out infinite}
.track-scene[data-stage="done"] .sc-steamB path:nth-child(2){animation-delay:.8s}
.track-scene[data-stage="done"] .sc-steamB path:nth-child(3){animation-delay:1.6s}
.track-scene[data-stage="done"] .sc-check{opacity:1}
.track-scene[data-stage="done"] .sc-check-in{animation:sc-pop .5s cubic-bezier(.3,1.6,.5,1) both}
.track-scene[data-stage="done"][data-mode="delivery"] .sc-cupB,
.track-scene[data-stage="done"][data-mode="delivery"] .sc-steamB{opacity:0}

/* ακυρώθηκε: ήρεμη, άχρωμη σκηνή χωρίς κίνηση */
.track-scene[data-stage="cancelled"] svg{filter:grayscale(1);opacity:.55}

@keyframes sc-print{0%,15%{transform:translateY(16px);opacity:0}45%,80%{transform:translateY(0);opacity:1}100%{transform:translateY(-4px);opacity:0}}
@keyframes sc-blink{to{fill:#F2B544}}
@keyframes sc-fill{0%,8%{transform:scaleY(0)}70%,100%{transform:scaleY(.86)}}
@keyframes sc-steam{0%{opacity:0;transform:translateY(4px)}30%{opacity:.9}100%{opacity:0;transform:translateY(-10px)}}
@keyframes sc-ride{0%{transform:translate(-30px,-17px);opacity:0}10%{opacity:1}85%{opacity:1}100%{transform:translate(150px,87px);opacity:0}}
@keyframes sc-bob{to{transform:translateY(-1.2px)}}
@keyframes sc-pop{0%{transform:scale(0)}100%{transform:scale(1)}}

/* μικρο-κινήσεις καλαθιού */
.fly-bean{position:fixed;z-index:60;width:18px;height:18px;pointer-events:none;border-radius:50% 50% 50% 50%/60% 60% 40% 40%;
  background:radial-gradient(circle at 35% 30%,#A9705C,#5C3229 70%);box-shadow:0 2px 6px rgba(36,23,18,.3)}
.fly-bean::after{content:"";position:absolute;left:8px;top:3px;width:2px;height:12px;border-radius:2px;background:#3B2018;transform:rotate(12deg)}
#btnCart.cart-bump{animation:cart-bump .45s cubic-bezier(.3,1.5,.5,1)}
#btnCart.cart-bump .badge{animation:badge-pop .45s cubic-bezier(.3,1.6,.5,1)}
@keyframes cart-bump{0%{transform:scale(1)}35%{transform:scale(1.18) rotate(-6deg)}70%{transform:scale(.96) rotate(3deg)}100%{transform:scale(1)}}
@keyframes badge-pop{0%{transform:scale(1)}40%{transform:scale(1.5)}100%{transform:scale(1)}}

@media (prefers-reduced-motion:reduce){
  .track-scene *,.track-scene *::before{animation:none!important;transition:none!important}
  .track-scene[data-stage="making"] .sc-cupA .sc-coffee{transform:scaleY(.6)}
  .track-scene[data-stage="received"] .sc-ticket-in{transform:none}
  .track-scene[data-stage="making"] .sc-steamA path,.track-scene[data-stage="done"] .sc-steamB path{opacity:.8}
  .track-scene[data-stage="road"] .sc-scooter{transform:translate(60px,35px)}
  #btnCart.cart-bump,#btnCart.cart-bump .badge{animation:none}
}