/* /labels/brother: a plain QL-style printer on a lavender desk feeds 62 mm continuous tape. Three pantry
   labels (Rice, Brown sugar, Steel-cut oats) slide out one at a time, a blade flashes at the slot and each
   piece, cut to its own length, slides over to a stack on the right. Sizes in cqw of .bt-scene.
   Reduced motion: all three cut pieces resting in the stack. */
.hub-anim.ha-labels-brother .ha-stage { background-color: #eee8f8; background-image: repeating-linear-gradient(0deg, rgba(91, 33, 182, 0.07) 0 1px, transparent 1px 22px); border: 1px solid #ddd3f0; min-height: 0; }
.hub-anim.ha-labels-brother .bt-scene { position: relative; container-type: inline-size; aspect-ratio: 2.55; max-width: 940px; margin: 0 auto; overflow: hidden;
    --bt-sx: 25.5cqw; --bt-sy: 12cqw; --bt-h: 10cqw; }
.hub-anim.ha-labels-brother .bt-chip { position: absolute; z-index: 4; left: 3cqw; top: 1.5cqw; margin: 0; padding: 0.42rem 0.8rem; border-radius: 999px; background: #fff; color: #3b0764; border: 2px solid #0f0f12; white-space: nowrap;
    font: 800 clamp(0.74rem, 1.55cqw, 0.92rem)/1 Manrope, Inter, sans-serif; box-shadow: 3px 4px 0 #0f0f12; transform: rotate(-2deg); }
.hub-anim.ha-labels-brother .bt-printer { position: absolute; z-index: 3; left: 4cqw; top: 7cqw; width: 22cqw; height: 20cqw; box-sizing: border-box; background: linear-gradient(#fbfafe, #e9e4f3); border: 2px solid #0f0f12;
    border-radius: 2.4cqw 2.4cqw 1.6cqw 1.6cqw; box-shadow: 0 2.2cqw 3cqw -1.6cqw rgba(15, 15, 18, 0.45); }
.hub-anim.ha-labels-brother .bt-lid { position: absolute; left: 1.6cqw; right: 1.6cqw; top: 2.4cqw; height: 6cqw; border-radius: 1.2cqw; background: #d8cdee; box-shadow: inset 0 0 0 1.5px rgba(15, 15, 18, 0.25); }
.hub-anim.ha-labels-brother .bt-lid::after { content: ""; position: absolute; right: 1.2cqw; top: 50%; width: 4cqw; height: 4cqw; margin-top: -2cqw; border-radius: 50%; background: radial-gradient(circle, #d8cdee 0 22%, #0f0f12 22% 30%, #fff 30% 100%); box-shadow: inset 0 0 0 1.5px #0f0f12; }
.hub-anim.ha-labels-brother .bt-btn { position: absolute; left: 2cqw; bottom: 2.2cqw; width: 2.4cqw; height: 2.4cqw; border-radius: 50%; background: #7c3aed; box-shadow: inset 0 0 0 1.5px #0f0f12; }
.hub-anim.ha-labels-brother .bt-slot { position: absolute; right: -0.6cqw; top: 4cqw; width: 1.2cqw; height: 12cqw; border-radius: 0.6cqw; background: #0f0f12; }
.hub-anim.ha-labels-brother .bt-blade { position: absolute; z-index: 5; left: calc(var(--bt-sx) + 0.2cqw); top: calc(var(--bt-sy) - 1.2cqw); width: 0.5cqw; height: calc(var(--bt-h) + 2.4cqw); border-radius: 0.3cqw; background: #7c3aed; opacity: 0; }
.hub-anim.ha-labels-brother .bt-piece { position: absolute; z-index: 2; left: var(--bt-sx); top: var(--bt-sy); width: var(--w); height: var(--bt-h); margin: 0; box-sizing: border-box; display: flex; align-items: center; padding: 0 2.2cqw;
    background: #fff; border: 1.5px solid #c9c2d6; border-radius: 0.5cqw; box-shadow: 0 0.5cqw 0.9cqw -0.3cqw rgba(15, 15, 18, 0.28);
    transform: translate(var(--x), var(--y)) rotate(var(--r)); }
.hub-anim.ha-labels-brother .bt-piece b { display: block; white-space: nowrap; font: 800 4cqw/1 Manrope, Inter, sans-serif; letter-spacing: -0.02em; color: #0f0f12; }
.hub-anim.ha-labels-brother .bt-p1 { --w: 15cqw; --x: 39.5cqw; --y: -10cqw; --r: -2deg; }
.hub-anim.ha-labels-brother .bt-p2 { --w: 27.5cqw; --x: 39cqw; --y: 2.2cqw; --r: 1.5deg; }
.hub-anim.ha-labels-brother .bt-p3 { --w: 32.5cqw; --x: 38.5cqw; --y: 14.6cqw; --r: -1deg; }
.hub-anim.ha-labels-brother .bt-note { position: absolute; z-index: 4; left: 5cqw; top: 31cqw; margin: 0; padding: 0.42rem 0.8rem; border-radius: 999px; background: #4c1d95; color: #fff; white-space: nowrap;
    font: 800 clamp(0.74rem, 1.55cqw, 0.92rem)/1 Manrope, Inter, sans-serif; box-shadow: 3px 4px 0 #0f0f12; transform: rotate(2deg); }
@media (max-width: 880px) {
    .hub-anim.ha-labels-brother .bt-scene { max-width: 460px; aspect-ratio: 0.95; --bt-sx: 37cqw; --bt-sy: 25cqw; --bt-h: 15cqw; }
    .hub-anim.ha-labels-brother .bt-chip { left: 4cqw; top: 2cqw; }
    .hub-anim.ha-labels-brother .bt-printer { left: 4cqw; top: 18cqw; width: 34cqw; height: 28cqw; border-radius: 4cqw 4cqw 3cqw 3cqw; }
    .hub-anim.ha-labels-brother .bt-lid { left: 2.6cqw; right: 2.6cqw; top: 3.2cqw; height: 8.5cqw; border-radius: 2cqw; }
    .hub-anim.ha-labels-brother .bt-lid::after { width: 6cqw; height: 6cqw; margin-top: -3cqw; right: 1.6cqw; }
    .hub-anim.ha-labels-brother .bt-btn { left: 3cqw; bottom: 3cqw; width: 3.6cqw; height: 3.6cqw; }
    .hub-anim.ha-labels-brother .bt-slot { right: -0.9cqw; top: 6cqw; width: 1.8cqw; height: 17cqw; }
    .hub-anim.ha-labels-brother .bt-blade { width: 0.9cqw; }
    .hub-anim.ha-labels-brother .bt-piece { padding: 0 3.4cqw; border-radius: 1cqw; }
    .hub-anim.ha-labels-brother .bt-piece b { font-size: 6.2cqw; }
    .hub-anim.ha-labels-brother .bt-p1 { --w: 23cqw; --x: -31cqw; --y: 28cqw; --r: -2deg; }
    .hub-anim.ha-labels-brother .bt-p2 { --w: 43cqw; --x: -30cqw; --y: 46.5cqw; --r: 1.5deg; }
    .hub-anim.ha-labels-brother .bt-p3 { --w: 51cqw; --x: -31cqw; --y: 65cqw; --r: -1deg; }
    .hub-anim.ha-labels-brother .bt-note { left: auto; right: 4cqw; top: 57cqw; transform: rotate(3deg); }
}
@media (prefers-reduced-motion: reduce) { .hub-anim.ha-labels-brother .ba-toggle { display: none !important; } }
@media (prefers-reduced-motion: no-preference) {
    .hub-anim.ha-labels-brother .bt-piece, .hub-anim.ha-labels-brother .bt-blade, .hub-anim.ha-labels-brother .bt-note, .hub-anim.ha-labels-brother .bt-btn { animation-duration: 12s; animation-iteration-count: infinite; animation-timing-function: linear; animation-fill-mode: both; }
    .hub-anim.ha-labels-brother .bt-p1 { animation-name: habt-p1; }
    @keyframes habt-p1 {
        0%, 5% { opacity: 1; transform: translate(-100%, 0); clip-path: inset(0 0 0 100%); }
        13%, 17% { opacity: 1; transform: none; clip-path: inset(0 0 0 0); animation-timing-function: cubic-bezier(.5, 0, .3, 1); }
        23%, 93% { opacity: 1; transform: translate(var(--x), var(--y)) rotate(var(--r)); clip-path: inset(0 0 0 0); }
        97.5% { opacity: 0; transform: translate(var(--x), var(--y)) rotate(var(--r)); clip-path: inset(0 0 0 0); }
        98%, 100% { opacity: 0; transform: translate(-100%, 0); clip-path: inset(0 0 0 100%); } }
    .hub-anim.ha-labels-brother .bt-p2 { animation-name: habt-p2; }
    @keyframes habt-p2 {
        0%, 26% { opacity: 1; transform: translate(-100%, 0); clip-path: inset(0 0 0 100%); }
        38%, 42% { opacity: 1; transform: none; clip-path: inset(0 0 0 0); animation-timing-function: cubic-bezier(.5, 0, .3, 1); }
        48%, 93% { opacity: 1; transform: translate(var(--x), var(--y)) rotate(var(--r)); clip-path: inset(0 0 0 0); }
        97.5% { opacity: 0; transform: translate(var(--x), var(--y)) rotate(var(--r)); clip-path: inset(0 0 0 0); }
        98%, 100% { opacity: 0; transform: translate(-100%, 0); clip-path: inset(0 0 0 100%); } }
    .hub-anim.ha-labels-brother .bt-p3 { animation-name: habt-p3; }
    @keyframes habt-p3 {
        0%, 51% { opacity: 1; transform: translate(-100%, 0); clip-path: inset(0 0 0 100%); }
        64%, 68% { opacity: 1; transform: none; clip-path: inset(0 0 0 0); animation-timing-function: cubic-bezier(.5, 0, .3, 1); }
        74%, 93% { opacity: 1; transform: translate(var(--x), var(--y)) rotate(var(--r)); clip-path: inset(0 0 0 0); }
        97.5% { opacity: 0; transform: translate(var(--x), var(--y)) rotate(var(--r)); clip-path: inset(0 0 0 0); }
        98%, 100% { opacity: 0; transform: translate(-100%, 0); clip-path: inset(0 0 0 100%); } }
    .hub-anim.ha-labels-brother .bt-blade { animation-name: habt-blade; }
    @keyframes habt-blade {
        0%, 13.5% { opacity: 0; transform: scaleY(0.4); } 14.5%, 16% { opacity: 1; transform: none; } 17%, 38.5% { opacity: 0; transform: scaleY(0.4); }
        39.5%, 41% { opacity: 1; transform: none; } 42%, 64.5% { opacity: 0; transform: scaleY(0.4); } 65.5%, 67% { opacity: 1; transform: none; } 68%, 100% { opacity: 0; transform: scaleY(0.4); } }
    .hub-anim.ha-labels-brother .bt-btn { animation-name: habt-btn; animation-timing-function: ease; }
    @keyframes habt-btn { 0%, 4%, 14%, 25%, 39%, 50%, 65%, 100% { background-color: #7c3aed; } 8%, 10%, 31%, 35%, 56%, 61% { background-color: #c4b5fd; } }
    .hub-anim.ha-labels-brother .bt-note { animation-name: habt-note; animation-timing-function: ease; }
    @keyframes habt-note { 0%, 75% { opacity: 0; transform: rotate(2deg) translateY(6px); } 79%, 93% { opacity: 1; transform: rotate(2deg); } 97.5%, 100% { opacity: 0; transform: rotate(2deg); } }
    @media (max-width: 880px) { @keyframes habt-note { 0%, 75% { opacity: 0; transform: rotate(3deg) translateY(6px); } 79%, 93% { opacity: 1; transform: rotate(3deg); } 97.5%, 100% { opacity: 0; transform: rotate(3deg); } } }
}