/* Direct thermal animation on /labels/munbyn: on a rose stage with thin thermal-paper lines, a 4 x 6
   shipping label feeds out under a glowing print head (heat, no ink). The first one comes out pale and
   gets a "Too light" tag, then moves aside; the Darkness control steps up one notch; the second label
   comes out crisp, the rest of the stack follows and a "Print one, then the rest" note lands.
   Sizes are cqw of .mb-scene. Reduced motion: pale test label aside, Darkness one step up, crisp label
   with the stack behind it, and the note. */
.hub-anim.ha-labels-munbyn .ha-stage { background-color: #fbe6ea; background-image: repeating-linear-gradient(0deg, rgba(136, 19, 55, 0.06) 0 1px, transparent 1px 14px);
    border: 1px solid #f1cdd5; min-height: 0; padding-bottom: 3rem; }
.hub-anim.ha-labels-munbyn .mb-scene { position: relative; container-type: inline-size; aspect-ratio: 2.45; max-width: 940px; margin: 0 auto;
    --mb-park: translate(-28cqw, 2.6cqw) rotate(-5deg) scale(0.9); --mb-off: translateY(-32cqw); --mb-r1: translate(1.2cqw, 0.8cqw) rotate(3deg); --mb-r2: translate(2.4cqw, 1.6cqw) rotate(6deg); }
.hub-anim.ha-labels-munbyn .mb-scene p { margin: 0; }
.hub-anim.ha-labels-munbyn .mb-scene * { box-sizing: border-box; }

/* print head */
.hub-anim.ha-labels-munbyn .mb-head { position: absolute; z-index: 3; left: 29cqw; top: 1.4cqw; width: 28cqw; height: 5.2cqw; border: 2px solid #0f0f12; border-radius: 1.4cqw;
    background: linear-gradient(180deg, #3b2a30, #1f1418); display: grid; place-items: center; box-shadow: 0 1.4cqw 2cqw -1.2cqw rgba(15, 15, 18, 0.5); }
.hub-anim.ha-labels-munbyn .mb-glow { position: absolute; left: 2cqw; right: 2cqw; bottom: -0.5cqw; height: 0.9cqw; border-radius: 1cqw;
    background: linear-gradient(90deg, #fb923c, #fde68a 50%, #fb923c); box-shadow: 0 0 1.4cqw 0.3cqw rgba(251, 146, 60, 0.75); opacity: 0.25; }
.hub-anim.ha-labels-munbyn .mb-heat { position: relative; color: #fde2e8; white-space: nowrap; font: 800 clamp(0.66rem, 1.4cqw, 0.88rem)/1 Manrope, Inter, sans-serif; letter-spacing: 0.01em; }

/* labels feed out below the head; only the top edge is clipped */
.hub-anim.ha-labels-munbyn .mb-feed { position: absolute; z-index: 2; left: 32cqw; top: 6.6cqw; width: 22cqw; height: 34cqw; clip-path: inset(0 -300cqw -300cqw -300cqw); }
.hub-anim.ha-labels-munbyn .mb-lab, .hub-anim.ha-labels-munbyn .mb-rest { position: absolute; left: 1cqw; top: 0; width: 20cqw; height: 30cqw; background: #fff; border: 1.5px solid #d9c5ca; border-radius: 0.9cqw;
    box-shadow: 0 1.4cqw 2.2cqw -1.4cqw rgba(15, 15, 18, 0.4); }
.hub-anim.ha-labels-munbyn .mb-rest1 { transform: var(--mb-r1); }
.hub-anim.ha-labels-munbyn .mb-rest2 { transform: var(--mb-r2); }
.hub-anim.ha-labels-munbyn .mb-l1 { transform: var(--mb-park); }
.hub-anim.ha-labels-munbyn .mb-ink { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 0.45cqw; padding: 1.9cqw; color: #111; overflow: hidden; }
.hub-anim.ha-labels-munbyn .mb-l1 .mb-ink { opacity: 0.28; }
.hub-anim.ha-labels-munbyn .mb-small { font: 700 clamp(0.5rem, 1cqw, 0.66rem)/1.2 Inter, system-ui, sans-serif; text-transform: uppercase; letter-spacing: 0.06em; color: #3f3f46; }
.hub-anim.ha-labels-munbyn .mb-name { font: 800 clamp(0.74rem, 1.85cqw, 1.15rem)/1.15 Manrope, Inter, sans-serif; margin-top: 0.3cqw !important; }
.hub-anim.ha-labels-munbyn .mb-line { font: 500 clamp(0.6rem, 1.25cqw, 0.8rem)/1.25 Inter, system-ui, sans-serif; white-space: nowrap; }
.hub-anim.ha-labels-munbyn .mb-bars { display: block; flex: 1 1 auto; margin: 1.2cqw 0 0.5cqw; padding-top: 1.3cqw; border-top: 2px solid #111; background-clip: content-box;
    background-image: repeating-linear-gradient(90deg, #111 0 0.3cqw, transparent 0.3cqw 0.52cqw, #111 0.52cqw 0.66cqw, transparent 0.66cqw 0.96cqw, #111 0.96cqw 1.4cqw, transparent 1.4cqw 1.62cqw); }
.hub-anim.ha-labels-munbyn .mb-light { position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%) rotate(-8deg); white-space: nowrap; padding: 0.7cqw 1.4cqw; border-radius: 999px;
    background: #fff; color: #881337; border: 2px solid #881337; font: 800 clamp(0.7rem, 1.5cqw, 0.95rem)/1 Manrope, Inter, sans-serif; box-shadow: 2px 3px 0 #881337; }

/* darkness control */
.hub-anim.ha-labels-munbyn .mb-card { position: absolute; left: 66cqw; top: 5cqw; width: 26cqw; padding: 1.8cqw 2cqw 2cqw; background: #fff; border: 2px solid #0f0f12; border-radius: 1.4cqw;
    box-shadow: 0 1.8cqw 2.6cqw -1.6cqw rgba(15, 15, 18, 0.45); }
.hub-anim.ha-labels-munbyn .mb-chead { font: 800 clamp(0.8rem, 1.7cqw, 1.05rem)/1.1 Manrope, Inter, sans-serif; color: #0f0f12; margin-bottom: 1.4cqw !important; }
.hub-anim.ha-labels-munbyn .mb-meter { display: flex; gap: 0.8cqw; }
.hub-anim.ha-labels-munbyn .mb-meter i { flex: 1 1 0; height: 2cqw; border-radius: 0.5cqw; background: #f3e5e8; box-shadow: inset 0 0 0 1.5px #e2c6cd; }
.hub-anim.ha-labels-munbyn .mb-meter .mb-on, .hub-anim.ha-labels-munbyn .mb-meter .mb-up { background: #881337; box-shadow: inset 0 0 0 1.5px #881337; }
.hub-anim.ha-labels-munbyn .mb-plus { position: absolute; right: 1.6cqw; top: 1.2cqw; padding: 0.5cqw 1cqw; border-radius: 999px; background: #881337; color: #fff;
    font: 800 clamp(0.66rem, 1.4cqw, 0.88rem)/1 Manrope, Inter, sans-serif; }
.hub-anim.ha-labels-munbyn .mb-note { position: absolute; z-index: 4; left: 64cqw; top: 26cqw; white-space: nowrap; padding: 0.8cqw 1.5cqw; border-radius: 999px; background: #881337; color: #fff;
    font: 800 clamp(0.74rem, 1.6cqw, 1rem)/1 Manrope, Inter, sans-serif; box-shadow: 3px 4px 0 #0f0f12; transform: rotate(-3deg); }

@media (max-width: 880px) {
    .hub-anim.ha-labels-munbyn .mb-scene { max-width: 460px; aspect-ratio: 0.8; --mb-park: translate(-28cqw, 66cqw) rotate(-5deg) scale(0.5); --mb-off: translateY(-64cqw); --mb-r1: translate(2.2cqw, 1.6cqw) rotate(3deg); --mb-r2: translate(4.4cqw, 3.2cqw) rotate(6deg); }
    .hub-anim.ha-labels-munbyn .mb-head { left: 14cqw; top: 2cqw; width: 72cqw; height: 10cqw; border-radius: 3cqw; }
    .hub-anim.ha-labels-munbyn .mb-glow { left: 5cqw; right: 5cqw; bottom: -1cqw; height: 1.8cqw; }
    .hub-anim.ha-labels-munbyn .mb-heat { font-size: 3.6cqw; }
    .hub-anim.ha-labels-munbyn .mb-feed { left: 27cqw; top: 11cqw; width: 46cqw; height: 62cqw; }
    .hub-anim.ha-labels-munbyn .mb-lab, .hub-anim.ha-labels-munbyn .mb-rest { left: 3cqw; width: 40cqw; height: 60cqw; border-radius: 1.8cqw; }
    .hub-anim.ha-labels-munbyn .mb-ink { padding: 3.8cqw; gap: 0.9cqw; }
    .hub-anim.ha-labels-munbyn .mb-small { font-size: 2.3cqw; }
    .hub-anim.ha-labels-munbyn .mb-name { font-size: 4.3cqw; }
    .hub-anim.ha-labels-munbyn .mb-line { font-size: 3cqw; }
    .hub-anim.ha-labels-munbyn .mb-bars { margin: 2.4cqw 0 1cqw; padding-top: 2.6cqw;
        background-image: repeating-linear-gradient(90deg, #111 0 0.6cqw, transparent 0.6cqw 1.04cqw, #111 1.04cqw 1.32cqw, transparent 1.32cqw 1.92cqw, #111 1.92cqw 2.8cqw, transparent 2.8cqw 3.24cqw); }
    .hub-anim.ha-labels-munbyn .mb-light { font-size: 6cqw; padding: 2cqw 3.6cqw; border-width: 3px; }
    .hub-anim.ha-labels-munbyn .mb-card { left: 47cqw; top: 84cqw; width: 51cqw; padding: 3.4cqw 3.6cqw 3.8cqw; border-radius: 2.6cqw; }
    .hub-anim.ha-labels-munbyn .mb-chead { font-size: 4cqw; margin-bottom: 2.6cqw !important; }
    .hub-anim.ha-labels-munbyn .mb-meter { gap: 1.4cqw; }
    .hub-anim.ha-labels-munbyn .mb-meter i { height: 3.6cqw; border-radius: 1cqw; }
    .hub-anim.ha-labels-munbyn .mb-plus { right: 3cqw; top: 2.8cqw; font-size: 3.3cqw; padding: 1cqw 2cqw; }
    .hub-anim.ha-labels-munbyn .mb-note { left: auto; right: 2cqw; top: 111cqw; font-size: 3.7cqw; padding: 2cqw 3.4cqw; }
}
@media (prefers-reduced-motion: reduce) { .hub-anim.ha-labels-munbyn .ba-toggle { display: none !important; } }
@media (prefers-reduced-motion: no-preference) {
    .hub-anim.ha-labels-munbyn .mb-glow, .hub-anim.ha-labels-munbyn .mb-lab, .hub-anim.ha-labels-munbyn .mb-light, .hub-anim.ha-labels-munbyn .mb-up, .hub-anim.ha-labels-munbyn .mb-plus,
    .hub-anim.ha-labels-munbyn .mb-rest, .hub-anim.ha-labels-munbyn .mb-note, .hub-anim.ha-labels-munbyn .mb-card {
        animation-duration: 12s; animation-iteration-count: infinite; animation-timing-function: ease; animation-fill-mode: both; }
    /* the head glows while a label feeds */
    .hub-anim.ha-labels-munbyn .mb-glow { animation-name: hamb-glow; }
    @keyframes hamb-glow { 0%, 4% { opacity: 0.25; } 6%, 21% { opacity: 1; } 24%, 49% { opacity: 0.25; } 51%, 66% { opacity: 1; } 69%, 100% { opacity: 0.25; } }
    /* first pass: pale test label, then it moves aside */
    .hub-anim.ha-labels-munbyn .mb-l1 { animation-name: hamb-l1; }
    @keyframes hamb-l1 { 0%, 5% { transform: var(--mb-off); opacity: 1; animation-timing-function: linear; } 22% { transform: none; } 32% { transform: none; animation-timing-function: cubic-bezier(.5, 0, .3, 1); }
        42%, 94% { transform: var(--mb-park); opacity: 1; } 98%, 100% { transform: var(--mb-park); opacity: 0; } }
    .hub-anim.ha-labels-munbyn .mb-light { animation-name: hamb-light; }
    @keyframes hamb-light { 0%, 23% { opacity: 0; transform: translate(-50%, -50%) rotate(-8deg) scale(1.4); } 26%, 100% { opacity: 1; transform: translate(-50%, -50%) rotate(-8deg); } }
    /* darkness up one step */
    .hub-anim.ha-labels-munbyn .mb-card { animation-name: hamb-card; }
    @keyframes hamb-card { 0%, 36%, 46%, 100% { transform: none; } 40% { transform: scale(1.05); } }
    .hub-anim.ha-labels-munbyn .mb-up { animation-name: hamb-up; }
    @keyframes hamb-up { 0%, 38% { background: #f3e5e8; box-shadow: inset 0 0 0 1.5px #e2c6cd; } 41%, 96% { background: #881337; box-shadow: inset 0 0 0 1.5px #881337; } 99%, 100% { background: #f3e5e8; box-shadow: inset 0 0 0 1.5px #e2c6cd; } }
    .hub-anim.ha-labels-munbyn .mb-plus { animation-name: hamb-plus; }
    @keyframes hamb-plus { 0%, 37% { opacity: 0; transform: translateY(1cqw) scale(0.6); } 41%, 94% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; transform: none; } }
    /* second pass: crisp label, then the rest */
    .hub-anim.ha-labels-munbyn .mb-l2 { animation-name: hamb-l2; }
    @keyframes hamb-l2 { 0%, 50% { transform: var(--mb-off); opacity: 1; animation-timing-function: linear; } 67%, 94% { transform: none; opacity: 1; } 98%, 100% { transform: none; opacity: 0; } }
    .hub-anim.ha-labels-munbyn .mb-rest1 { animation-name: hamb-r1; }
    @keyframes hamb-r1 { 0%, 70% { opacity: 0; transform: none; } 74%, 94% { opacity: 1; transform: var(--mb-r1); } 98%, 100% { opacity: 0; transform: var(--mb-r1); } }
    .hub-anim.ha-labels-munbyn .mb-rest2 { animation-name: hamb-r2; }
    @keyframes hamb-r2 { 0%, 73% { opacity: 0; transform: none; } 77%, 94% { opacity: 1; transform: var(--mb-r2); } 98%, 100% { opacity: 0; transform: var(--mb-r2); } }
    .hub-anim.ha-labels-munbyn .mb-note { animation-name: hamb-note; }
    @keyframes hamb-note { 0%, 76% { opacity: 0; transform: rotate(-3deg) translateY(1cqw); } 80%, 94% { opacity: 1; transform: rotate(-3deg); } 98%, 100% { opacity: 0; transform: rotate(-3deg); } }
}