/* /jewelry-labels: How it works scene (velvet tray, a hanging tag fills in, a scanner beam confirms the SKU). */
.hub-anim.ha-jewelry-labels .ha-stage { min-height: 0; border: 1px solid #3f3f46; background: radial-gradient(90% 120% at 30% 20%, #2a2a33 0%, #17171c 60%, #0d0d10 100%); }
.hub-anim.ha-jewelry-labels .sc { display: flex; align-items: center; justify-content: center; gap: 2.2rem; min-height: 260px; }
.hub-anim.ha-jewelry-labels .jw-tray { position: relative; width: 300px; height: 210px; flex: 0 0 auto; background: radial-gradient(circle at 50% 40%, #3b1d4a 0%, #24112e 70%); border: 3px solid #c9a24a; border-radius: 16px; box-sizing: border-box; box-shadow: inset 0 0 26px rgba(0, 0, 0, .6), 0 18px 30px -16px rgba(0, 0, 0, .8); }
.hub-anim.ha-jewelry-labels .jw-hoop { position: absolute; left: 38px; top: 40px; display: flex; gap: 14px; }
.hub-anim.ha-jewelry-labels .jw-hoop i { width: 56px; height: 56px; border-radius: 50%; border: 6px solid #e7c873; box-sizing: border-box; box-shadow: 0 0 0 1px #8a6a1f, inset 0 0 0 1px #8a6a1f, 0 6px 10px rgba(0, 0, 0, .5); }
.hub-anim.ha-jewelry-labels .jw-string { position: absolute; left: 112px; top: 92px; width: 60px; height: 2px; background: #f5f5f4; transform: rotate(28deg); transform-origin: left center; }
.hub-anim.ha-jewelry-labels .jw-tag { position: absolute; left: 160px; top: 104px; width: 112px; height: 82px; padding: 7px 9px; background: #fffdf7; border: 1.5px solid #1c1917; border-radius: 4px 14px 14px 4px; box-sizing: border-box; transform: rotate(-6deg); box-shadow: 0 8px 14px -8px rgba(0, 0, 0, .7); }
.hub-anim.ha-jewelry-labels .jw-tag b { display: block; font: 800 1.1rem/1 Manrope, Inter, sans-serif; color: #1c1917; } .hub-anim.ha-jewelry-labels .jw-tag small { display: block; margin: 2px 0 4px; font: 600 .55rem/1 Inter, sans-serif; color: #57534e; }
.hub-anim.ha-jewelry-labels .jw-bars { display: block; height: 22px; margin: 0 6px; background: repeating-linear-gradient(90deg, #1c1917 0 2px, transparent 2px 4px, #1c1917 4px 5px, transparent 5px 8px, #1c1917 8px 11px, transparent 11px 13px); }
.hub-anim.ha-jewelry-labels .jw-tag em { display: block; margin-top: 3px; font: 700 .5rem/1 "Courier New", monospace; font-style: normal; text-align: center; color: #1c1917; letter-spacing: .08em; }
.hub-anim.ha-jewelry-labels .jw-scan { position: relative; width: 190px; height: 200px; flex: 0 0 auto; }
.hub-anim.ha-jewelry-labels .jw-gun { position: absolute; right: 0; top: 18px; width: 110px; height: 46px; background: linear-gradient(180deg, #52525b, #27272a); border: 2px solid #0a0a0a; border-radius: 22px 10px 10px 22px; box-sizing: border-box; } .hub-anim.ha-jewelry-labels .jw-gun::after { content: ""; position: absolute; right: 18px; top: 40px; width: 26px; height: 64px; background: linear-gradient(90deg, #3f3f46, #27272a); border: 2px solid #0a0a0a; border-radius: 6px 6px 10px 10px; transform: rotate(12deg); }
.hub-anim.ha-jewelry-labels .jw-gun i { position: absolute; left: 4px; top: 10px; width: 10px; height: 22px; border-radius: 5px; background: #f87171; box-shadow: 0 0 10px #ef4444; }
.hub-anim.ha-jewelry-labels .jw-beam { position: absolute; left: 0; top: 30px; width: 90px; height: 24px; background: linear-gradient(90deg, rgba(248, 113, 113, 0), rgba(248, 113, 113, .5)); clip-path: polygon(0 0, 100% 40%, 100% 60%, 0 100%); opacity: 0; }
.hub-anim.ha-jewelry-labels .jw-ok { position: absolute; left: 0; right: 0; bottom: 18px; margin: 0; padding: .5rem .7rem; background: #fef3c7; color: #422006; border: 2px solid #c9a24a; border-radius: 999px; font: 800 .8rem/1 Manrope, Inter, sans-serif; text-align: center; white-space: nowrap; } .hub-anim.ha-jewelry-labels .jw-ok b { margin-right: .35rem; color: #15803d; }
@media (max-width: 640px) {
 .hub-anim.ha-jewelry-labels .sc { flex-direction: column; gap: .6rem; } .hub-anim.ha-jewelry-labels .ha-stage { padding-bottom: 3.4rem; }
 .hub-anim.ha-jewelry-labels .jw-tray { width: 226px; height: 176px; } .hub-anim.ha-jewelry-labels .jw-hoop { left: 16px; top: 30px; gap: 8px; } .hub-anim.ha-jewelry-labels .jw-hoop i { width: 44px; height: 44px; border-width: 5px; } .hub-anim.ha-jewelry-labels .jw-string { left: 74px; top: 74px; width: 44px; } .hub-anim.ha-jewelry-labels .jw-tag { left: 108px; top: 84px; width: 104px; height: 78px; }
 .hub-anim.ha-jewelry-labels .jw-scan { height: 150px; } .hub-anim.ha-jewelry-labels .jw-gun { right: 30px; }
}
@media (prefers-reduced-motion: no-preference) {
 .hub-anim.ha-jewelry-labels .jw-tag b, .hub-anim.ha-jewelry-labels .jw-tag small { animation: jw-txt 10s ease infinite both; }
 .hub-anim.ha-jewelry-labels .jw-bars { animation: jw-bars 10s ease infinite both; } .hub-anim.ha-jewelry-labels .jw-tag em { animation: jw-em 10s ease infinite both; }
 .hub-anim.ha-jewelry-labels .jw-tag { animation: jw-tag 10s ease infinite both; } .hub-anim.ha-jewelry-labels .jw-beam { animation: jw-beam 10s ease infinite both; } .hub-anim.ha-jewelry-labels .jw-ok { animation: jw-ok 10s ease infinite both; }
 @keyframes jw-tag { 0%, 4% { transform: rotate(-6deg) translateY(-14px); opacity: 0; } 10%, 96% { transform: rotate(-6deg); opacity: 1; } 100% { opacity: 0; } }
 @keyframes jw-txt { 0%, 14% { opacity: 0; transform: translateY(4px); } 22%, 100% { opacity: 1; transform: none; } }
 @keyframes jw-bars { 0%, 26% { clip-path: inset(0 100% 0 0); } 42%, 100% { clip-path: inset(0 0 0 0); } }
 @keyframes jw-em { 0%, 40% { opacity: 0; } 46%, 100% { opacity: 1; } }
 @keyframes jw-beam { 0%, 52% { opacity: 0; } 56%, 66% { opacity: 1; } 70%, 100% { opacity: 0; } }
 @keyframes jw-ok { 0%, 64% { opacity: 0; transform: translateY(8px) scale(.92); } 70%, 94% { opacity: 1; transform: none; } 99%, 100% { opacity: 0; } }
}