/* /labels/rollo: a 4 x 1 shelf label file, a small Paper size / Scaling card and the printer mouth on a
   butter-yellow desk. First the paper size is still 4 x 6, so one label comes out with a long blank tail.
   Then the size flips to 4 x 1 and three snug labels feed out. Sizes in cqw of .ro-scene.
   Reduced motion: paper size 4 x 1, three labels out, "Fits the label" note. */
.hub-anim.ha-labels-rollo .ha-stage { background-color: #fbf2c9; background-image: repeating-linear-gradient(45deg, rgba(133, 100, 4, 0.06) 0 1px, transparent 1px 14px), repeating-linear-gradient(-45deg, rgba(133, 100, 4, 0.06) 0 1px, transparent 1px 14px); border: 1px solid #efe0a0; min-height: 0; }
.hub-anim.ha-labels-rollo .ro-scene { position: relative; container-type: inline-size; aspect-ratio: 2.25; max-width: 940px; margin: 0 auto; overflow: hidden; }
.hub-anim.ha-labels-rollo .ro-scene p { margin: 0; }
.hub-anim.ha-labels-rollo .ro-lbl { position: relative; box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; gap: 4%; padding: 0 5%; aspect-ratio: 4; background: #fff; border: 1.5px solid #0f0f12; border-radius: 0.5cqw; container-type: inline-size; }
.hub-anim.ha-labels-rollo .ro-lbl p { display: flex; flex-direction: column; gap: 3cqi; }
.hub-anim.ha-labels-rollo .ro-lbl b { font: 800 9cqi/1 Manrope, Inter, sans-serif; letter-spacing: -0.02em; color: #0f0f12; white-space: nowrap; }
.hub-anim.ha-labels-rollo .ro-lbl span { font: 600 5.6cqi/1 Inter, system-ui, sans-serif; color: #52525b; white-space: nowrap; }
.hub-anim.ha-labels-rollo .ro-lbl > i { flex: none; width: 34%; height: 56%; background: repeating-linear-gradient(90deg, #0f0f12 0 2px, transparent 2px 4px, #0f0f12 4px 5px, transparent 5px 8px, #0f0f12 8px 11px, transparent 11px 12px); }
.hub-anim.ha-labels-rollo .ro-file { position: absolute; left: 3cqw; top: 7cqw; width: 31cqw; box-sizing: border-box; padding: 1.6cqw 1.8cqw 2cqw; background: #fffdf5; border: 2px solid #0f0f12; border-radius: 1.6cqw; box-shadow: 0.6cqw 0.7cqw 0 #ca8a04; transform: rotate(-1.5deg); }
.hub-anim.ha-labels-rollo .ro-head { display: flex; justify-content: space-between; align-items: baseline; margin: 0 0 1.4cqw !important; }
.hub-anim.ha-labels-rollo .ro-head span { font: 800 clamp(0.66rem, 1.3cqw, 0.8rem)/1 Manrope, Inter, sans-serif; letter-spacing: 0.1em; text-transform: uppercase; color: #3f3f46; }
.hub-anim.ha-labels-rollo .ro-head b { font: 800 clamp(0.74rem, 1.6cqw, 0.95rem)/1 Manrope, Inter, sans-serif; color: #0f0f12; }
.hub-anim.ha-labels-rollo .ro-set { position: absolute; left: 37cqw; top: 13cqw; width: 26cqw; box-sizing: border-box; padding: 1.4cqw; display: grid; gap: 1cqw; background: #fff; border: 2px solid #0f0f12; border-radius: 1.6cqw; box-shadow: 0 1.6cqw 2.4cqw -1.4cqw rgba(15, 15, 18, 0.4); }
.hub-anim.ha-labels-rollo .ro-row { display: flex; justify-content: space-between; align-items: center; gap: 1cqw; padding: 0.9cqw 1.1cqw; border: 1.5px solid #e4e4e7; border-radius: 1cqw; }
.hub-anim.ha-labels-rollo .ro-row > span { font: 600 clamp(0.7rem, 1.45cqw, 0.88rem)/1 Inter, system-ui, sans-serif; color: #52525b; white-space: nowrap; }
.hub-anim.ha-labels-rollo .ro-row > b { font: 800 clamp(0.78rem, 1.7cqw, 1rem)/1 Manrope, Inter, sans-serif; color: #0f0f12; white-space: nowrap; }
.hub-anim.ha-labels-rollo .ro-val { display: block; height: 1.5em; overflow: hidden; border-radius: 0.5em; }
.hub-anim.ha-labels-rollo .ro-flip { display: flex; flex-direction: column; transform: translateY(-50%); }
.hub-anim.ha-labels-rollo .ro-flip em { display: block; height: 1.5em; line-height: 1.5em; padding: 0 0.5em; font-style: normal; }
.hub-anim.ha-labels-rollo .ro-bad { background: #fee2e2; color: #b91c1c; }
.hub-anim.ha-labels-rollo .ro-good { background: #dcfce7; color: #166534; }
.hub-anim.ha-labels-rollo .ro-off { padding: 0 0.5em; line-height: 1.5em; border-radius: 0.5em; background: #f4f4f5; }
.hub-anim.ha-labels-rollo .ro-out { position: absolute; left: 67cqw; top: 2cqw; width: 30cqw; height: 42cqw; }
.hub-anim.ha-labels-rollo .ro-mouth { position: absolute; z-index: 3; left: 0; right: 0; top: 0; height: 3.2cqw; border-radius: 1.6cqw; background: #27272a; box-shadow: inset 0 -0.8cqw 0 #0f0f12, 0 1cqw 1.6cqw -0.8cqw rgba(15, 15, 18, 0.5); }
.hub-anim.ha-labels-rollo .ro-sheet, .hub-anim.ha-labels-rollo .ro-strip { position: absolute; left: 3cqw; top: 2.4cqw; width: 24cqw; box-sizing: border-box; }
.hub-anim.ha-labels-rollo .ro-sheet { height: 36cqw; padding: 0; background: #fff; border: 1.5px solid #0f0f12; border-radius: 0 0 0.6cqw 0.6cqw; opacity: 0; box-shadow: 0 1.2cqw 2cqw -1.2cqw rgba(15, 15, 18, 0.45); }
.hub-anim.ha-labels-rollo .ro-sheet .ro-lbl { border: 0; border-bottom: 1.5px dashed #a1a1aa; border-radius: 0; }
.hub-anim.ha-labels-rollo .ro-tail { position: absolute; left: 50%; top: 58%; padding: 0.42rem 0.8rem; border-radius: 999px; background: #b91c1c; 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: translate(-50%, -50%) rotate(-4deg); }
.hub-anim.ha-labels-rollo .ro-sheet::after { content: ""; position: absolute; left: 6%; right: 6%; top: 22%; bottom: 6%; border: 2px dashed rgba(185, 28, 28, 0.45); border-radius: 0.8cqw; }
.hub-anim.ha-labels-rollo .ro-strip { display: flex; flex-direction: column; filter: drop-shadow(0 0.8cqw 0.8cqw rgba(15, 15, 18, 0.22)); }
.hub-anim.ha-labels-rollo .ro-strip .ro-lbl { margin-bottom: 1.4cqw; }
.hub-anim.ha-labels-rollo .ro-fit { position: absolute; z-index: 4; left: 50%; top: 27cqw; padding: 0.42rem 0.8rem; border-radius: 999px; background: #166534; 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: translateX(-50%) rotate(3deg); }
@media (max-width: 880px) {
    .hub-anim.ha-labels-rollo .ro-scene { max-width: 460px; aspect-ratio: 1.02; }
    .hub-anim.ha-labels-rollo .ro-file { left: 5cqw; top: 3cqw; width: 88cqw; padding: 3cqw 3cqw 3.4cqw; border-radius: 3cqw; box-shadow: 1cqw 1.2cqw 0 #ca8a04; }
    .hub-anim.ha-labels-rollo .ro-head { margin-bottom: 2.4cqw !important; }
    .hub-anim.ha-labels-rollo .ro-lbl { border-radius: 1cqw; }
    .hub-anim.ha-labels-rollo .ro-set { left: 4cqw; top: 49cqw; width: 50cqw; padding: 2.4cqw; gap: 2cqw; border-radius: 3cqw; }
    .hub-anim.ha-labels-rollo .ro-set { width: 51cqw; padding: 2cqw; }
    .hub-anim.ha-labels-rollo .ro-row { padding: 1.8cqw 1.6cqw 1.8cqw 2.2cqw; border-radius: 2cqw; }
    .hub-anim.ha-labels-rollo .ro-row > span { font-size: 0.68rem; }
    .hub-anim.ha-labels-rollo .ro-row > b { font-size: 0.74rem; }
    .hub-anim.ha-labels-rollo .ro-out { left: 58cqw; top: 41cqw; width: 39cqw; height: 56cqw; }
    .hub-anim.ha-labels-rollo .ro-mouth { height: 5cqw; border-radius: 2.5cqw; }
    .hub-anim.ha-labels-rollo .ro-sheet, .hub-anim.ha-labels-rollo .ro-strip { left: 2.5cqw; top: 3.6cqw; width: 34cqw; }
    .hub-anim.ha-labels-rollo .ro-sheet { height: 51cqw; }
    .hub-anim.ha-labels-rollo .ro-strip .ro-lbl { margin-bottom: 2cqw; }
    .hub-anim.ha-labels-rollo .ro-tail { font-size: 0.72rem; padding: 0.38rem 0.6rem; }
    .hub-anim.ha-labels-rollo .ro-fit { top: 37cqw; font-size: 0.72rem; padding: 0.38rem 0.6rem; }
}
@media (prefers-reduced-motion: reduce) { .hub-anim.ha-labels-rollo .ba-toggle { display: none !important; } }
@media (prefers-reduced-motion: no-preference) {
    .hub-anim.ha-labels-rollo .ro-sheet, .hub-anim.ha-labels-rollo .ro-tail, .hub-anim.ha-labels-rollo .ro-flip, .hub-anim.ha-labels-rollo .ro-strip, .hub-anim.ha-labels-rollo .ro-fit, .hub-anim.ha-labels-rollo .ro-val { animation-duration: 11s; animation-iteration-count: infinite; animation-timing-function: ease; animation-fill-mode: both; }
    .hub-anim.ha-labels-rollo .ro-sheet { animation-name: haro-sheet; }
    @keyframes haro-sheet {
        0%, 6% { opacity: 1; transform: translateY(-100%); clip-path: inset(100% 0 0 0); animation-timing-function: linear; }
        22%, 42% { opacity: 1; transform: none; clip-path: inset(0 0 0 0); }
        47% { opacity: 0; transform: translateY(4cqw) rotate(4deg); clip-path: inset(0 0 0 0); }
        47.5%, 100% { opacity: 0; transform: translateY(-100%); clip-path: inset(100% 0 0 0); } }
    .hub-anim.ha-labels-rollo .ro-tail { animation-name: haro-tail; }
    @keyframes haro-tail { 0%, 23% { opacity: 0; transform: translate(-50%, -30%) rotate(-4deg); } 26%, 42% { opacity: 1; transform: translate(-50%, -50%) rotate(-4deg); } 45%, 100% { opacity: 0; transform: translate(-50%, -50%) rotate(-4deg); } }
    .hub-anim.ha-labels-rollo .ro-flip { animation-name: haro-flip; }
    @keyframes haro-flip { 0%, 45% { transform: none; } 50%, 95% { transform: translateY(-50%); } 99%, 100% { transform: none; } }
    .hub-anim.ha-labels-rollo .ro-val { animation-name: haro-val; }
    @keyframes haro-val { 0%, 49% { transform: none; } 51.5% { transform: scale(1.18); } 54%, 100% { transform: none; } }
    .hub-anim.ha-labels-rollo .ro-strip { animation-name: haro-strip; }
    @keyframes haro-strip {
        0%, 56% { opacity: 1; transform: translateY(-100%); clip-path: inset(100% 0 0 0); }
        61%, 63% { opacity: 1; transform: translateY(-66.67%); clip-path: inset(66.67% 0 0 0); }
        68%, 70% { opacity: 1; transform: translateY(-33.33%); clip-path: inset(33.33% 0 0 0); }
        75%, 93% { opacity: 1; transform: none; clip-path: inset(0 0 0 0); }
        97.5% { opacity: 0; transform: none; clip-path: inset(0 0 0 0); }
        98%, 100% { opacity: 0; transform: translateY(-100%); clip-path: inset(100% 0 0 0); } }
    .hub-anim.ha-labels-rollo .ro-fit { animation-name: haro-fit; }
    @keyframes haro-fit { 0%, 77% { opacity: 0; transform: translateX(-50%) translateY(6px) rotate(3deg); } 80%, 93% { opacity: 1; transform: translateX(-50%) rotate(3deg); } 97.5%, 100% { opacity: 0; transform: translateX(-50%) rotate(3deg); } }
}