/* Return-address animation on /address-labels: on a mint dotted desk, one address is typed into the
   first cell of a label sheet, copies into every cell, then one sticker peels off and lands on an
   envelope corner. Sizes are in cqw of .ad-scene so the peel path holds at every width.
   Reduced motion: full sheet, one empty slot, the sticker already on the envelope. */
.hub-anim.ha-address-labels .ha-stage { border: 1px solid #c7e3d3; background-color: #dff1e7;
    background-image: radial-gradient(rgba(21, 94, 60, 0.16) 1.3px, transparent 1.6px); background-size: 18px 18px; }
.hub-anim.ha-address-labels .ha-stage { padding-bottom: 0; }
.hub-anim.ha-address-labels .ad-scene { position: relative; container-type: inline-size; aspect-ratio: 2.25; max-width: 940px; margin: 0 auto; overflow: hidden;
    --ad-dx: 25cqw; --ad-dy: -4.4cqw; --ad-rot: 3deg; --ad-s: 1.05; --ad-s1: 1.1; }
.hub-anim.ha-address-labels .ad-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.hub-anim.ha-address-labels .ad-sheet { position: absolute; z-index: 2; left: 3cqw; top: 6cqw; width: 55cqw; box-sizing: border-box; padding: 2.6cqw 2.4cqw 3cqw;
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.3cqw 1.2cqw; background: #fff; border: 2px solid #0f0f12; border-radius: 1.2cqw 1.2cqw 0 0;
    box-shadow: 0 2cqw 3cqw -1.6cqw rgba(15, 15, 18, 0.4); }
