/* /labels/zebra: a 4 x 2 label design is read top to bottom into ZPL (^XA, ^PW, one ^GFA graphic, ^XZ, the
   way the app exports it), then a printhead line prints the same label onto a liner strip. Lavender ruled
   stage, ink-navy code card, lime scan line. Sizes use --u (1cqw wide, 2.7cqw stacked on phones).
   Reduced motion: all three steps shown complete. */
.hub-anim.ha-labels-zebra .ha-stage { border: 1px solid #dcd5ef; min-height: 0; background-color: #efebf9;
    background-image: repeating-linear-gradient(180deg, transparent 0 13px, rgba(76, 54, 160, 0.08) 13px 14px); }
.hub-anim.ha-labels-zebra .hz-scene { container-type: inline-size; max-width: 960px; margin: 0 auto; }
.hub-anim.ha-labels-zebra .hz-scene > * { --u: 1cqw; }
.hub-anim.ha-labels-zebra .hz-scene { display: flex; align-items: flex-end; justify-content: center; gap: 1cqw; padding: 1.5cqw 0 1cqw; }
.hub-anim.ha-labels-zebra .hz-step { width: calc(29 * var(--u)); flex: none; display: flex; flex-direction: column; gap: calc(1.3 * var(--u)); }
.hub-anim.ha-labels-zebra .hz-tag { margin: 0; align-self: flex-start; display: inline-flex; align-items: center; gap: 0.45em; padding: 0.42rem 0.75rem; border-radius: 999px;
    background: #2a1f63; color: #fff; white-space: nowrap; font: 800 clamp(0.74rem, calc(1.55 * var(--u)), 0.92rem)/1 Manrope, Inter, sans-serif; box-shadow: 3px 4px 0 #0f0f12; transform: rotate(-2deg); }
.hub-anim.ha-labels-zebra .hz-tag span { font-weight: 600; opacity: 0.75; }
.hub-anim.ha-labels-zebra .hz-s2 .hz-tag { background: #c6f36b; color: #1a1440; border: 2px solid #0f0f12; transform: rotate(2deg); }
.hub-anim.ha-labels-zebra .hz-s3 .hz-tag { background: #fff; color: #2a1f63; border: 2px solid #0f0f12; }
.hub-anim.ha-labels-zebra .hz-arrow { flex: none; width: calc(4 * var(--u)); height: 2px; margin-bottom: calc(7 * var(--u)); position: relative;
    background: repeating-linear-gradient(90deg, #4c36a0 0 6px, transparent 6px 11px); }
.hub-anim.ha-labels-zebra .hz-arrow::after { content: ""; position: absolute; right: -2px; top: -5px; width: 9px; height: 9px; border-top: 2px solid #4c36a0; border-right: 2px solid #4c36a0; transform: rotate(45deg); box-sizing: border-box; }
/* the label (design and print share it) */
.hub-anim.ha-labels-zebra .hz-lab { position: relative; aspect-ratio: 2; box-sizing: border-box; padding: calc(1.6 * var(--u)) calc(2 * var(--u)) calc(1.2 * var(--u)); background: #fff;
    border: 2px solid #0f0f12; border-radius: calc(1 * var(--u)); display: flex; flex-direction: column; overflow: hidden; }
.hub-anim.ha-labels-zebra .hz-lab b { font: 800 calc(2.25 * var(--u))/1.1 Manrope, Inter, sans-serif; color: #0f0f12; white-space: nowrap; letter-spacing: -0.01em; }
.hub-anim.ha-labels-zebra .hz-lab span { margin-top: calc(0.4 * var(--u)); font: 600 calc(1.3 * var(--u))/1.2 Inter, system-ui, sans-serif; color: #3f3f46; white-space: nowrap; }
.hub-anim.ha-labels-zebra .hz-bc { display: block; margin-top: auto; height: calc(4.4 * var(--u)); width: 100%;
    background: repeating-linear-gradient(90deg, #0f0f12 0 2px, transparent 2px 4px, #0f0f12 4px 5px, transparent 5px 7px, #0f0f12 7px 10px, transparent 10px 11px, #0f0f12 11px 12px, transparent 12px 15px, #0f0f12 15px 17px, transparent 17px 18px); }
.hub-anim.ha-labels-zebra .hz-lab small { margin-top: calc(0.4 * var(--u)); text-align: center; font: 600 calc(1.05 * var(--u))/1 "SFMono-Regular", Consolas, monospace; letter-spacing: 0.12em; color: #0f0f12; }
.hub-anim.ha-labels-zebra .hz-design { box-shadow: 0 calc(1.4 * var(--u)) calc(2.4 * var(--u)) calc(-1.2 * var(--u)) rgba(42, 31, 99, 0.45); outline: 1.5px dashed #7c66d8; outline-offset: calc(0.7 * var(--u)); }
.hub-anim.ha-labels-zebra .hz-scan { position: absolute; left: 0; right: 0; top: 0; height: 3px; background: #9bd92f; box-shadow: 0 0 0 1px rgba(15, 15, 18, 0.2), 0 0 12px 2px rgba(155, 217, 47, 0.7); opacity: 0; }
/* ZPL card */
.hub-anim.ha-labels-zebra .hz-code { box-sizing: border-box; padding: calc(1.4 * var(--u)) calc(1.6 * var(--u)); background: #1a1440; border: 2px solid #0f0f12; border-radius: calc(1 * var(--u));
    box-shadow: 0 calc(1.4 * var(--u)) calc(2.4 * var(--u)) calc(-1.2 * var(--u)) rgba(26, 20, 64, 0.6); }
.hub-anim.ha-labels-zebra .hz-code p { margin: 0; white-space: nowrap; overflow: hidden; color: #c6f36b; font: 600 calc(1.22 * var(--u))/1.5 "SFMono-Regular", Consolas, "Liberation Mono", monospace; }
.hub-anim.ha-labels-zebra .hz-code p.hz-hex { color: #b9addf; letter-spacing: 0.04em; }
/* printed label on its liner */
.hub-anim.ha-labels-zebra .hz-liner { position: relative; padding: calc(1.3 * var(--u)) calc(1 * var(--u)); background: #f4efe2; border: 2px solid #0f0f12; border-radius: calc(0.6 * var(--u));
    box-shadow: 0 calc(1.4 * var(--u)) calc(2.4 * var(--u)) calc(-1.2 * var(--u)) rgba(42, 31, 99, 0.45); overflow: hidden; }
.hub-anim.ha-labels-zebra .hz-liner::before, .hub-anim.ha-labels-zebra .hz-liner::after { content: ""; position: absolute; left: calc(1 * var(--u)); right: calc(1 * var(--u)); height: calc(0.6 * var(--u));
    background: #fffdf8; border: 1.5px solid #c9c0aa; }
.hub-anim.ha-labels-zebra .hz-liner::before { top: -2px; border-top: 0; border-radius: 0 0 calc(0.6 * var(--u)) calc(0.6 * var(--u)); }
.hub-anim.ha-labels-zebra .hz-liner::after { bottom: -2px; border-bottom: 0; border-radius: calc(0.6 * var(--u)) calc(0.6 * var(--u)) 0 0; }
.hub-anim.ha-labels-zebra .hz-print { background: #fffdf8; border: 1.5px solid #c9c0aa; }
.hub-anim.ha-labels-zebra .hz-print b, .hub-anim.ha-labels-zebra .hz-print small { color: #17171b; }
.hub-anim.ha-labels-zebra .hz-head { position: absolute; left: 0; right: 0; top: calc(1.3 * var(--u)); height: 4px; border-radius: 2px; background: #2a1f63; opacity: 0; }
@media (max-width: 880px) {
    .hub-anim.ha-labels-zebra .hz-scene { flex-direction: column; align-items: center; gap: 2.2cqw; padding: 1cqw 0 0; }
    .hub-anim.ha-labels-zebra .hz-scene > * { --u: 2.75cqw; }
    .hub-anim.ha-labels-zebra .hz-step { gap: 3cqw; }
    .hub-anim.ha-labels-zebra .hz-arrow { width: 2px; height: 7cqw; margin: 0; background: repeating-linear-gradient(180deg, #4c36a0 0 6px, transparent 6px 11px); }
    .hub-anim.ha-labels-zebra .hz-arrow::after { right: auto; left: -4px; top: auto; bottom: -1px; transform: rotate(135deg); }
}
@media (prefers-reduced-motion: reduce) { .hub-anim.ha-labels-zebra .ba-toggle { display: none !important; } }
@media (prefers-reduced-motion: no-preference) {
    .hub-anim.ha-labels-zebra .hz-scan, .hub-anim.ha-labels-zebra .hz-code p, .hub-anim.ha-labels-zebra .hz-print, .hub-anim.ha-labels-zebra .hz-head,
    .hub-anim.ha-labels-zebra .hz-s3 .hz-tag, .hub-anim.ha-labels-zebra .hz-s2 .hz-tag, .hub-anim.ha-labels-zebra .hz-arrow { animation: 10s ease infinite both; }
    .hub-anim.ha-labels-zebra .hz-scan { animation-name: hazb-scan; animation-timing-function: linear; }
    @keyframes hazb-scan { 0%, 6% { top: 0; opacity: 0; } 7% { top: 0; opacity: 1; } 31% { top: calc(100% - 3px); opacity: 1; } 33%, 100% { top: calc(100% - 3px); opacity: 0; } }
    .hub-anim.ha-labels-zebra .hz-code .hz-l1 { animation-name: hazb-l1; } @keyframes hazb-l1 { 0%, 6% { opacity: 0; } 7.5%, 93% { opacity: 1; } 97%, 100% { opacity: 0; } }
    .hub-anim.ha-labels-zebra .hz-code .hz-l2 { animation-name: hazb-l2; } @keyframes hazb-l2 { 0%, 9% { opacity: 0; } 10.5%, 93% { opacity: 1; } 97%, 100% { opacity: 0; } }
    .hub-anim.ha-labels-zebra .hz-code .hz-l3 { animation-name: hazb-l3; } @keyframes hazb-l3 { 0%, 12% { opacity: 0; } 13.5%, 93% { opacity: 1; } 97%, 100% { opacity: 0; } }
    .hub-anim.ha-labels-zebra .hz-code .hz-l4 { animation-name: hazb-l4; } @keyframes hazb-l4 { 0%, 15% { clip-path: inset(0 100% 0 0); animation-timing-function: steps(11, end); } 20%, 93% { clip-path: inset(0 0 0 0); opacity: 1; } 97%, 100% { clip-path: inset(0 0 0 0); opacity: 0; } }
    .hub-anim.ha-labels-zebra .hz-code .hz-l5 { animation-name: hazb-l5; } @keyframes hazb-l5 { 0%, 20.5% { clip-path: inset(0 100% 0 0); animation-timing-function: steps(11, end); } 25.5%, 93% { clip-path: inset(0 0 0 0); opacity: 1; } 97%, 100% { clip-path: inset(0 0 0 0); opacity: 0; } }
    .hub-anim.ha-labels-zebra .hz-code .hz-l6 { animation-name: hazb-l6; } @keyframes hazb-l6 { 0%, 26% { clip-path: inset(0 100% 0 0); animation-timing-function: steps(11, end); } 31%, 93% { clip-path: inset(0 0 0 0); opacity: 1; } 97%, 100% { clip-path: inset(0 0 0 0); opacity: 0; } }
    .hub-anim.ha-labels-zebra .hz-code .hz-l7 { animation-name: hazb-l7; } @keyframes hazb-l7 { 0%, 32% { opacity: 0; } 33.5%, 93% { opacity: 1; } 97%, 100% { opacity: 0; } }
    .hub-anim.ha-labels-zebra .hz-code .hz-l8 { animation-name: hazb-l8; } @keyframes hazb-l8 { 0%, 34.5% { opacity: 0; } 36%, 93% { opacity: 1; } 97%, 100% { opacity: 0; } }
    .hub-anim.ha-labels-zebra .hz-print { animation-name: hazb-print; animation-timing-function: linear; }
    @keyframes hazb-print { 0%, 40% { clip-path: inset(0 0 100% 0); } 64%, 93% { clip-path: inset(0 0 0 0); opacity: 1; } 97%, 100% { clip-path: inset(0 0 0 0); opacity: 0; } }
    .hub-anim.ha-labels-zebra .hz-head { animation-name: hazb-head; animation-timing-function: linear; }
    @keyframes hazb-head { 0%, 39% { top: calc(1.3 * var(--u)); opacity: 0; } 40% { top: calc(1.3 * var(--u)); opacity: 1; } 64% { top: calc(100% - 1.3 * var(--u) - 4px); opacity: 1; } 66%, 100% { top: calc(100% - 1.3 * var(--u) - 4px); opacity: 0; } }
    .hub-anim.ha-labels-zebra .hz-s2 .hz-tag { animation-name: hazb-t2; } @keyframes hazb-t2 { 0%, 4% { opacity: 0; transform: rotate(2deg) translateY(6px); } 7%, 93% { opacity: 1; transform: rotate(2deg); } 97%, 100% { opacity: 0; transform: rotate(2deg); } }
    .hub-anim.ha-labels-zebra .hz-s3 .hz-tag { animation-name: hazb-t3; } @keyframes hazb-t3 { 0%, 63% { opacity: 0; transform: rotate(-2deg) translateY(6px); } 67%, 93% { opacity: 1; transform: rotate(-2deg); } 97%, 100% { opacity: 0; transform: rotate(-2deg); } }
    .hub-anim.ha-labels-zebra .hz-arrow { animation-name: hazb-arr; } @keyframes hazb-arr { 0%, 3% { opacity: 0.25; } 8%, 93% { opacity: 1; } 98%, 100% { opacity: 0.25; } }
    .hub-anim.ha-labels-zebra .hz-arrow + .hz-step + .hz-arrow { animation-name: hazb-arr2; } @keyframes hazb-arr2 { 0%, 34% { opacity: 0.25; } 39%, 93% { opacity: 1; } 98%, 100% { opacity: 0.25; } }
}