/* Vikbot — packbot.css (PackBot page only): animated pack-out station */

/* hero: isometric packing bench (same frame as the home hero) */
.pb-iso-wrap { position: relative; width: 100%; aspect-ratio: 1 / 1; margin-left: auto; }
.pb-iso-wrap canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: pan-y; }
@media (max-width: 960px) { .pb-iso-wrap { margin: 0 auto; max-width: 560px; } }

.pb-dark { background: var(--stage); color: #E8EAEE; }
.pb-dark .h2 { color: #fff; } .pb-dark .h2 .muted { color: #8C929C; }
.pb-dark .eyebrow { color: #4ADE5A; } .pb-dark .sec-head .body { color: #A4AAB4; }

.pb-demo { display: grid; grid-template-columns: 1.55fr 1fr; gap: 32px; align-items: stretch; }
.pb-stage { position: relative; border-radius: var(--r-card); overflow: hidden; background: radial-gradient(120% 90% at 50% 10%, #22252B 0%, #15171B 60%, #101114 100%); border: 1px solid #23262C; }
.pb-svg { display: block; width: 100%; height: auto; }
.pb-svg text { font-family: var(--font); }
.pb-svg .mono { font-family: var(--mono); }

/* moving parts */
.pb-svg .mv { transform-box: fill-box; transition: transform .8s var(--ease), opacity .5s var(--ease); }
.pb-svg .pb-noanim, .pb-svg .pb-noanim * { transition: none !important; }

.pb-box { transform: translateY(-70px); opacity: 0; transform-origin: center bottom; }
.pb-box.in { transform: none; opacity: 1; }
.pb-box.out { transform: translateY(-40px); opacity: 0; }
.pb-box .pb-open, .pb-box .pb-closed, .pb-box .pb-boxlabel { transition: opacity .45s var(--ease); }
.pb-box .pb-closed, .pb-box .pb-boxlabel { opacity: 0; }
.pb-box.shut .pb-open { opacity: 0; }
.pb-box.shut .pb-closed { opacity: 1; }
.pb-box.labelled .pb-boxlabel { opacity: 1; }

.pb-item { transform-origin: center; transform: translateX(-340px); opacity: 0; }
.pb-item.in { transform: none; opacity: 1; }
.pb-item.drop { transform: translateY(46px) scale(.55); opacity: 0; transition-duration: .6s; }
.pb-item.back { transform: translateX(-340px); opacity: 0; }

.pb-label { transform-origin: 0 0; transform: scaleY(0); opacity: 0; transition: transform 1.3s linear, opacity .2s; }
.pb-label.print { transform: scaleY(1); opacity: 1; }
.pb-label.stick { transform: translate(-221px, -63px) scale(.65); opacity: 1; transition: transform .9s var(--ease); }
.pb-label.gone { opacity: 0; transition: none; }

.pb-cursor { transition: transform .7s var(--ease), opacity .3s; }
.pb-cursor.press .pb-cursor-ring { animation: pb-ring .45s ease-out; }
@keyframes pb-ring { from { r: 2; opacity: .9; } to { r: 16; opacity: 0; } }

.pb-beam { opacity: 0; transition: opacity .25s; }
.pb-svg.scanning .pb-beam { opacity: 1; }
.pb-svg.scanning .pb-scan-lens { fill: #4ADE5A; }
.pb-flash { opacity: 0; pointer-events: none; }
.pb-svg.flash .pb-flash { animation: pb-flash .45s ease-out; }
.pb-svg.flash .pb-top-lens { animation: pb-lens .6s ease-out; }
@keyframes pb-flash { 0% { opacity: .55; } 100% { opacity: 0; } }
@keyframes pb-lens { 0%, 40% { fill: #fff; } 100% { fill: #E9F7FF; } }

/* on-screen UI */
.pb-btn rect { fill: #1E2127; stroke: #30343C; transition: fill .3s, stroke .3s; }
.pb-btn text { fill: #8C929C; transition: fill .3s; }
.pb-btn.on rect { fill: #238D10; stroke: #2FA318; }
.pb-btn.on text { fill: #fff; }
.pb-btn.hit rect { fill: #4ADE5A; }
.pb-row rect { fill: #171A1F; transition: fill .3s; }
.pb-row.ok rect { fill: rgb(47 163 24 / .18); }
.pb-row .pb-qty { fill: #A4AAB4; }
.pb-row.ok .pb-qty { fill: #4ADE5A; }
.pb-row .pb-dot { fill: #30343C; transition: fill .3s; }
.pb-row.ok .pb-dot { fill: #2FA318; }
.pb-panel { transition: fill .3s, stroke .3s; }
.pb-screen-g { transition: opacity .35s; }

/* side: phases + captured log */
.pb-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.pb-phases { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.pb-phases li { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 12px; border: 1px solid #23262C; color: #8C929C; font-size: 15px; transition: background .3s, color .3s, border-color .3s; }
.pb-phases li b { font-family: var(--mono); font-weight: 400; font-size: 12px; color: #5D636D; transition: color .3s; }
.pb-phases li.on { background: #1A2A17; border-color: #2F6B22; color: #fff; }
.pb-phases li.on b { color: #4ADE5A; }
.pb-phases li.done { color: #C9CED6; }
.pb-phases li.done b { color: #2FA318; }

.pb-log-card { flex: 1; display: flex; flex-direction: column; border: 1px solid #23262C; border-radius: 14px; background: #15171B; overflow: hidden; min-height: 240px; }
.pb-log-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-bottom: 1px solid #23262C; font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: #8C929C; }
.pb-log-head span { color: #4ADE5A; }
.pb-log { list-style: none; margin: 0; padding: 8px; display: flex; flex-direction: column; gap: 6px; overflow: hidden; }
.pb-log li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; background: #1C1E24; font-size: 13.5px; color: #E8EAEE; animation: pb-in .35s var(--ease); }
.pb-log li .st { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; flex: none; }
.pb-log li .st .icon { width: 12px; height: 12px; }
.pb-log li .st.ok { background: rgb(47 163 24 / .2); color: #4ADE5A; }
.pb-log li .st.no { background: rgb(229 72 77 / .18); color: #FF7A7E; }
.pb-log li .st.cam { background: rgb(74 158 255 / .16); color: #8EC2FF; }
.pb-log li .t { margin-left: auto; font-family: var(--mono); font-size: 11px; color: #7A808A; white-space: nowrap; }
.pb-log li small { display: block; font-size: 12px; color: #8C929C; }
@keyframes pb-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.pb-replay { align-self: flex-start; }
.pb-dark .pb-replay { background: transparent; color: #E8EAEE; border-color: #30343C; }
.pb-dark .pb-replay:hover { border-color: #4ADE5A; }

@media (max-width: 960px) {
  .pb-demo { grid-template-columns: 1fr; }
  .pb-phases { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .pb-phases li { flex-direction: column; align-items: flex-start; gap: 2px; padding: 8px 10px; font-size: 12.5px; }
  .pb-log-card { min-height: 0; max-height: 300px; }
}
@media (max-width: 560px) {
  .pb-phases { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  .pb-svg .mv, .pb-label, .pb-cursor, .pb-log li { transition: none !important; animation: none !important; }
  .pb-svg.flash .pb-flash, .pb-svg.flash .pb-top-lens { animation: none; }
}