.hub-anim.ha-address-labels .ad-cell { position: relative; aspect-ratio: 2.63; border-radius: 0.7cqw; background-color: #fff; box-shadow: inset 0 0 0 1px #d5ddd7; }
.hub-anim.ha-address-labels .ad-cell.ad-c6 { background-color: #eef1ee; }
.hub-anim.ha-address-labels .ad-stk { position: absolute; inset: 0; z-index: 1; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; gap: 0.1cqw;
    padding: 0 1.1cqw; background: #fff; border: 1px solid #c3ccc5; border-radius: 0.7cqw; overflow: hidden; transform-origin: 50% 50%; }
.hub-anim.ha-address-labels .ad-stk > * { display: block; white-space: nowrap; overflow: hidden; color: #1f2937; font: 500 1.15cqw/1.25 Inter, system-ui, sans-serif; }
.hub-anim.ha-address-labels .ad-stk > b { font: 800 1.35cqw/1.25 Manrope, Inter, sans-serif; color: #0f0f12; }
.hub-anim.ha-address-labels .ad-peel { z-index: 5; transform: translate(var(--ad-dx), var(--ad-dy)) rotate(var(--ad-rot)) scale(var(--ad-s)); box-shadow: 0 0.3cqw 0.5cqw rgba(15, 15, 18, 0.18); }
.hub-anim.ha-address-labels .ad-env { position: absolute; z-index: 1; left: 62cqw; top: 10cqw; width: 34cqw; height: 22cqw; box-sizing: border-box; background: #fdf0c4; border: 2px solid #0f0f12;
    border-radius: 1cqw; transform: rotate(3deg); box-shadow: 0 2cqw 3cqw -1.6cqw rgba(15, 15, 18, 0.45); }
.hub-anim.ha-address-labels .ad-env::before { content: ""; position: absolute; left: 1.9cqw; top: 1.9cqw; width: 15.9cqw; aspect-ratio: 2.63; border: 1.5px dashed rgba(15, 15, 18, 0.35); border-radius: 0.7cqw; box-sizing: border-box; }
.hub-anim.ha-address-labels .ad-to { position: absolute; left: 36%; height: 1.1cqw; border-radius: 1cqw; background: rgba(15, 15, 18, 0.16); }
.hub-anim.ha-address-labels .ad-to:nth-of-type(1) { top: 52%; width: 34%; } .hub-anim.ha-address-labels .ad-to:nth-of-type(2) { top: 64%; width: 44%; } .hub-anim.ha-address-labels .ad-to:nth-of-type(3) { top: 76%; width: 38%; }
.hub-anim.ha-address-labels .ad-note { position: absolute; z-index: 6; margin: 0; padding: 0.42rem 0.75rem; border-radius: 999px; background: #14532d; color: #fff; white-space: nowrap;
    font: 800 clamp(0.74rem, 1.55cqw, 0.92rem)/1 Manrope, Inter, sans-serif; letter-spacing: -0.005em; box-shadow: 3px 4px 0 #0f0f12; }
.hub-anim.ha-address-labels .ad-note1 { left: 44cqw; top: 1.6cqw; transform: rotate(-4deg); }
.hub-anim.ha-address-labels .ad-note2 { left: 72cqw; top: 35cqw; transform: rotate(3deg); background: #fff; color: #14532d; border: 2px solid #0f0f12; }
@media (max-width: 880px) {
    .hub-anim.ha-address-labels .ha-stage { padding-bottom: 3.2rem; }
    .hub-anim.ha-address-labels .ad-scene { max-width: 460px; aspect-ratio: 0.82; --ad-dx: -37.6cqw; --ad-dy: 29.4cqw; --ad-rot: -2deg; }
    .hub-anim.ha-address-labels .ad-sheet { left: 4cqw; top: 9cqw; width: 92cqw; padding: 4cqw 3.6cqw; gap: 2.4cqw; grid-template-columns: repeat(2, minmax(0, 1fr)); border-radius: 2cqw; }
    .hub-anim.ha-address-labels .ad-cell:nth-child(n+7) { display: none; }
    .hub-anim.ha-address-labels .ad-cell, .hub-anim.ha-address-labels .ad-stk { border-radius: 1.4cqw; }
    .hub-anim.ha-address-labels .ad-stk { padding: 0 2.6cqw; gap: 0.3cqw; }
    .hub-anim.ha-address-labels .ad-stk > * { font-size: 2.9cqw; }
    .hub-anim.ha-address-labels .ad-stk > b { font-size: 3.4cqw; }
    .hub-anim.ha-address-labels .ad-env { left: 10cqw; top: 74cqw; width: 80cqw; height: 46cqw; transform: rotate(-2deg); border-radius: 2cqw; }
    .hub-anim.ha-address-labels .ad-env::before { left: 3cqw; top: 3cqw; width: 41.2cqw; border-radius: 1.4cqw; }
    .hub-anim.ha-address-labels .ad-to { height: 2.4cqw; left: 40%; }
    .hub-anim.ha-address-labels .ad-note1 { left: 4cqw; top: 1cqw; }
    .hub-anim.ha-address-labels .ad-note2 { left: auto; right: 3cqw; top: 105cqw; }
}
@media (prefers-reduced-motion: reduce) { .hub-anim.ha-address-labels .ba-toggle { display: none !important; } }
@media (prefers-reduced-motion: no-preference) {
    .hub-anim.ha-address-labels .ad-stk, .hub-anim.ha-address-labels .ad-stk > *, .hub-anim.ha-address-labels .ad-note, .hub-anim.ha-address-labels .ad-cell.ad-c6 { animation-duration: 11s; animation-iteration-count: infinite; animation-timing-function: ease; animation-fill-mode: both; }
    .hub-anim.ha-address-labels .ad-c1 .ad-stk > * { animation-name: haad-type; }
    .hub-anim.ha-address-labels .ad-c1 .ad-stk > :nth-child(2) { animation-name: haad-type2; }
    .hub-anim.ha-address-labels .ad-c1 .ad-stk > :nth-child(3) { animation-name: haad-type3; }
    @keyframes haad-type { 0%, 3.64% { clip-path: inset(0 100% 0 0); animation-timing-function: steps(7, end); } 8.18%, 100% { clip-path: inset(0 0 0 0); } }
    @keyframes haad-type2 { 0%, 9.09% { clip-path: inset(0 100% 0 0); animation-timing-function: steps(13, end); } 13.64%, 100% { clip-path: inset(0 0 0 0); } }
    @keyframes haad-type3 { 0%, 14.55% { clip-path: inset(0 100% 0 0); animation-timing-function: steps(17, end); } 20.00%, 100% { clip-path: inset(0 0 0 0); } }
    .hub-anim.ha-address-labels .ad-c1 .ad-stk { animation-name: haad-c1; }
    @keyframes haad-c1 { 0%, 2.73% { opacity: 0; } 3.64%, 93.5% { opacity: 1; } 98%, 100% { opacity: 0; } }
    .hub-anim.ha-address-labels .ad-c2 .ad-stk { animation-name: haad-c2; }
    @keyframes haad-c2 { 0%, 22.27% { opacity: 0; transform: scale(1.25); } 24.55%, 93.5% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; transform: none; } }
    .hub-anim.ha-address-labels .ad-c3 .ad-stk { animation-name: haad-c3; }
    @keyframes haad-c3 { 0%, 23.45% { opacity: 0; transform: scale(1.25); } 25.73%, 93.5% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; transform: none; } }
    .hub-anim.ha-address-labels .ad-c4 .ad-stk { animation-name: haad-c4; }
    @keyframes haad-c4 { 0%, 24.64% { opacity: 0; transform: scale(1.25); } 26.91%, 93.5% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; transform: none; } }
    .hub-anim.ha-address-labels .ad-c5 .ad-stk { animation-name: haad-c5; }
    @keyframes haad-c5 { 0%, 25.82% { opacity: 0; transform: scale(1.25); } 28.09%, 93.5% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; transform: none; } }
    .hub-anim.ha-address-labels .ad-c7 .ad-stk { animation-name: haad-c7; }
    @keyframes haad-c7 { 0%, 28.18% { opacity: 0; transform: scale(1.25); } 30.45%, 93.5% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; transform: none; } }
    .hub-anim.ha-address-labels .ad-c8 .ad-stk { animation-name: haad-c8; }
    @keyframes haad-c8 { 0%, 29.36% { opacity: 0; transform: scale(1.25); } 31.64%, 93.5% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; transform: none; } }
    .hub-anim.ha-address-labels .ad-c9 .ad-stk { animation-name: haad-c9; }
    @keyframes haad-c9 { 0%, 30.55% { opacity: 0; transform: scale(1.25); } 32.82%, 93.5% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; transform: none; } }
    .hub-anim.ha-address-labels .ad-c10 .ad-stk { animation-name: haad-c10; }
    @keyframes haad-c10 { 0%, 31.73% { opacity: 0; transform: scale(1.25); } 34.00%, 93.5% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; transform: none; } }
    .hub-anim.ha-address-labels .ad-c11 .ad-stk { animation-name: haad-c11; }
    @keyframes haad-c11 { 0%, 32.91% { opacity: 0; transform: scale(1.25); } 35.18%, 93.5% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; transform: none; } }
    .hub-anim.ha-address-labels .ad-c12 .ad-stk { animation-name: haad-c12; }
    @keyframes haad-c12 { 0%, 34.09% { opacity: 0; transform: scale(1.25); } 36.36%, 93.5% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; transform: none; } }
    .hub-anim.ha-address-labels .ad-c13 .ad-stk { animation-name: haad-c13; }
    @keyframes haad-c13 { 0%, 35.27% { opacity: 0; transform: scale(1.25); } 37.55%, 93.5% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; transform: none; } }
    .hub-anim.ha-address-labels .ad-c14 .ad-stk { animation-name: haad-c14; }
    @keyframes haad-c14 { 0%, 36.45% { opacity: 0; transform: scale(1.25); } 38.73%, 93.5% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; transform: none; } }
    .hub-anim.ha-address-labels .ad-c15 .ad-stk { animation-name: haad-c15; }
    @keyframes haad-c15 { 0%, 37.64% { opacity: 0; transform: scale(1.25); } 39.91%, 93.5% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; transform: none; } }
    .hub-anim.ha-address-labels .ad-peel { animation-name: haad-peel; }
    @keyframes haad-peel {
        0%, 27.00% { opacity: 0; transform: scale(1.25); box-shadow: none; }
        29.27%, 41.82% { opacity: 1; transform: none; box-shadow: none; }
        47.27% { opacity: 1; transform: translate(0, -0.8cqw) rotate(-7deg) scale(1.06); box-shadow: 0 1.6cqw 2.4cqw -1cqw rgba(15, 15, 18, 0.5); animation-timing-function: cubic-bezier(.5, 0, .3, 1); }
        59.09% { opacity: 1; transform: translate(var(--ad-dx), calc(var(--ad-dy) - 1.5cqw)) rotate(var(--ad-rot)) scale(var(--ad-s1)); box-shadow: 0 1.6cqw 2.4cqw -1cqw rgba(15, 15, 18, 0.5); }
        62.27%, 93.5% { opacity: 1; transform: translate(var(--ad-dx), var(--ad-dy)) rotate(var(--ad-rot)) scale(var(--ad-s)); box-shadow: 0 0.3cqw 0.5cqw rgba(15, 15, 18, 0.18); }
        98%, 100% { opacity: 0; transform: translate(var(--ad-dx), var(--ad-dy)) rotate(var(--ad-rot)) scale(var(--ad-s)); } }
    .hub-anim.ha-address-labels .ad-note1 { animation-name: haad-n1; }
    @keyframes haad-n1 { 0%, 1.82% { opacity: 0; transform: rotate(-4deg) translateY(6px); } 5.45%, 93.5% { opacity: 1; transform: rotate(-4deg); } 98%, 100% { opacity: 0; transform: rotate(-4deg); } }
    .hub-anim.ha-address-labels .ad-note2 { animation-name: haad-n2; }
    @keyframes haad-n2 { 0%, 61.82% { opacity: 0; transform: rotate(3deg) translateY(6px); } 65.45%, 93.5% { opacity: 1; transform: rotate(3deg); } 98%, 100% { opacity: 0; transform: rotate(3deg); } }
    .hub-anim.ha-address-labels .ad-cell.ad-c6 { animation-name: haad-slot; }
    @keyframes haad-slot { 0%, 44.55% { background-color: #fff; } 48.18%, 93.5% { background-color: #eef1ee; } 98%, 100% { background-color: #fff; } }
}