/* Niimbot cassette animation on /labels/niimbot: on a butter-yellow stage with soft plus marks, a small
   sky-blue label cassette is measured (40 mm wide, 30 mm tall). The editor's label size reads 40 x 30 mm,
   the canvas snaps from a wrong wide strip to the cassette's shape, a Basil / Jar 3 label with a QR
   code appears, then it drops out as a PNG and a PDF file. Sizes are cqw of .nb-scene.
   Reduced motion: measured cassette, finished label on the canvas, both files saved. */
.hub-anim.ha-labels-niimbot .ha-stage { background-color: #fdf3c8; border: 1px solid #f1e2a4; min-height: 0; padding-bottom: 3rem; background-image: radial-gradient(circle, rgba(146, 64, 14, 0.14) 1.4px, transparent 1.7px), radial-gradient(circle, rgba(146, 64, 14, 0.07) 1px, transparent 1.3px);
    background-size: 28px 28px, 28px 28px; background-position: 0 0, 14px 14px; background-repeat: repeat; }
.hub-anim.ha-labels-niimbot .nb-scene { position: relative; container-type: inline-size; aspect-ratio: 2.5; max-width: 940px; margin: 0 auto; }
.hub-anim.ha-labels-niimbot .nb-scene p { margin: 0; }
.hub-anim.ha-labels-niimbot .nb-scene * { box-sizing: border-box; }
.hub-anim.ha-labels-niimbot .nb-scene { --nb-ink: #0f0f12; --nb-blue: #1e40af; --nb-w0: 24cqw; --nb-h0: 8cqw; --nb-w1: 20cqw; --nb-h1: 15cqw; }

/* cassette */
.hub-anim.ha-labels-niimbot .nb-cass { position: absolute; left: 2cqw; top: 6cqw; width: 28cqw; height: 28cqw; border: 2px solid var(--nb-ink); border-radius: 4cqw;
    background: linear-gradient(160deg, #9fd6f2 0%, #6cbbe6 100%); box-shadow: inset 0 -1.2cqw 0 rgba(15, 15, 18, 0.08), 0 2cqw 2.8cqw -1.8cqw rgba(15, 15, 18, 0.5); }
.hub-anim.ha-labels-niimbot .nb-hub { position: absolute; right: 2.6cqw; top: 2.4cqw; width: 4cqw; height: 4cqw; border-radius: 50%; border: 2px solid var(--nb-ink);
    background: radial-gradient(closest-side, #6cbbe6 0 34%, var(--nb-ink) 34% 46%, #fff 46%); }
.hub-anim.ha-labels-niimbot .nb-face { position: absolute; left: 3.4cqw; top: 7.4cqw; width: 16cqw; height: 12cqw; background: #fff; border: 1.5px solid var(--nb-ink); border-radius: 1.2cqw;
    box-shadow: 0 0 0 0.9cqw rgba(255, 255, 255, 0.45); }
.hub-anim.ha-labels-niimbot .nb-dim { position: absolute; display: block; background: var(--nb-blue); }
.hub-anim.ha-labels-niimbot .nb-dim::before, .hub-anim.ha-labels-niimbot .nb-dim::after { content: ""; position: absolute; background: var(--nb-blue); }
.hub-anim.ha-labels-niimbot .nb-dw { left: 3.4cqw; top: 4.4cqw; width: 16cqw; height: 2px; }
.hub-anim.ha-labels-niimbot .nb-dw::before, .hub-anim.ha-labels-niimbot .nb-dw::after { top: -0.7cqw; width: 2px; height: 1.6cqw; }
.hub-anim.ha-labels-niimbot .nb-dw::before { left: 0; } .hub-anim.ha-labels-niimbot .nb-dw::after { right: 0; }
.hub-anim.ha-labels-niimbot .nb-dh { left: 21.4cqw; top: 7.4cqw; width: 2px; height: 12cqw; }
.hub-anim.ha-labels-niimbot .nb-dh::before, .hub-anim.ha-labels-niimbot .nb-dh::after { left: -0.7cqw; width: 1.6cqw; height: 2px; }
.hub-anim.ha-labels-niimbot .nb-dh::before { top: 0; } .hub-anim.ha-labels-niimbot .nb-dh::after { bottom: 0; }
.hub-anim.ha-labels-niimbot .nb-dim b { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); white-space: nowrap; padding: 0.35cqw 0.8cqw; border-radius: 999px;
    background: var(--nb-blue); color: #fff; font: 800 clamp(0.62rem, 1.3cqw, 0.82rem)/1 Manrope, Inter, sans-serif; }
.hub-anim.ha-labels-niimbot .nb-dh b { transform: translate(-50%, -50%) rotate(90deg); }
.hub-anim.ha-labels-niimbot .nb-stick { position: absolute; left: 3.4cqw; bottom: 2.6cqw; white-space: nowrap; padding: 0.6cqw 1.1cqw; border-radius: 0.6cqw; background: #fff; border: 1.5px solid var(--nb-ink);
    color: var(--nb-ink); font: 800 clamp(0.66rem, 1.4cqw, 0.88rem)/1 Manrope, Inter, sans-serif; transform: rotate(-2deg); }

/* arrows */
.hub-anim.ha-labels-niimbot .nb-arrow { position: absolute; top: 20cqw; width: 3.6cqw; height: 2px; background: var(--nb-ink); }
.hub-anim.ha-labels-niimbot .nb-arrow::after { content: ""; position: absolute; right: -1px; top: 50%; width: 1.1cqw; height: 1.1cqw; border-right: 2px solid var(--nb-ink); border-top: 2px solid var(--nb-ink);
    transform: translateY(-50%) rotate(45deg); }
.hub-anim.ha-labels-niimbot .nb-a1 { left: 32.4cqw; }
.hub-anim.ha-labels-niimbot .nb-a2 { left: 67.2cqw; }

/* editor */
.hub-anim.ha-labels-niimbot .nb-ed { position: absolute; left: 38cqw; top: 4cqw; width: 27.4cqw; height: 32cqw; padding: 1.6cqw; background: #fff; border: 2px solid var(--nb-ink); border-radius: 1.6cqw;
    display: flex; flex-direction: column; gap: 1.4cqw; box-shadow: 0 2cqw 2.8cqw -1.8cqw rgba(15, 15, 18, 0.45); }
.hub-anim.ha-labels-niimbot .nb-field { display: flex; justify-content: space-between; align-items: center; gap: 1cqw; font: 600 clamp(0.64rem, 1.3cqw, 0.84rem)/1.2 Inter, system-ui, sans-serif; color: #52525b; }
.hub-anim.ha-labels-niimbot .nb-field b { padding: 0.5cqw 0.9cqw; border-radius: 0.6cqw; box-shadow: inset 0 0 0 1.5px var(--nb-blue); background: #eef2ff; color: var(--nb-blue); white-space: nowrap; }
.hub-anim.ha-labels-niimbot .nb-field em { display: inline-block; font-style: normal; font-weight: 800; }
.hub-anim.ha-labels-niimbot .nb-desk { flex: 1 1 auto; display: grid; place-items: center; border-radius: 1cqw; background-color: #f4f4f5;
    background-image: radial-gradient(rgba(15, 15, 18, 0.12) 1px, transparent 1.2px); background-size: 1.4cqw 1.4cqw; }
.hub-anim.ha-labels-niimbot .nb-canvas { position: relative; width: var(--nb-w1); height: var(--nb-h1); background: #fff; border-radius: 1.2cqw; box-shadow: 0 0 0 1.5px var(--nb-blue), 0 1cqw 1.6cqw -1cqw rgba(15, 15, 18, 0.35); overflow: hidden; }
.hub-anim.ha-labels-niimbot .nb-art { position: absolute; inset: 0; display: flex; align-items: center; justify-content: space-between; gap: 1cqw; padding: 0 1.6cqw; }
.hub-anim.ha-labels-niimbot .nb-txt { display: flex; flex-direction: column; gap: 0.3cqw; min-width: 0; }
.hub-anim.ha-labels-niimbot .nb-txt b { font: 800 clamp(0.9rem, 2.6cqw, 1.6rem)/1 Manrope, Inter, sans-serif; color: var(--nb-ink); }
.hub-anim.ha-labels-niimbot .nb-txt span { font: 600 clamp(0.62rem, 1.4cqw, 0.88rem)/1.1 Inter, system-ui, sans-serif; color: #3f3f46; white-space: nowrap; }
.hub-anim.ha-labels-niimbot .nb-qr { flex: 0 0 auto; display: block; width: 7.6cqw; height: 7.6cqw; }

/* files */
.hub-anim.ha-labels-niimbot .nb-files { position: absolute; left: 73cqw; top: 8cqw; width: 25cqw; height: 26cqw; }
.hub-anim.ha-labels-niimbot .nb-file { position: absolute; top: 0; width: 11cqw; height: 14cqw; padding: 1.2cqw; display: flex; flex-direction: column; justify-content: space-between; align-items: center;
    background: #fff; border: 2px solid var(--nb-ink); border-radius: 1cqw 2.8cqw 1cqw 1cqw; box-shadow: 0 1.6cqw 2.2cqw -1.4cqw rgba(15, 15, 18, 0.45); }
.hub-anim.ha-labels-niimbot .nb-png { left: 0; transform: rotate(-4deg); }
.hub-anim.ha-labels-niimbot .nb-pdf { left: 12.6cqw; top: 3cqw; transform: rotate(3deg); }
.hub-anim.ha-labels-niimbot .nb-thumb { display: block; width: 100%; aspect-ratio: 4 / 3; border-radius: 0.6cqw; box-shadow: inset 0 0 0 1px #d4d4d8;
    background: linear-gradient(var(--nb-ink), var(--nb-ink)) 14% 34% / 38% 14% no-repeat, linear-gradient(#a1a1aa, #a1a1aa) 14% 64% / 26% 9% no-repeat,
      linear-gradient(var(--nb-ink), var(--nb-ink)) 86% 50% / 30% 40% no-repeat, #fff; }
.hub-anim.ha-labels-niimbot .nb-file b { display: block; width: 100%; text-align: center; padding: 0.6cqw 0; border-radius: 0.6cqw; color: #fff; font: 800 clamp(0.7rem, 1.6cqw, 1rem)/1 Manrope, Inter, sans-serif; letter-spacing: 0.04em; }
.hub-anim.ha-labels-niimbot .nb-png b { background: var(--nb-blue); }
.hub-anim.ha-labels-niimbot .nb-pdf b { background: #b45309; }

@media (max-width: 880px) {
    .hub-anim.ha-labels-niimbot .nb-scene { max-width: 460px; aspect-ratio: 0.92; }
    .hub-anim.ha-labels-niimbot .nb-cass { left: 1cqw; top: 3cqw; width: 44cqw; height: 46cqw; border-radius: 6cqw; }
    .hub-anim.ha-labels-niimbot .nb-hub { right: 4cqw; top: 3.6cqw; width: 6.4cqw; height: 6.4cqw; }
    .hub-anim.ha-labels-niimbot .nb-face { left: 4.4cqw; top: 13cqw; width: 26cqw; height: 19.5cqw; border-radius: 2cqw; box-shadow: 0 0 0 1.4cqw rgba(255, 255, 255, 0.45); }
    .hub-anim.ha-labels-niimbot .nb-dw { left: 4.4cqw; top: 8.2cqw; width: 26cqw; }
    .hub-anim.ha-labels-niimbot .nb-dw::before, .hub-anim.ha-labels-niimbot .nb-dw::after { top: -1.2cqw; height: 2.8cqw; }
    .hub-anim.ha-labels-niimbot .nb-dh { left: 35cqw; top: 13cqw; height: 19.5cqw; }
    .hub-anim.ha-labels-niimbot .nb-dh::before, .hub-anim.ha-labels-niimbot .nb-dh::after { left: -1.2cqw; width: 2.8cqw; }
    .hub-anim.ha-labels-niimbot .nb-dim b { font-size: 3cqw; padding: 0.9cqw 1.8cqw; }
    .hub-anim.ha-labels-niimbot .nb-stick { left: 4.4cqw; bottom: 4cqw; font-size: 3.3cqw; padding: 1.4cqw 2.4cqw; border-radius: 1.2cqw; }
    .hub-anim.ha-labels-niimbot .nb-arrow { top: 26cqw; width: 4.4cqw; }
    .hub-anim.ha-labels-niimbot .nb-arrow::after { width: 2.2cqw; height: 2.2cqw; }
    .hub-anim.ha-labels-niimbot .nb-a1 { left: 46.4cqw; }
    .hub-anim.ha-labels-niimbot .nb-ed { left: 52cqw; top: 1cqw; width: 47cqw; height: 52cqw; padding: 3cqw; gap: 2.6cqw; border-radius: 3cqw; }
    .hub-anim.ha-labels-niimbot .nb-field { flex-direction: column; align-items: flex-start; gap: 1.2cqw; font-size: 3cqw; }
    .hub-anim.ha-labels-niimbot .nb-field b { padding: 1cqw 1.8cqw; border-radius: 1.2cqw; font-size: 3.3cqw; }
    .hub-anim.ha-labels-niimbot .nb-desk { border-radius: 2cqw; background-size: 3cqw 3cqw; }
    .hub-anim.ha-labels-niimbot .nb-scene { --nb-w0: 42cqw; --nb-h0: 14cqw; --nb-w1: 36cqw; --nb-h1: 27cqw; }
    .hub-anim.ha-labels-niimbot .nb-canvas { border-radius: 2cqw; }
    .hub-anim.ha-labels-niimbot .nb-art { padding: 0 2.6cqw; gap: 1.6cqw; }
    .hub-anim.ha-labels-niimbot .nb-txt b { font-size: 5.4cqw; }
    .hub-anim.ha-labels-niimbot .nb-txt span { font-size: 3cqw; }
    .hub-anim.ha-labels-niimbot .nb-qr { width: 13.6cqw; height: 13.6cqw; }
    .hub-anim.ha-labels-niimbot .nb-a2 { left: 63cqw; top: 56cqw; width: 2px; height: 6cqw; }
    .hub-anim.ha-labels-niimbot .nb-a2::after { right: auto; left: 50%; top: auto; bottom: -1px; transform: translateX(-50%) rotate(135deg); }
    .hub-anim.ha-labels-niimbot .nb-files { left: 27cqw; top: 65cqw; width: 50cqw; height: 32cqw; }
    .hub-anim.ha-labels-niimbot .nb-file { width: 21cqw; height: 26cqw; padding: 2.2cqw; border-radius: 2cqw 5cqw 2cqw 2cqw; }
    .hub-anim.ha-labels-niimbot .nb-png { left: 2cqw; }
    .hub-anim.ha-labels-niimbot .nb-pdf { left: 26cqw; top: 3cqw; }
    .hub-anim.ha-labels-niimbot .nb-file b { font-size: 3.6cqw; padding: 1.2cqw 0; border-radius: 1.2cqw; }
}
@media (prefers-reduced-motion: reduce) { .hub-anim.ha-labels-niimbot .ba-toggle { display: none !important; } }
@media (prefers-reduced-motion: no-preference) {
    .hub-anim.ha-labels-niimbot .nb-dw, .hub-anim.ha-labels-niimbot .nb-dh, .hub-anim.ha-labels-niimbot .nb-dim b, .hub-anim.ha-labels-niimbot .nb-stick, .hub-anim.ha-labels-niimbot .nb-field em,
    .hub-anim.ha-labels-niimbot .nb-field b, .hub-anim.ha-labels-niimbot .nb-canvas, .hub-anim.ha-labels-niimbot .nb-art > *, .hub-anim.ha-labels-niimbot .nb-file {
        animation-duration: 10s; animation-iteration-count: infinite; animation-timing-function: ease; animation-fill-mode: both; }
    /* measure the face */
    .hub-anim.ha-labels-niimbot .nb-dw { animation-name: hanb-dw; transform-origin: 0 50%; }
    @keyframes hanb-dw { 0%, 4% { transform: scaleX(0); } 12%, 94% { transform: none; opacity: 1; } 98%, 100% { opacity: 0; } }
    .hub-anim.ha-labels-niimbot .nb-dh { animation-name: hanb-dh; transform-origin: 50% 0; }
    @keyframes hanb-dh { 0%, 12% { transform: scaleY(0); } 20%, 94% { transform: none; opacity: 1; } 98%, 100% { opacity: 0; } }
    .hub-anim.ha-labels-niimbot .nb-dw b { animation-name: hanb-lw; }
    @keyframes hanb-lw { 0%, 10% { opacity: 0; } 13%, 100% { opacity: 1; } }
    .hub-anim.ha-labels-niimbot .nb-dh b { animation-name: hanb-lh; }
    @keyframes hanb-lh { 0%, 18% { opacity: 0; } 21%, 100% { opacity: 1; } }
    .hub-anim.ha-labels-niimbot .nb-stick { animation-name: hanb-st; }
    @keyframes hanb-st { 0%, 22%, 30%, 100% { transform: rotate(-2deg); } 25% { transform: rotate(-2deg) scale(1.1); } }
    /* type the size, canvas snaps to it */
    .hub-anim.ha-labels-niimbot .nb-field em { animation-name: hanb-type; }
    @keyframes hanb-type { 0%, 27% { clip-path: inset(0 100% 0 0); animation-timing-function: steps(10, end); } 36%, 94% { clip-path: inset(0 0 0 0); opacity: 1; } 98%, 100% { clip-path: inset(0 0 0 0); opacity: 0; } }
    .hub-anim.ha-labels-niimbot .nb-field b { animation-name: hanb-fb; }
    @keyframes hanb-fb { 0%, 26% { background: #fff; } 28%, 38% { background: #dbe4ff; } 42%, 100% { background: #eef2ff; } }
    .hub-anim.ha-labels-niimbot .nb-canvas { animation-name: hanb-cv; }
    @keyframes hanb-cv { 0%, 37% { width: var(--nb-w0); height: var(--nb-h0); box-shadow: 0 0 0 1.5px #a1a1aa, 0 1cqw 1.6cqw -1cqw rgba(15, 15, 18, 0.25); animation-timing-function: cubic-bezier(.4, 1.5, .5, 1); }
        44%, 96% { width: var(--nb-w1); height: var(--nb-h1); box-shadow: 0 0 0 1.5px var(--nb-blue), 0 1cqw 1.6cqw -1cqw rgba(15, 15, 18, 0.35); }
        100% { width: var(--nb-w0); height: var(--nb-h0); box-shadow: 0 0 0 1.5px #a1a1aa, 0 1cqw 1.6cqw -1cqw rgba(15, 15, 18, 0.25); } }
    .hub-anim.ha-labels-niimbot .nb-art > * { animation-name: hanb-art; }
    .hub-anim.ha-labels-niimbot .nb-art > .nb-qr { animation-name: hanb-art2; }
    @keyframes hanb-art { 0%, 46% { opacity: 0; transform: translateY(1cqw); } 51%, 94% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; transform: none; } }
    @keyframes hanb-art2 { 0%, 51% { opacity: 0; transform: scale(0.6); } 56%, 94% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; transform: none; } }
    /* save as files */
    .hub-anim.ha-labels-niimbot .nb-png { animation-name: hanb-png; }
    @keyframes hanb-png { 0%, 62% { opacity: 0; transform: translateY(-4cqw) rotate(-4deg); } 68%, 94% { opacity: 1; transform: rotate(-4deg); } 98%, 100% { opacity: 0; transform: rotate(-4deg); } }
    .hub-anim.ha-labels-niimbot .nb-pdf { animation-name: hanb-pdf; }
    @keyframes hanb-pdf { 0%, 68% { opacity: 0; transform: translateY(-4cqw) rotate(3deg); } 74%, 94% { opacity: 1; transform: rotate(3deg); } 98%, 100% { opacity: 0; transform: rotate(3deg); } }
}