/* /labels/dymo: a roll of 30252 address labels feeds out to the right, one die-cut label per step, and each
   label picks up a different address as it passes the print line. Rose paper stage with a fine check, cream
   roll, berry accents. Positions come from --rx/--R/--H/--lw/--g so phones get one big label in view.
   Reduced motion: the strip rests with three printed labels (one on phones) past the print line. */
.hub-anim.ha-labels-dymo .ha-stage { border: 1px solid #f0cfcf; min-height: 0; background-color: #fbe9e7;
    background-image: linear-gradient(rgba(159, 29, 53, 0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(159, 29, 53, 0.06) 1px, transparent 1px); background-size: 22px 22px; }
.hub-anim.ha-labels-dymo .dy-scene { position: relative; container-type: inline-size; max-width: 940px; margin: 0 auto; aspect-ratio: 3.05; overflow: hidden;
    --rx: 3cqw; --ry: 6.5cqw; --R: 24cqw; --H: 29cqw; --lw: 21.5cqw; --g: 1.6cqw; --lu: calc(var(--lw) / 21); --sh: calc(var(--lw) / 3.11 + 2.4 * var(--lu)); }
.hub-anim.ha-labels-dymo .dy-scene { --P: calc(var(--lw) + var(--g)); --x0: calc(var(--H) + 1.6 * var(--lu) - var(--rx) - var(--R) / 2); }
/* roll */
.hub-anim.ha-labels-dymo .dy-roll { position: absolute; z-index: 3; left: var(--rx); top: var(--ry); width: var(--R); aspect-ratio: 1; border-radius: 50%; box-sizing: border-box; border: 2px solid #0f0f12;
    background: radial-gradient(circle, #fff 0 12%, #0f0f12 12% 13.5%, #c9a27a 13.5% 27%, #0f0f12 27% 28.5%, transparent 28.5%),
        repeating-radial-gradient(circle, #fffaf2 0 3px, #eadfcd 3px 4px);
    box-shadow: 0 1.6cqw 2.6cqw -1.4cqw rgba(110, 20, 38, 0.5); }
.hub-anim.ha-labels-dymo .dy-spin { position: absolute; inset: 0; border-radius: 50%; }
.hub-anim.ha-labels-dymo .dy-spin::before { content: ""; position: absolute; left: 50%; top: 4%; width: 2px; height: 20%; margin-left: -1px; background: #b4234a; border-radius: 2px; }
/* liner strip with die-cut labels */
.hub-anim.ha-labels-dymo .dy-feed { position: absolute; z-index: 1; left: calc(var(--rx) + var(--R) / 2); right: 0; top: calc(var(--ry) + var(--R) - var(--sh) - 1px); height: var(--sh); overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 9cqw), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 9cqw), transparent); }
.hub-anim.ha-labels-dymo .dy-strip { position: absolute; top: 0; bottom: 0; left: -200cqw; width: 400cqw; box-sizing: border-box; background: #f3ece2; border-block: 2px solid #0f0f12;
    box-shadow: inset 0 -3px 0 rgba(15, 15, 18, 0.06); }
.hub-anim.ha-labels-dymo .dy-lab { position: absolute; top: calc(1.2 * var(--lu) - 2px); width: var(--lw); aspect-ratio: 3.11; box-sizing: border-box; background: #fffdf9; border: 1.5px solid #d8c9b8;
    border-radius: calc(1.1 * var(--lu)); left: calc(200cqw + var(--x0)); display: flex; align-items: center; }
.hub-anim.ha-labels-dymo .dy-k1 { left: calc(200cqw + var(--x0) + var(--P)); }
.hub-anim.ha-labels-dymo .dy-k2 { left: calc(200cqw + var(--x0) + 2 * var(--P)); }
.hub-anim.ha-labels-dymo .dy-k-1 { left: calc(200cqw + var(--x0) - var(--P)); }
.hub-anim.ha-labels-dymo .dy-k-2 { left: calc(200cqw + var(--x0) - 2 * var(--P)); }
.hub-anim.ha-labels-dymo .dy-k-3 { left: calc(200cqw + var(--x0) - 3 * var(--P)); }
.hub-anim.ha-labels-dymo .dy-lab p { margin: 0; padding: 0 calc(1.6 * var(--lu)); display: flex; flex-direction: column; gap: calc(0.1 * var(--lu)); min-width: 0; width: 100%; box-sizing: border-box; }
.hub-anim.ha-labels-dymo .dy-lab b { font: 800 calc(1.45 * var(--lu))/1.2 Manrope, Inter, sans-serif; color: #0f0f12; white-space: nowrap; }
.hub-anim.ha-labels-dymo .dy-lab span { font: 500 calc(1.15 * var(--lu))/1.25 Inter, system-ui, sans-serif; color: #27272a; white-space: nowrap; }
/* print line */
.hub-anim.ha-labels-dymo .dy-head { position: absolute; z-index: 4; left: var(--H); top: calc(var(--ry) + var(--R) - var(--sh) - 2.4 * var(--lu)); height: calc(var(--sh) + 4.8 * var(--lu)); width: calc(1.3 * var(--lu));
    margin-left: calc(-0.65 * var(--lu)); background: #6e1426; border: 2px solid #0f0f12; border-radius: 999px; box-sizing: border-box; box-shadow: 2px 3px 0 rgba(15, 15, 18, 0.25); }
/* tags */
.hub-anim.ha-labels-dymo .dy-tag { position: absolute; z-index: 5; margin: 0; padding: 0.42rem 0.75rem; border-radius: 999px; white-space: nowrap; display: inline-flex; gap: 0.45em; align-items: center;
    font: 700 clamp(0.74rem, 1.55cqw, 0.92rem)/1 Manrope, Inter, sans-serif; box-shadow: 3px 4px 0 #0f0f12; }
.hub-anim.ha-labels-dymo .dy-tag b { font-weight: 800; }
.hub-anim.ha-labels-dymo .dy-tag1 { left: 2cqw; top: 1.4cqw; background: #9f1d35; color: #fff; transform: rotate(-3deg); }
.hub-anim.ha-labels-dymo .dy-tag2 { right: 4cqw; top: 4cqw; background: #fff; color: #9f1d35; border: 2px solid #0f0f12; transform: rotate(2deg); }
@media (max-width: 880px) {
    .hub-anim.ha-labels-dymo .ha-stage { padding-bottom: 3.4rem; }
    .hub-anim.ha-labels-dymo .dy-scene { aspect-ratio: 1.3; --rx: -9cqw; --ry: 17cqw; --R: 36cqw; --H: 29cqw; --lw: 66cqw; --g: 3cqw; }
    .hub-anim.ha-labels-dymo .dy-feed { -webkit-mask-image: none; mask-image: none; }
    .hub-anim.ha-labels-dymo .dy-tag1 { left: 1cqw; top: 2cqw; }
    .hub-anim.ha-labels-dymo .dy-tag2 { right: auto; left: 14cqw; top: auto; bottom: 4cqw; }
}
@media (prefers-reduced-motion: reduce) { .hub-anim.ha-labels-dymo .ba-toggle { display: none !important; } }
@media (prefers-reduced-motion: no-preference) {
    .hub-anim.ha-labels-dymo .dy-strip, .hub-anim.ha-labels-dymo .dy-spin, .hub-anim.ha-labels-dymo .dy-lab p, .hub-anim.ha-labels-dymo .dy-tag2 { animation-duration: 11s; animation-iteration-count: infinite; animation-fill-mode: both; animation-timing-function: linear; }
    .hub-anim.ha-labels-dymo .dy-strip { animation-name: hady-feed; }
    @keyframes hady-feed {
        0%, 8% { transform: translateX(calc(-3 * var(--P))); opacity: 1; animation-timing-function: ease-in-out; }
        22%, 34% { transform: translateX(calc(-2 * var(--P))); animation-timing-function: ease-in-out; }
        48%, 60% { transform: translateX(calc(-1 * var(--P))); animation-timing-function: ease-in-out; }
        74%, 92% { transform: translateX(0); opacity: 1; }
        97% { transform: translateX(0); opacity: 0; }
        97.5%, 100% { transform: translateX(calc(-3 * var(--P))); opacity: 0; } }
    .hub-anim.ha-labels-dymo .dy-spin { animation-name: hady-spin; }
    @keyframes hady-spin {
        0%, 8% { transform: rotate(0); animation-timing-function: ease-in-out; } 22%, 34% { transform: rotate(-120deg); animation-timing-function: ease-in-out; }
        48%, 60% { transform: rotate(-240deg); animation-timing-function: ease-in-out; } 74%, 100% { transform: rotate(-360deg); } }
    .hub-anim.ha-labels-dymo .dy-lab.dy-k2 p { animation-name: hady-p1; }
    @keyframes hady-p1 { 0%, 8% { clip-path: inset(0 0 0 100%); animation-timing-function: ease-in-out; } 22%, 100% { clip-path: inset(0 0 0 0); } }
    .hub-anim.ha-labels-dymo .dy-lab.dy-k1 p { animation-name: hady-p2; }
    @keyframes hady-p2 { 0%, 34% { clip-path: inset(0 0 0 100%); animation-timing-function: ease-in-out; } 48%, 100% { clip-path: inset(0 0 0 0); } }
    .hub-anim.ha-labels-dymo .dy-lab.dy-k0 p { animation-name: hady-p3; }
    @keyframes hady-p3 { 0%, 60% { clip-path: inset(0 0 0 100%); animation-timing-function: ease-in-out; } 74%, 100% { clip-path: inset(0 0 0 0); } }
    .hub-anim.ha-labels-dymo .dy-tag2 { animation-name: hady-t2; animation-timing-function: ease; }
    @keyframes hady-t2 { 0%, 3% { opacity: 0; transform: rotate(2deg) translateY(6px); } 7%, 93% { opacity: 1; transform: rotate(2deg); } 97%, 100% { opacity: 0; transform: rotate(2deg); } }
}