/* /butcher-labels: How it works scene (counter scale settles, sticker prints and lands on the wrapped tray). */
.hub-anim.ha-butcher-labels .ha-stage { min-height: 0; border: 1px solid #fecdd3; background: linear-gradient(90deg, rgba(255,255,255,.55) 1px, transparent 1px) 0 0 / 28px 28px, linear-gradient(0deg, rgba(255,255,255,.55) 1px, transparent 1px) 0 0 / 28px 28px, #fde8e8; }
.hub-anim.ha-butcher-labels .sc { display: flex; align-items: center; justify-content: center; gap: 1.5rem; min-height: 260px; }
.hub-anim.ha-butcher-labels .sc-arrow { color: #4c0519; flex: 0 0 auto; } .hub-anim.ha-butcher-labels .sc-arrow svg { width: 64px; height: 32px; display: block; }
.hub-anim.ha-butcher-labels .bu-scale { position: relative; width: 260px; flex: 0 0 auto; }
.hub-anim.ha-butcher-labels .bu-read { position: relative; width: 130px; height: 44px; margin: 0 auto 10px; background: #111827; border: 3px solid #4c0519; border-radius: 8px; box-sizing: border-box; font: 700 1.35rem/38px "Courier New", ui-monospace, monospace; color: #fb7185; text-align: center; letter-spacing: .04em; }
.hub-anim.ha-butcher-labels .bu-read span { position: absolute; left: 12px; right: 30px; text-align: right; } .hub-anim.ha-butcher-labels .bu-read small { position: absolute; right: 9px; font: 700 .7rem/38px Inter, sans-serif; color: #fda4af; }
.hub-anim.ha-butcher-labels .bu-w0, .hub-anim.ha-butcher-labels .bu-w1 { opacity: 0; }
.hub-anim.ha-butcher-labels .bu-pan { position: relative; z-index: 2; height: 92px; padding: 0 18px; background: linear-gradient(180deg, #f1f5f9, #cbd5e1); border: 2.5px solid #1f2937; border-radius: 10px 10px 4px 4px; box-sizing: border-box; display: flex; align-items: flex-end; justify-content: center; }
.hub-anim.ha-butcher-labels .bu-tray { position: relative; width: 190px; height: 78px; margin-bottom: 10px; background: #e7c9a9 repeating-linear-gradient(115deg, rgba(120, 72, 32, .08) 0 6px, transparent 6px 14px); border: 2px solid #7c4a21; border-radius: 10px; box-sizing: border-box; box-shadow: 0 6px 10px -6px rgba(76, 5, 25, .5); }
.hub-anim.ha-butcher-labels .bu-tray i { position: absolute; left: 14px; top: 10px; width: 58px; height: 52px; border-radius: 45% 55% 50% 50%; background: radial-gradient(circle at 40% 45%, #fda4af 0 20%, #be123c 21% 70%, #881337 71%); opacity: .55; }
.hub-anim.ha-butcher-labels .bu-body { height: 26px; margin: 0 12px; background: linear-gradient(180deg, #e5e7eb, #9ca3af); border: 2.5px solid #1f2937; border-top: 0; border-radius: 0 0 10px 10px; }
.hub-anim.ha-butcher-labels .bu-stick, .hub-anim.ha-butcher-labels .bu-out { box-sizing: border-box; background: #fff; color: #1f2937; }
.hub-anim.ha-butcher-labels .bu-stick { position: absolute; right: 10px; top: 12px; width: 104px; padding: 6px 7px; border: 1.5px solid #1f2937; border-radius: 4px; transform: rotate(-3deg); }
.hub-anim.ha-butcher-labels :is(.bu-stick, .bu-out) b { display: block; font: 800 .68rem/1.15 Manrope, Inter, sans-serif; color: #4c0519; } .hub-anim.ha-butcher-labels :is(.bu-stick, .bu-out) span { display: block; margin-top: 3px; font: 600 .52rem/1.2 Inter, sans-serif; color: #374151; } .hub-anim.ha-butcher-labels :is(.bu-stick, .bu-out) em { display: block; margin-top: 3px; font: 800 .82rem/1 Manrope, Inter, sans-serif; font-style: normal; color: #111827; text-align: right; }
.hub-anim.ha-butcher-labels .bu-pr { position: relative; width: 150px; height: 190px; flex: 0 0 auto; }
.hub-anim.ha-butcher-labels .bu-unit { position: absolute; z-index: 2; left: 0; right: 0; top: 0; height: 60px; background: linear-gradient(180deg, #881337, #4c0519); border: 2.5px solid #1f2937; border-radius: 10px 10px 4px 4px; box-sizing: border-box; } .hub-anim.ha-butcher-labels .bu-unit i { position: absolute; left: 16px; right: 16px; bottom: 8px; height: 6px; border-radius: 3px; background: #1f2937; }
.hub-anim.ha-butcher-labels .bu-feed { position: absolute; left: 20px; right: 20px; top: 52px; height: 120px; overflow: hidden; }
.hub-anim.ha-butcher-labels .bu-out { height: 74px; padding: 14px 9px 0; border: 2px solid #1f2937; border-top: 0; border-radius: 0 0 6px 6px; transform: translateY(-100%); opacity: 0; }
@media (max-width: 640px) {
 .hub-anim.ha-butcher-labels .sc { flex-direction: column; gap: .9rem; } .hub-anim.ha-butcher-labels .sc-arrow { transform: rotate(90deg); } .hub-anim.ha-butcher-labels .ha-stage { padding-bottom: 3.4rem; }
 .hub-anim.ha-butcher-labels .bu-scale { width: 230px; } .hub-anim.ha-butcher-labels .bu-tray { width: 176px; } .hub-anim.ha-butcher-labels .bu-pr { height: 150px; }
}
@media (prefers-reduced-motion: no-preference) {
 .hub-anim.ha-butcher-labels .bu-w0 { animation: bu-w0 10s steps(1, end) infinite both; } .hub-anim.ha-butcher-labels .bu-w1 { animation: bu-w1 10s steps(1, end) infinite both; } .hub-anim.ha-butcher-labels .bu-w2 { animation: bu-w2 10s steps(1, end) infinite both; }
 .hub-anim.ha-butcher-labels .bu-tray { animation: bu-tray 10s ease infinite both; } .hub-anim.ha-butcher-labels .bu-out { animation: bu-out 10s ease infinite both; } .hub-anim.ha-butcher-labels .bu-stick { animation: bu-stick 10s ease infinite both; }
 @keyframes bu-w0 { 0%, 8% { opacity: 1; } 9%, 100% { opacity: 0; } }
 @keyframes bu-w1 { 0%, 8% { opacity: 0; } 9%, 18% { opacity: 1; } 19%, 100% { opacity: 0; } }
 @keyframes bu-w2 { 0%, 18% { opacity: 0; } 19%, 100% { opacity: 1; } }
 @keyframes bu-tray { 0%, 2% { transform: translateY(-60px); opacity: 0; } 8% { transform: translateY(3px); opacity: 1; } 11%, 100% { transform: none; opacity: 1; } }
 @keyframes bu-out { 0%, 30% { transform: translateY(-100%); opacity: 1; } 48%, 58% { transform: none; opacity: 1; } 64%, 100% { transform: translateY(-60px) translateX(-120px) scale(.6); opacity: 0; } }
 @keyframes bu-stick { 0%, 62% { opacity: 0; transform: rotate(-3deg) translateY(-24px) scale(1.15); } 68% { opacity: 1; transform: rotate(-3deg) scale(.97); } 72%, 96% { opacity: 1; transform: rotate(-3deg); } 100% { opacity: 0; } }
}