/* /jar-labels: How it works scene (a paper strip measures a jam jar, the front label presses on, a lid label drops). */
.hub-anim.ha-jar-labels .ha-stage { min-height: 0; border: 1px solid #f0c6ea; background: repeating-linear-gradient(45deg, rgba(134, 25, 143, .05) 0 12px, transparent 12px 24px), linear-gradient(180deg, #fdf4ff, #f7e3f6); }
.hub-anim.ha-jar-labels .sc { display: flex; align-items: center; justify-content: center; gap: 2.4rem; min-height: 290px; }
.hub-anim.ha-jar-labels .jr-jar { position: relative; width: 200px; height: 270px; flex: 0 0 auto; }
.hub-anim.ha-jar-labels .jr-lid { position: absolute; left: 24px; right: 24px; top: 0; height: 40px; z-index: 2; background: linear-gradient(180deg, #fbbf24, #d97706); border: 2.5px solid #3b0a3f; border-radius: 8px 8px 4px 4px; box-sizing: border-box; }
.hub-anim.ha-jar-labels .jr-dot { position: absolute; left: 50%; top: -30px; width: 56px; height: 56px; margin-left: -28px; display: flex; align-items: center; justify-content: center; background: #fff; border: 2px solid #3b0a3f; border-radius: 50%; box-sizing: border-box; font-style: normal; } .hub-anim.ha-jar-labels .jr-dot b { font: 800 .6rem/1 Manrope, Inter, sans-serif; color: #4a044e; }
.hub-anim.ha-jar-labels .jr-dot { top: 1px; width: 34px; height: 34px; margin-left: -17px; } .hub-anim.ha-jar-labels .jr-dot b { font-size: .46rem; letter-spacing: -.02em; }
.hub-anim.ha-jar-labels .jr-glass { position: absolute; left: 10px; right: 10px; top: 36px; bottom: 0; background: linear-gradient(90deg, rgba(255, 255, 255, .7), rgba(255, 255, 255, .25) 30%, rgba(255, 255, 255, .45) 85%); border: 2.5px solid #3b0a3f; border-radius: 20px 20px 26px 26px; box-sizing: border-box; overflow: hidden; }
.hub-anim.ha-jar-labels .jr-jam { position: absolute; left: 0; right: 0; top: 26px; bottom: 0; background: linear-gradient(180deg, #be123c, #881337); }
.hub-anim.ha-jar-labels .jr-strip { position: absolute; left: -10px; right: -10px; top: 74px; height: 22px; background: repeating-linear-gradient(90deg, #fffbeb 0 9px, #3b0a3f 9px 10px), #fffbeb; border-top: 2px solid #3b0a3f; border-bottom: 2px solid #3b0a3f; box-sizing: border-box; opacity: 0; }
.hub-anim.ha-jar-labels .jr-strip span { position: absolute; left: 50%; top: -24px; transform: translateX(-50%); padding: 3px 7px; background: #3b0a3f; color: #fdf4ff; border-radius: 999px; font: 800 .66rem/1 Manrope, Inter, sans-serif; white-space: nowrap; }
.hub-anim.ha-jar-labels .jr-lab { position: absolute; left: 22px; right: 22px; top: 70px; height: 112px; padding: 14px 8px 0; background: #fff7ed; border: 2px solid #3b0a3f; border-radius: 10px; box-sizing: border-box; text-align: center; box-shadow: 0 6px 12px -6px rgba(59, 10, 63, .6); }
.hub-anim.ha-jar-labels .jr-lab small { display: block; font: 800 .56rem/1 Manrope, Inter, sans-serif; letter-spacing: .18em; color: #86198f; }
.hub-anim.ha-jar-labels .jr-lab b { display: block; margin: 12px 0 10px; font: 700 1.25rem/1 Georgia, "Times New Roman", serif; font-style: italic; color: #4a044e; }
.hub-anim.ha-jar-labels .jr-lab em { display: block; font: 700 .58rem/1 Inter, system-ui, sans-serif; font-style: normal; letter-spacing: .06em; color: #6b21a8; }
.hub-anim.ha-jar-labels .jr-note { display: flex; flex-direction: column; gap: .7rem; flex: 0 0 auto; }
.hub-anim.ha-jar-labels .jr-note span { display: inline-block; padding: .55rem .85rem; background: #fff; border: 2px solid #3b0a3f; border-radius: 10px; font: 800 .84rem/1 Manrope, Inter, sans-serif; color: #4a044e; box-shadow: 3px 3px 0 #86198f; white-space: nowrap; }
@media (max-width: 640px) {
 .hub-anim.ha-jar-labels .sc { flex-direction: column; gap: 1rem; } .hub-anim.ha-jar-labels .ha-stage { padding-bottom: 3.4rem; }
 .hub-anim.ha-jar-labels .jr-note { flex-direction: row; }
}
@media (prefers-reduced-motion: no-preference) {
 .hub-anim.ha-jar-labels .jr-strip { animation: jr-strip 10s ease infinite both; } .hub-anim.ha-jar-labels .jr-lab { animation: jr-lab 10s ease infinite both; } .hub-anim.ha-jar-labels .jr-dot { animation: jr-dot 10s ease infinite both; }
 .hub-anim.ha-jar-labels .jr-n1 { animation: jr-n1 10s ease infinite both; } .hub-anim.ha-jar-labels .jr-n2 { animation: jr-n2 10s ease infinite both; }
 @keyframes jr-strip { 0%, 4% { opacity: 0; transform: scaleX(.2); } 12%, 32% { opacity: 1; transform: none; } 38%, 100% { opacity: 0; transform: none; } }
 @keyframes jr-n1 { 0%, 12% { opacity: 0; transform: translateX(-10px); } 18%, 94% { opacity: 1; transform: none; } 100% { opacity: 0; } }
 @keyframes jr-lab { 0%, 36% { opacity: 0; transform: translateY(-14px) scale(1.12); } 44% { opacity: 1; transform: scale(.97); } 48%, 94% { opacity: 1; transform: none; } 100% { opacity: 0; } }
 @keyframes jr-dot { 0%, 58% { opacity: 0; transform: translateY(-40px) rotate(-30deg); } 66% { opacity: 1; transform: translateY(2px) rotate(0); } 70%, 94% { opacity: 1; transform: none; } 100% { opacity: 0; } }
 @keyframes jr-n2 { 0%, 66% { opacity: 0; transform: translateX(-10px); } 72%, 94% { opacity: 1; transform: none; } 100% { opacity: 0; } }
}