/* /sauce-bottle-labels: How it works scene (a ruler marks the flat face of a slim hot sauce bottle, the label slides on, a check). Sizes in em. */
.hub-anim.ha-sauce-bottle-labels .ha-stage { min-height: 0; border: 1px solid #fecaca; background: radial-gradient(circle at 30% 40%, rgba(22, 163, 74, .18) 0 4px, transparent 5px) 0 0 / 64px 64px, radial-gradient(circle at 70% 80%, rgba(220, 38, 38, .16) 0 4px, transparent 5px) 0 0 / 80px 72px, linear-gradient(180deg, #fff7ed 0%, #ffedd5 100%); }
.hub-anim.ha-sauce-bottle-labels .sc { display: flex; justify-content: center; font-size: 16px; }
.hub-anim.ha-sauce-bottle-labels .sb-scene { position: relative; width: 26em; height: 18em; }
.hub-anim.ha-sauce-bottle-labels .sb-bottle { position: absolute; left: 8.5em; top: 0; width: 6.4em; height: 18em; }
.hub-anim.ha-sauce-bottle-labels .sb-cap { position: absolute; left: 2.35em; top: 0; width: 1.7em; height: 1.6em; background: #b91c1c; border: 2px solid #1c1917; border-radius: .3em .3em .1em .1em; box-sizing: border-box; }
.hub-anim.ha-sauce-bottle-labels .sb-neck { position: absolute; left: 2.5em; top: 1.5em; width: 1.4em; height: 4.4em; background: linear-gradient(90deg, #fca5a5, #fff 40%, #fca5a5); border-left: 2px solid #1c1917; border-right: 2px solid #1c1917; box-sizing: border-box; }
.hub-anim.ha-sauce-bottle-labels .sb-shoulder { position: absolute; left: .3em; right: .3em; top: 5.6em; height: 2.4em; background: linear-gradient(90deg, #ef4444, #f87171 45%, #dc2626); border: 2px solid #1c1917; border-bottom: 0; border-radius: 3em 3em 0 0; box-sizing: border-box; }
.hub-anim.ha-sauce-bottle-labels .sb-body { position: absolute; left: .3em; right: .3em; top: 7.9em; bottom: 0; background: linear-gradient(90deg, #b91c1c, #ef4444 40%, #dc2626 60%, #991b1b); border: 2px solid #1c1917; border-top: 0; border-radius: 0 0 .7em .7em; box-sizing: border-box; overflow: hidden; }
.hub-anim.ha-sauce-bottle-labels .sb-lab { position: absolute; left: .35em; right: .35em; top: 1em; height: 7.6em; padding: .7em .3em; background: #fffbeb; border: 1.5px solid #1c1917; border-radius: .3em; box-sizing: border-box; text-align: center; }
.hub-anim.ha-sauce-bottle-labels .sb-lab small { display: block; font: 800 .45em/1 Manrope, Inter, sans-serif; letter-spacing: .2em; color: #15803d; }
.hub-anim.ha-sauce-bottle-labels .sb-lab b { display: block; margin: .35em 0; font: 800 .9em/1 Manrope, Inter, sans-serif; color: #7f1d1d; }
.hub-anim.ha-sauce-bottle-labels .sb-lab em { display: inline-block; padding: .25em .6em; border-radius: 1em; background: #dc2626; color: #fff; font: 800 .5em/1 Inter, system-ui, sans-serif; font-style: normal; letter-spacing: .1em; }
.hub-anim.ha-sauce-bottle-labels .sb-lab span { display: block; margin-top: 1em; font: 700 .42em/1.2 Inter, system-ui, sans-serif; color: #57534e; }
.hub-anim.ha-sauce-bottle-labels .sb-rule { position: absolute; left: 15.6em; top: 8.6em; width: 1.2em; height: 8.6em; border-left: 2px solid #1c1917; }
.hub-anim.ha-sauce-bottle-labels .sb-rule i { position: absolute; left: -2em; width: 3.2em; height: 0; border-top: 2px dashed #15803d; }
.hub-anim.ha-sauce-bottle-labels .sb-t { top: -1px; } .hub-anim.ha-sauce-bottle-labels .sb-b { bottom: -1px; }
.hub-anim.ha-sauce-bottle-labels .sb-rule span { position: absolute; left: 1em; top: 50%; padding: .35em .6em; margin-top: -.9em; white-space: nowrap; background: #15803d; color: #fff; border-radius: .3em; font: 800 .7em/1 Manrope, Inter, sans-serif; }
.hub-anim.ha-sauce-bottle-labels .sb-ok { position: absolute; left: 0; top: 11em; display: flex; align-items: center; gap: .4em; margin: 0; padding: .45em .8em; background: #fff; border: 2px solid #1c1917; border-radius: 2em; box-shadow: .2em .25em 0 #1c1917; font: 800 .8em/1 Manrope, Inter, sans-serif; color: #15803d; }
.hub-anim.ha-sauce-bottle-labels .sb-ok b { display: inline-flex; align-items: center; justify-content: center; width: 1.4em; height: 1.4em; border-radius: 50%; background: #15803d; color: #fff; font-size: .9em; }
@media (max-width: 640px) { .hub-anim.ha-sauce-bottle-labels .sc { font-size: 9px; } .hub-anim.ha-sauce-bottle-labels .ha-stage { padding-bottom: 3.4rem; } }
@media (prefers-reduced-motion: no-preference) {
 .hub-anim.ha-sauce-bottle-labels .sb-rule { animation: sb-rule 10s ease infinite both; }
 .hub-anim.ha-sauce-bottle-labels .sb-lab { animation: sb-lab 10s cubic-bezier(.3, 0, .2, 1) infinite both; }
 .hub-anim.ha-sauce-bottle-labels .sb-ok { animation: sb-ok 10s ease infinite both; }
 @keyframes sb-rule { 0%, 4% { opacity: 0; transform: translateX(1.5em); } 12%, 80% { opacity: 1; transform: none; } 88%, 100% { opacity: 0; } }
 @keyframes sb-lab { 0%, 30% { transform: translateX(-10em) rotate(-8deg); opacity: 0; } 34% { opacity: 1; } 48% { transform: translateX(.3em) rotate(1deg); } 52%, 92% { transform: none; opacity: 1; } 98%, 100% { opacity: 0; } }
 @keyframes sb-ok { 0%, 54% { opacity: 0; transform: scale(.7); } 60% { opacity: 1; transform: scale(1.08); } 64%, 92% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; } }
}