/* /inventory-labels: a 3 x 2 shelf of bins, a location label lands on each, a scanner ticks one (cool steel and racking orange). */
.hub-anim.ha-inventory-labels .ha-stage { border: 1px solid #d3dee8; min-height: 0; padding-bottom: 3rem;
    background-color: #e8eff5; background-image: radial-gradient(rgba(30, 58, 95, 0.13) 1.2px, transparent 1.3px); background-size: 18px 18px; }
.hub-anim.ha-inventory-labels .hi-scene { position: relative; z-index: 1; display: flex; justify-content: center; padding-bottom: 58px; }
.hub-anim.ha-inventory-labels .hi-shelf + .hi-beam-bar + .hi-shelf { position: relative; z-index: 3; }
.hub-anim.ha-inventory-labels .hi-rack { position: relative; width: min(100%, 600px); box-sizing: border-box; padding: 0 14px; }
.hub-anim.ha-inventory-labels .hi-rack::before, .hub-anim.ha-inventory-labels .hi-rack::after { content: ""; position: absolute; top: -12px; bottom: -40px; width: 14px; background: #1e3a5f; border: 2px solid #0f0f12; border-radius: 3px; box-sizing: border-box;
    background-image: repeating-linear-gradient(180deg, transparent 0 12px, rgba(255, 255, 255, 0.35) 12px 16px); background-size: 4px 100%; background-repeat: no-repeat; background-position: center; }
.hub-anim.ha-inventory-labels .hi-rack::before { left: 0; } .hub-anim.ha-inventory-labels .hi-rack::after { right: 0; }
.hub-anim.ha-inventory-labels .hi-shelf { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; padding: 22px 12px 0; align-items: end; }
.hub-anim.ha-inventory-labels .hi-beam-bar { position: relative; z-index: 2; height: 14px; margin: 0 -14px; background: #f97316; border: 2px solid #0f0f12; border-radius: 3px; box-shadow: 0 8px 12px -8px rgba(15, 15, 18, 0.5); }
/* bins */
.hub-anim.ha-inventory-labels .hi-bin { position: relative; height: 112px; border: 2.5px solid #0f0f12; border-bottom: 0; border-radius: 8px 8px 0 0; box-sizing: border-box;
    background: linear-gradient(180deg, #4f8fd1 0 14px, #0f0f12 14px 16px, #3d7cc0 16px 100%); }
.hub-anim.ha-inventory-labels .hi-bin::before { content: ""; position: absolute; left: 50%; top: 24px; width: 34%; height: 10px; margin-left: -17%; border-radius: 999px; background: #2a5f99; border: 2px solid #0f0f12; box-sizing: border-box; }
.hub-anim.ha-inventory-labels .hi-tag { position: absolute; left: 10%; right: 10%; bottom: 12px; padding: 6px 6px 6px; background: #fff; border: 2px solid #0f0f12; border-radius: 6px;
    display: flex; flex-direction: column; align-items: center; gap: 4px; box-sizing: border-box; box-shadow: 0 4px 0 rgba(15, 15, 18, 0.25); }
.hub-anim.ha-inventory-labels .hi-code { font: 800 1rem/1 "SFMono-Regular", Consolas, monospace; letter-spacing: 0.02em; color: #0f0f12; white-space: nowrap; }
.hub-anim.ha-inventory-labels .hi-bc { display: block; width: 86%; height: 18px;
    background: repeating-linear-gradient(90deg, #0f0f12 0 2px, transparent 2px 4px, #0f0f12 4px 5px, transparent 5px 6px, #0f0f12 6px 9px, transparent 9px 11px, #0f0f12 11px 12px, transparent 12px 13px, #0f0f12 13px 15px, transparent 15px 18px); }
.hub-anim.ha-inventory-labels .hi-b2 .hi-bc { background-position: 5px 0; } .hub-anim.ha-inventory-labels .hi-b3 .hi-bc { background-position: 9px 0; }
.hub-anim.ha-inventory-labels .hi-b4 .hi-bc { background-position: 3px 0; } .hub-anim.ha-inventory-labels .hi-b5 .hi-bc { background-position: 12px 0; } .hub-anim.ha-inventory-labels .hi-b6 .hi-bc { background-position: 7px 0; }
.hub-anim.ha-inventory-labels .hi-b5 .hi-tag { box-shadow: 0 0 0 3px #22c55e, 0 4px 0 rgba(15, 15, 18, 0.25); }
/* scanner, below bin A2-02, pointing up at its label */
.hub-anim.ha-inventory-labels .hi-gun { position: absolute; left: 50%; top: calc(100% + 26px); width: 34px; height: 46px; margin-left: -17px; z-index: 4; transform: rotate(14deg); transform-origin: 50% 0; }
.hub-anim.ha-inventory-labels .hi-gun b { position: absolute; inset: 0; background: #27272a; border: 2px solid #0f0f12; border-radius: 10px 10px 8px 8px; box-sizing: border-box; }
.hub-anim.ha-inventory-labels .hi-gun b::before { content: ""; position: absolute; left: 5px; right: 5px; top: 3px; height: 6px; border-radius: 3px; background: #ef4444; }
.hub-anim.ha-inventory-labels .hi-gun b::after { content: ""; position: absolute; left: 22px; top: 26px; width: 15px; height: 34px; background: #3f3f46; border: 2px solid #0f0f12; border-radius: 6px; transform: rotate(-38deg); transform-origin: 0 0; z-index: -1; }
.hub-anim.ha-inventory-labels .hi-beam { position: absolute; left: 50%; bottom: 100%; width: 74px; height: 64px; margin-left: -37px; background: linear-gradient(0deg, rgba(239, 68, 68, 0.55), rgba(239, 68, 68, 0.12));
    clip-path: polygon(44% 100%, 56% 100%, 100% 0, 0 0); }
.hub-anim.ha-inventory-labels .hi-ok { position: absolute; left: 50%; top: -18px; z-index: 5; display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px 5px 5px; white-space: nowrap;
    background: #fff; border: 2px solid #0f0f12; border-radius: 999px; box-shadow: 3px 4px 0 #0f0f12; transform: translateX(-50%) rotate(-4deg); }
.hub-anim.ha-inventory-labels .hi-ok svg { width: 20px; height: 20px; padding: 3px; box-sizing: border-box; border-radius: 999px; background: #16a34a; color: #fff; }
.hub-anim.ha-inventory-labels .hi-ok span { font: 800 0.82rem/1 "SFMono-Regular", Consolas, monospace; color: #0f0f12; }
@media (max-width: 760px) {
    .hub-anim.ha-inventory-labels .ha-stage { padding-bottom: 3.4rem; }
    .hub-anim.ha-inventory-labels .hi-rack { padding: 0 10px; }
    .hub-anim.ha-inventory-labels .hi-rack::before, .hub-anim.ha-inventory-labels .hi-rack::after { width: 10px; }
    .hub-anim.ha-inventory-labels .hi-beam-bar { margin: 0 -10px; height: 11px; }
    .hub-anim.ha-inventory-labels .hi-shelf { gap: 7px; padding: 20px 5px 0; }
    .hub-anim.ha-inventory-labels .hi-bin { height: 84px; background: linear-gradient(180deg, #4f8fd1 0 10px, #0f0f12 10px 12px, #3d7cc0 12px 100%); }
    .hub-anim.ha-inventory-labels .hi-bin::before { top: 18px; height: 8px; }
    .hub-anim.ha-inventory-labels .hi-tag { left: 6%; right: 6%; bottom: 8px; padding: 5px 3px; gap: 3px; }
    .hub-anim.ha-inventory-labels .hi-code { font-size: 0.76rem; }
    .hub-anim.ha-inventory-labels .hi-bc { height: 13px; }
    .hub-anim.ha-inventory-labels .hi-ok span { font-size: 0.74rem; }
    .hub-anim.ha-inventory-labels .hi-beam { height: 54px; }
}
@media (prefers-reduced-motion: reduce) { .hub-anim.ha-inventory-labels .ba-toggle { display: none !important; } }
@media (prefers-reduced-motion: no-preference) {
    .hub-anim.ha-inventory-labels .hi-tag, .hub-anim.ha-inventory-labels .hi-gun, .hub-anim.ha-inventory-labels .hi-beam, .hub-anim.ha-inventory-labels .hi-ok { animation-duration: 11s; animation-iteration-count: infinite; animation-timing-function: ease-out; }
    .hub-anim.ha-inventory-labels .hi-b1 .hi-tag { animation-name: hait1; } .hub-anim.ha-inventory-labels .hi-b2 .hi-tag { animation-name: hait2; } .hub-anim.ha-inventory-labels .hi-b3 .hi-tag { animation-name: hait3; }
    .hub-anim.ha-inventory-labels .hi-b4 .hi-tag { animation-name: hait4; } .hub-anim.ha-inventory-labels .hi-b5 .hi-tag { animation-name: hait5; } .hub-anim.ha-inventory-labels .hi-b6 .hi-tag { animation-name: hait6; }
    .hub-anim.ha-inventory-labels .hi-gun { animation-name: haigun; } .hub-anim.ha-inventory-labels .hi-beam { animation-name: haibeam; } .hub-anim.ha-inventory-labels .hi-ok { animation-name: haiok; }
    /* each label is pressed onto its bin in turn: drop, small overshoot, settle */
    @keyframes hait1 { 0%, 4% { opacity: 0; transform: translateY(-26px) scale(0.85) rotate(-6deg); } 7% { opacity: 1; transform: translateY(2px) scale(1.04); } 9%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: none; } }
    @keyframes hait2 { 0%, 11% { opacity: 0; transform: translateY(-26px) scale(0.85) rotate(-6deg); } 14% { opacity: 1; transform: translateY(2px) scale(1.04); } 16%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: none; } }
    @keyframes hait3 { 0%, 18% { opacity: 0; transform: translateY(-26px) scale(0.85) rotate(-6deg); } 21% { opacity: 1; transform: translateY(2px) scale(1.04); } 23%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: none; } }
    @keyframes hait4 { 0%, 25% { opacity: 0; transform: translateY(-26px) scale(0.85) rotate(-6deg); } 28% { opacity: 1; transform: translateY(2px) scale(1.04); } 30%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: none; } }
    @keyframes hait5 { 0%, 32% { opacity: 0; transform: translateY(-26px) scale(0.85) rotate(-6deg); box-shadow: 0 0 0 0 #22c55e, 0 4px 0 rgba(15, 15, 18, 0.25); } 35% { opacity: 1; transform: translateY(2px) scale(1.04); box-shadow: 0 0 0 0 #22c55e, 0 4px 0 rgba(15, 15, 18, 0.25); }
        37%, 63% { opacity: 1; transform: none; box-shadow: 0 0 0 0 #22c55e, 0 4px 0 rgba(15, 15, 18, 0.25); } 66%, 92% { opacity: 1; transform: none; box-shadow: 0 0 0 3px #22c55e, 0 4px 0 rgba(15, 15, 18, 0.25); } 97%, 100% { opacity: 0; transform: none; } }
    @keyframes hait6 { 0%, 39% { opacity: 0; transform: translateY(-26px) scale(0.85) rotate(-6deg); } 42% { opacity: 1; transform: translateY(2px) scale(1.04); } 44%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: none; } }
    /* scanner rises in, beam flickers on, green tick pops */
    @keyframes haigun { 0%, 48% { opacity: 0; transform: translateY(40px) rotate(24deg); } 54%, 90% { opacity: 1; transform: rotate(14deg); } 96%, 100% { opacity: 0; transform: translateY(40px) rotate(24deg); } }
    @keyframes haibeam { 0%, 56% { opacity: 0; } 58% { opacity: 1; } 60% { opacity: 0.4; } 62%, 70% { opacity: 1; } 74%, 100% { opacity: 0; } }
    @keyframes haiok { 0%, 64% { opacity: 0; transform: translateX(-50%) translateY(8px) rotate(-4deg) scale(0.7); } 68% { opacity: 1; transform: translateX(-50%) rotate(-4deg) scale(1.08); } 70%, 91% { opacity: 1; transform: translateX(-50%) rotate(-4deg); } 96%, 100% { opacity: 0; transform: translateX(-50%) rotate(-4deg); } }
}