/* /barcode-label-maker: a code typed on a card, its CODE128 bars drawing in on a 2 x 1 sticker,
   a red scan line passing over, and a "Scans as A-203" chip. Night-desk stage (ink, soft dots).
   Static (reduced-motion) state: typed code, full label and the read chip, no scan line. */
.hub-anim.ha-barcode-label-maker .ha-stage { background-color: #16181d; background-image: radial-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1.2px); background-size: 16px 16px; border: 1px solid #0f0f12; min-height: 0; padding-top: 2.4rem; padding-bottom: 3.2rem; }
.hub-anim.ha-barcode-label-maker .ba-toggle { border-color: #fafafa; }
.hub-anim.ha-barcode-label-maker .ha-scene { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.3fr) minmax(0, 0.8fr); gap: 1.4rem; align-items: center; justify-items: center; }
.hub-anim.ha-barcode-label-maker .ha-type { width: 100%; max-width: 220px; box-sizing: border-box; padding: 0.8rem 0.9rem 0.9rem; background: #fdfbf5; border: 2px solid #0f0f12; border-radius: 14px; transform: rotate(-2deg); box-shadow: 4px 5px 0 #f43f5e; }
.hub-anim.ha-barcode-label-maker .ha-type-k { display: inline-block; margin: 0 0 0.6rem; padding: 0.3rem 0.5rem; border-radius: 6px; background: #0f0f12; color: #fafafa; font: 800 0.66rem/1 Manrope, Inter, sans-serif; letter-spacing: 0.12em; }
.hub-anim.ha-barcode-label-maker .ha-field { display: flex; align-items: center; margin: 0; padding: 0.6rem 0.7rem; border: 2px solid #0f0f12; border-radius: 9px; background: #fff; font: 700 1.5rem/1 "SFMono-Regular", Consolas, Menlo, monospace; color: #0f0f12; }
.hub-anim.ha-barcode-label-maker .ha-typed { display: inline-block; overflow: hidden; white-space: nowrap; width: 5ch; }
.hub-anim.ha-barcode-label-maker .ha-caret { display: inline-block; width: 2px; height: 1.1em; margin-left: 3px; background: #f43f5e; opacity: 0; }
.hub-anim.ha-barcode-label-maker .ha-label { position: relative; width: 100%; max-width: 330px; aspect-ratio: 2 / 1; box-sizing: border-box; padding: 9% 9% 4%; display: flex; flex-direction: column; gap: 5%;
    background: #fff; border-radius: 12px; box-shadow: 0 0 0 2px #0f0f12, 0 26px 40px -18px rgba(0, 0, 0, 0.8); }
.hub-anim.ha-barcode-label-maker .ha-bars { flex: 1 1 auto; display: block; width: 180px; align-self: center; background-repeat: no-repeat; background-size: 100% 100%; }
.hub-anim.ha-barcode-label-maker .ha-hr { display: block; text-align: center; font: 700 clamp(0.9rem, 1.6vw, 1.15rem)/1 "SFMono-Regular", Consolas, Menlo, monospace; letter-spacing: 0.18em; color: #0f0f12; }
.hub-anim.ha-barcode-label-maker .ha-beam { position: absolute; left: 3%; right: 3%; top: 40%; height: 3px; border-radius: 3px; background: #ff2d4a; box-shadow: 0 0 10px 2px rgba(255, 45, 74, 0.7), 0 0 26px 6px rgba(255, 45, 74, 0.3); opacity: 0; pointer-events: none; }
.hub-anim.ha-barcode-label-maker .ha-read { display: inline-flex; align-items: center; gap: 0.55rem; margin: 0; padding: 0.5rem 0.9rem 0.5rem 0.5rem; white-space: nowrap; background: #fdfbf5; border: 2px solid #0f0f12; border-radius: 12px; transform: rotate(-2.5deg); box-shadow: 4px 5px 0 #34d399; }
.hub-anim.ha-barcode-label-maker .ha-read i { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 999px; background: #059669; color: #fff; }
.hub-anim.ha-barcode-label-maker .ha-read svg { width: 15px; height: 15px; }
.hub-anim.ha-barcode-label-maker .ha-read span { font: 700 0.84rem/1 Inter, system-ui, sans-serif; color: #52525b; }
.hub-anim.ha-barcode-label-maker .ha-read b { font: 800 1.05rem/1 "SFMono-Regular", Consolas, Menlo, monospace; color: #0f0f12; }
@media (min-width: 1100px) { .hub-anim.ha-barcode-label-maker .ha-bars { width: 270px; } }
@media (max-width: 760px) {
    .hub-anim.ha-barcode-label-maker .ha-stage { padding-top: 1.6rem; }
    .hub-anim.ha-barcode-label-maker .ha-scene { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
    .hub-anim.ha-barcode-label-maker .ha-type { max-width: 200px; }
    .hub-anim.ha-barcode-label-maker .ha-label { max-width: 270px; }
    .hub-anim.ha-barcode-label-maker .ha-hr { font-size: 1rem; }
}
@media (prefers-reduced-motion: no-preference) {
    .hub-anim.ha-barcode-label-maker .ha-typed, .hub-anim.ha-barcode-label-maker .ha-caret, .hub-anim.ha-barcode-label-maker .ha-bars, .hub-anim.ha-barcode-label-maker .ha-hr, .hub-anim.ha-barcode-label-maker .ha-beam, .hub-anim.ha-barcode-label-maker .ha-read, .hub-anim.ha-barcode-label-maker .ha-label { animation-duration: 10s; animation-iteration-count: infinite; animation-fill-mode: both; }
    /* 0.5-1.7s type, 2.0-3.4s bars draw, 3.5s text, 4.0-5.6s scan, 5.8s read chip, hold, 9.3s reset */
    .hub-anim.ha-barcode-label-maker .ha-typed { animation-name: habctype; animation-timing-function: linear; }
    @keyframes habctype { 0%, 5% { width: 0; } 6% { width: 1ch; } 8.5% { width: 2ch; } 11% { width: 3ch; } 13.5% { width: 4ch; } 16%, 93% { width: 5ch; } 97%, 100% { width: 0; } }
    .hub-anim.ha-barcode-label-maker .ha-caret { animation-name: habccaret; animation-timing-function: steps(1, end); }
    @keyframes habccaret { 0% { opacity: 1; } 3% { opacity: 0; } 5%, 18% { opacity: 1; } 20% { opacity: 0; } 22% { opacity: 1; } 24%, 100% { opacity: 0; } }
    .hub-anim.ha-barcode-label-maker .ha-bars { animation-name: habcbars; animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
    @keyframes habcbars { 0%, 20% { clip-path: inset(0 100% 0 0); } 34%, 93% { clip-path: inset(0 0 0 0); opacity: 1; } 97%, 100% { clip-path: inset(0 0 0 0); opacity: 0; } }
    .hub-anim.ha-barcode-label-maker .ha-hr { animation-name: habchr; animation-timing-function: ease-out; }
    @keyframes habchr { 0%, 33% { opacity: 0; transform: translateY(6px); } 37%, 93% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } }
    .hub-anim.ha-barcode-label-maker .ha-beam { animation-name: habcbeam; animation-timing-function: ease-in-out; }
    @keyframes habcbeam { 0%, 39% { opacity: 0; top: 14%; } 41% { opacity: 1; top: 14%; } 48% { top: 66%; } 55% { opacity: 1; top: 22%; } 57%, 100% { opacity: 0; top: 40%; } }
    .hub-anim.ha-barcode-label-maker .ha-label { animation-name: habclabel; animation-timing-function: ease-out; }
    @keyframes habclabel { 0%, 56% { box-shadow: 0 0 0 2px #0f0f12, 0 26px 40px -18px rgba(0, 0, 0, 0.8); } 58% { box-shadow: 0 0 0 2px #0f0f12, 0 0 0 9px rgba(52, 211, 153, 0.55), 0 26px 40px -18px rgba(0, 0, 0, 0.8); } 66%, 100% { box-shadow: 0 0 0 2px #0f0f12, 0 0 0 22px rgba(52, 211, 153, 0), 0 26px 40px -18px rgba(0, 0, 0, 0.8); } }
    .hub-anim.ha-barcode-label-maker .ha-read { animation-name: habcread; animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1); }
    @keyframes habcread { 0%, 57% { opacity: 0; transform: rotate(-2.5deg) translateX(-14px) scale(0.85); } 62%, 93% { opacity: 1; transform: rotate(-2.5deg); } 97%, 100% { opacity: 0; transform: rotate(-2.5deg); } }
    @media (max-width: 760px) {
        @keyframes habcread { 0%, 57% { opacity: 0; transform: rotate(-2.5deg) translateY(-12px) scale(0.85); } 62%, 93% { opacity: 1; transform: rotate(-2.5deg); } 97%, 100% { opacity: 0; transform: rotate(-2.5deg); } }
    }
}
.hub-anim.ha-barcode-label-maker .ha-bars { background-image: linear-gradient(90deg, #0f0f12 0.000% 2.222%, transparent 2.222% 3.333%, #0f0f12 3.333% 4.444%, transparent 4.444% 6.667%, #0f0f12 6.667% 7.778%, transparent 7.778% 12.222%, #0f0f12 12.222% 13.333%, transparent 13.333% 14.444%, #0f0f12 14.444% 15.556%, transparent 15.556% 18.889%, #0f0f12 18.889% 21.111%, transparent 21.111% 24.444%, #0f0f12 24.444% 25.556%, transparent 25.556% 27.778%, #0f0f12 27.778% 30.000%, transparent 30.000% 31.111%, #0f0f12 31.111% 34.444%, transparent 34.444% 36.667%, #0f0f12 36.667% 38.889%, transparent 38.889% 41.111%, #0f0f12 41.111% 44.444%, transparent 44.444% 46.667%, #0f0f12 46.667% 47.778%, transparent 47.778% 48.889%, #0f0f12 48.889% 50.000%, transparent 50.000% 52.222%, #0f0f12 52.222% 55.556%, transparent 55.556% 56.667%, #0f0f12 56.667% 58.889%, transparent 58.889% 61.111%, #0f0f12 61.111% 63.333%, transparent 63.333% 65.556%, #0f0f12 65.556% 66.667%, transparent 66.667% 67.778%, #0f0f12 67.778% 71.111%, transparent 71.111% 73.333%, #0f0f12 73.333% 74.444%, transparent 74.444% 78.889%, #0f0f12 78.889% 80.000%, transparent 80.000% 81.111%, #0f0f12 81.111% 83.333%, transparent 83.333% 85.556%, #0f0f12 85.556% 87.778%, transparent 87.778% 91.111%, #0f0f12 91.111% 94.444%, transparent 94.444% 95.556%, #0f0f12 95.556% 96.667%, transparent 96.667% 97.778%, #0f0f12 97.778% 100.000%); }