/* /pizza-box-labels: How it works scene. */
.hub-anim.ha-pizza-box-labels .ha-stage { min-height: 0; }
.hub-anim.ha-pizza-box-labels .sc-arrow { color: #0f0f12; flex: 0 0 auto; } .hub-anim.ha-pizza-box-labels .sc-arrow svg { width: 64px; height: 32px; display: block; }
.hub-anim.ha-pizza-box-labels .sc { display: flex; align-items: center; justify-content: center; gap: 1.6rem; min-height: 250px; }
.hub-anim.ha-pizza-box-labels .sc-tag { display: inline-block; margin: 0; padding: 0.4rem 0.72rem; border-radius: 999px; font: 800 0.8rem/1 Manrope, Inter, sans-serif; white-space: nowrap; box-shadow: 3px 3px 0 #0f0f12; }
@media (max-width: 640px) { .hub-anim.ha-pizza-box-labels .sc { flex-direction: column; gap: 0.9rem; } .hub-anim.ha-pizza-box-labels .sc-arrow { transform: rotate(90deg); } .hub-anim.ha-pizza-box-labels .ha-stage { padding-bottom: 3.4rem; } }
.hub-anim.ha-pizza-box-labels .ha-stage { border: 1px solid #f0c9b0; background: repeating-linear-gradient(45deg, rgba(190,40,30,.07) 0 22px, transparent 22px 44px), #fdecdf; }
.hub-anim.ha-pizza-box-labels .pz-tix { display: flex; flex-direction: column; gap: .55rem; width: 190px; flex: 0 0 auto; }
.hub-anim.ha-pizza-box-labels .pz-t { margin: 0; padding: .6rem .7rem; background: #fffdf8; border: 2px solid #0f0f12; border-radius: 6px; box-shadow: 3px 4px 0 #0f0f12; font: 600 .9rem/1.2 Inter, system-ui, sans-serif; color: #1f2937; } .hub-anim.ha-pizza-box-labels .pz-t b { margin-right: .55rem; font: 800 .78rem/1 ui-monospace, Menlo, monospace; color: #b91c1c; }
.hub-anim.ha-pizza-box-labels .pz-t1 { background: #fde68a; }
.hub-anim.ha-pizza-box-labels .pz-box { position: relative; width: 260px; height: 230px; flex: 0 0 auto; background: linear-gradient(180deg, #e0b887, #cfa06a); border: 2.5px solid #0f0f12; border-radius: 8px; box-sizing: border-box; box-shadow: 5px 6px 0 #0f0f12; }
.hub-anim.ha-pizza-box-labels .pz-lid { position: absolute; left: 12px; right: 12px; top: 12px; bottom: 12px; border: 2px dashed rgba(15,15,18,.28); border-radius: 4px; }
.hub-anim.ha-pizza-box-labels .pz-stk { position: absolute; left: 44px; right: 44px; top: 50px; padding: 16px 8px; background: #fff; border: 2px solid #0f0f12; border-radius: 8px; text-align: center; box-sizing: border-box; }
.hub-anim.ha-pizza-box-labels .pz-stk b { display: block; font: 800 1.3rem/1.1 Manrope, Inter, sans-serif; color: #0f0f12; } .hub-anim.ha-pizza-box-labels .pz-stk span { display: block; margin: 7px 0; font: 600 .86rem/1 Inter, system-ui, sans-serif; color: #b91c1c; } .hub-anim.ha-pizza-box-labels .pz-stk em { font: 700 .72rem/1 ui-monospace, Menlo, monospace; color: #52525b; }
.hub-anim.ha-pizza-box-labels .pz-v2, .hub-anim.ha-pizza-box-labels .pz-v3 { opacity: 0; }
@media (max-width: 640px) { .hub-anim.ha-pizza-box-labels .pz-box { width: 210px; height: 190px; } .hub-anim.ha-pizza-box-labels .pz-stk { left: 26px; right: 26px; top: 34px; } .hub-anim.ha-pizza-box-labels .pz-stk b { font-size: 1.1rem; } }
@media (prefers-reduced-motion: no-preference) {
 .hub-anim.ha-pizza-box-labels .pz-v1 { animation: pz-s1 9s ease infinite both; } .hub-anim.ha-pizza-box-labels .pz-v2 { animation: pz-s2 9s ease infinite both; } .hub-anim.ha-pizza-box-labels .pz-v3 { animation: pz-s3 9s ease infinite both; }
 .hub-anim.ha-pizza-box-labels .pz-t1 { animation: pz-h1 9s ease infinite both; } .hub-anim.ha-pizza-box-labels .pz-t2 { animation: pz-h2 9s ease infinite both; } .hub-anim.ha-pizza-box-labels .pz-t3 { animation: pz-h3 9s ease infinite both; }
 @keyframes pz-s1 { 0% { opacity: 0; transform: scale(1.3) rotate(-5deg); } 6%, 28% { opacity: 1; transform: none; } 33%, 100% { opacity: 0; transform: none; } }
 @keyframes pz-s2 { 0%, 33% { opacity: 0; transform: scale(1.3) rotate(5deg); } 39%, 61% { opacity: 1; transform: none; } 66%, 100% { opacity: 0; transform: none; } }
 @keyframes pz-s3 { 0%, 66% { opacity: 0; transform: scale(1.3) rotate(-4deg); } 72%, 94% { opacity: 1; transform: none; } 99%, 100% { opacity: 0; transform: none; } }
 @keyframes pz-h1 { 0%, 30% { background: #fde68a; } 33%, 100% { background: #fffdf8; } }
 @keyframes pz-h2 { 0%, 32% { background: #fffdf8; } 35%, 63% { background: #fde68a; } 66%, 100% { background: #fffdf8; } }
 @keyframes pz-h3 { 0%, 65% { background: #fffdf8; } 68%, 96% { background: #fde68a; } 100% { background: #fffdf8; } }
}