/* store.css — owned by WP-STORE. Tokens only (docs/vfx-master-spec.md §1 rule 5).
   Motion answers a question and settles at identity; every rule here has a
   text/state twin in store.js so the screen reads the same without it. */

/* ---- PICK: the crate docked in the header, where every tick lands ------- */
.st-crate-dock { display: flex; align-items: center; gap: var(--fc-s-3); }
.st-crate { width: 56px; height: 56px; flex: none; position: relative; display: grid; place-items: center; }
.st-crate img, .st-crate canvas { width: 100%; height: 100%; object-fit: contain; object-position: center bottom; }
.st-crate.is-icon { border-radius: var(--fc-r-md); background: var(--on-glass-chip); color: var(--txt-3); }
.st-crate-fill { margin-top: var(--fc-s-3); }
.pick-box .vfx-check { width: 24px; height: 24px; }
.pick.is-done .pick-box.fc-state-ok { color: var(--accent-ink); }

/* ---- WEIGH: the platform scale under the readout ------------------------ */
.st-scale-art { width: 96px; height: 96px; margin: var(--fc-s-3) auto 0; }
.st-scale-art img, .st-scale-art canvas { width: 100%; height: 100%; object-fit: contain; object-position: center bottom; }

/* ---- PACK: checklist ticks draw on; the label slides out of its slot ---- */
.check .box.fc-state-ok { color: var(--accent-ink); }
.check .box.fc-state-ok::after { display: none; }
.check .box .vfx-check { width: 16px; height: 16px; }
.st-label-slot { overflow: hidden; }
.st-label.is-printing { animation: st-print var(--fc-m-slow) var(--fc-ease-out) both; }
@keyframes st-print { from { transform: translateY(-100%); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---- DISPATCH: the van drives off the right edge, then is removed ------- */
.st-van { position: fixed; left: var(--fc-s-4); bottom: 40%; width: 96px; height: 96px; z-index: var(--fc-z-top); pointer-events: none; }
.st-van img, .st-van canvas { width: 100%; height: 100%; object-fit: contain; object-position: center bottom; }

/* ---- SCAN: the bracket snaps onto the code and the laser holds ---------- */
.scanner.is-locked .scan-win { animation: st-lock var(--fc-m-quick) var(--fc-ease-out) both; }
.scanner.is-locked .scan-win::before, .scanner.is-locked .scan-win::after { border-color: var(--fc-success); }
.scanner.is-locked .scan-laser { animation-play-state: paused; opacity: .3; }
@keyframes st-lock { from { transform: scale(1.08); } to { transform: none; } }
.st-lock-tag { position: absolute; top: var(--fc-s-3); left: 0; right: 0; text-align: center; font-size: var(--fc-t-2xs); font-weight: var(--fc-w-bold); letter-spacing: .08em; text-transform: uppercase; color: var(--fc-green-400); pointer-events: none; }

/* ---- INVENTORY: kg bars against the biggest lot ------------------------- */
.st-kg { display: inline-flex; flex-direction: column; align-items: flex-end; gap: var(--fc-s-1); min-width: 56px; }
.st-kg .fc-track { width: 48px; }

@media (prefers-reduced-motion: reduce) {
  .st-label.is-printing, .scanner.is-locked .scan-win { animation: none; }
}