/* Mail merge animation on /mail-merge-labels: a three-household list on a periwinkle desk; each
   row lights up and types its name and address onto a kraft envelope's label. Reduced motion:
   every envelope shows its finished label. */
.hub-anim.ha-mail-merge-labels .ha-stage { border: 1px solid #d5dcef; background-color: #e9eef9;
    background-image: repeating-linear-gradient(135deg, rgba(30, 58, 138, 0.045) 0 2px, transparent 2px 16px); }
.hub-anim.ha-mail-merge-labels .mm-scene { display: flex; flex-direction: column; align-items: center; gap: 0.2rem; }
.hub-anim.ha-mail-merge-labels .mm-list { width: 100%; max-width: 600px; box-sizing: border-box; background: #fffefb; border: 2px solid #0f0f12; border-radius: 14px;
    box-shadow: 5px 6px 0 #1e3a8a; padding: 0.7rem 0.8rem 0.6rem; transform: rotate(-0.8deg); }
.hub-anim.ha-mail-merge-labels .mm-head { display: grid; grid-template-columns: 1.6rem 1.15fr 1.15fr 1.1fr; gap: 0.5rem; margin: 0 0 0.35rem; padding: 0 0.5rem; }
.hub-anim.ha-mail-merge-labels .mm-head span { justify-self: start; font: 800 0.66rem/1 Manrope, Inter, sans-serif; letter-spacing: 0.1em; text-transform: uppercase; color: #1e3a8a; background: #dfe6fb; border-radius: 999px; padding: 0.32rem 0.55rem; }
.hub-anim.ha-mail-merge-labels .mm-head span:first-child { grid-column: 2; }
.hub-anim.ha-mail-merge-labels .mm-rows { list-style: none; margin: 0; padding: 0; }
.hub-anim.ha-mail-merge-labels .mm-row { display: grid; grid-template-columns: 1.6rem 1.15fr 1.15fr 1.1fr; gap: 0.5rem; align-items: center; margin: 0; padding: 0.5rem 0.5rem; border-radius: 9px;
    border-top: 1px dashed #dcd8cc; font: 500 0.86rem/1.25 Inter, system-ui, sans-serif; color: #27272a; }
.hub-anim.ha-mail-merge-labels .mm-row::before { content: none; }
.hub-anim.ha-mail-merge-labels .mm-n { display: inline-grid; place-items: center; width: 1.3rem; height: 1.3rem; border-radius: 999px; background: #ef6a4f; color: #fff; font: 800 0.68rem/1 Manrope, Inter, sans-serif; }
.hub-anim.ha-mail-merge-labels .mm-name { font-weight: 700; color: #0f0f12; }
.hub-anim.ha-mail-merge-labels .mm-c { min-width: 0; }
.hub-anim.ha-mail-merge-labels .mm-arrow { width: 30px; height: 42px; color: #1e3a8a; margin: 0.35rem 0 0.1rem; }
.hub-anim.ha-mail-merge-labels .mm-envs { width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.1rem; }
.hub-anim.ha-mail-merge-labels .mm-env { position: relative; aspect-ratio: 8 / 5; border: 2px solid #0f0f12; border-radius: 8px; background: #e9d1a6;
    box-shadow: 0 16px 26px -16px rgba(15, 15, 18, 0.55); transform: rotate(var(--r, 0deg)); }
.hub-anim.ha-mail-merge-labels .mm-env::before { content: ""; position: absolute; inset: 0; border-radius: 6px; pointer-events: none;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0 L50 46 L100 0' fill='%23dcc193' stroke='%230f0f12' stroke-width='1.6' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") top / 100% 100% no-repeat; }
.hub-anim.ha-mail-merge-labels .mm-e1 { --r: -2deg; } .hub-anim.ha-mail-merge-labels .mm-e2 { --r: 1.2deg; } .hub-anim.ha-mail-merge-labels .mm-e3 { --r: -0.8deg; }
.hub-anim.ha-mail-merge-labels .mm-tag { position: absolute; z-index: 2; top: -0.7rem; left: -0.7rem; display: inline-grid; place-items: center; width: 1.3rem; height: 1.3rem; border-radius: 999px;
    background: #ef6a4f; color: #fff; border: 1.5px solid #0f0f12; font: 800 0.68rem/1 Manrope, Inter, sans-serif; }
.hub-anim.ha-mail-merge-labels .mm-lab { position: absolute; z-index: 1; left: 50%; bottom: 13%; width: 74%; transform: translateX(-50%); box-sizing: border-box; display: flex; flex-direction: column; gap: 0.12rem;
    padding: 0.5rem 0.65rem; background: #fff; border: 1.5px solid #0f0f12; border-radius: 6px; }
.hub-anim.ha-mail-merge-labels .mm-ln { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font: 500 0.78rem/1.25 "SFMono-Regular", ui-monospace, Menlo, Consolas, monospace; color: #1e3a8a; letter-spacing: -0.01em; }
.hub-anim.ha-mail-merge-labels .mm-ln:nth-child(2) { font-weight: 700; color: #0f0f12; }
@media (max-width: 960px) and (min-width: 761px) {
    .hub-anim.ha-mail-merge-labels .mm-ln { font-size: 0.7rem; }
    .hub-anim.ha-mail-merge-labels .mm-lab { width: 84%; padding: 0.4rem 0.5rem; }
}
@media (max-width: 760px) {
    .hub-anim.ha-mail-merge-labels .mm-list { padding: 0.55rem 0.55rem 0.45rem; box-shadow: 4px 5px 0 #1e3a8a; }
    .hub-anim.ha-mail-merge-labels .mm-head { display: none; }
    .hub-anim.ha-mail-merge-labels .mm-row { display: block; position: relative; padding: 0.45rem 0.4rem 0.45rem 2.1rem; font-size: 0.8rem; }
    .hub-anim.ha-mail-merge-labels .mm-row:first-child { border-top: 0; }
    .hub-anim.ha-mail-merge-labels .mm-n { position: absolute; left: 0.4rem; top: 0.45rem; }
    .hub-anim.ha-mail-merge-labels .mm-name { display: block; margin-bottom: 0.1rem; }
    .hub-anim.ha-mail-merge-labels .mm-c:not(.mm-name) { color: #52525b; font-size: 0.76rem; }
    .hub-anim.ha-mail-merge-labels .mm-c:last-child { white-space: nowrap; }
    .hub-anim.ha-mail-merge-labels .mm-name + .mm-c::after { content: ", "; }
    .hub-anim.ha-mail-merge-labels .mm-envs { grid-template-columns: minmax(0, 1fr); gap: 0; justify-items: center; }
    .hub-anim.ha-mail-merge-labels .mm-env { width: 84%; max-width: 330px; }
    .hub-anim.ha-mail-merge-labels .mm-e1 { justify-self: start; }
    .hub-anim.ha-mail-merge-labels .mm-e2 { justify-self: end; margin-top: -0.9rem; }
    .hub-anim.ha-mail-merge-labels .mm-e3 { justify-self: start; margin-top: -0.9rem; }
    .hub-anim.ha-mail-merge-labels .mm-env:nth-child(2) { z-index: 1; } .hub-anim.ha-mail-merge-labels .mm-env:nth-child(3) { z-index: 2; }
    .hub-anim.ha-mail-merge-labels .mm-ln { font-size: 0.74rem; }
    .hub-anim.ha-mail-merge-labels .mm-lab { width: 80%; padding: 0.45rem 0.55rem; }
}
@media (max-width: 420px) {
    .hub-anim.ha-mail-merge-labels .mm-env { width: 90%; }
    .hub-anim.ha-mail-merge-labels .mm-lab { width: 84%; padding: 0.4rem 0.45rem; }
    .hub-anim.ha-mail-merge-labels .mm-ln { font-size: 0.68rem; }
}
@media (prefers-reduced-motion: reduce) { .hub-anim.ha-mail-merge-labels .ba-toggle { display: none !important; } }
@media (prefers-reduced-motion: no-preference) {
    .hub-anim.ha-mail-merge-labels .mm-row, .hub-anim.ha-mail-merge-labels .mm-lab, .hub-anim.ha-mail-merge-labels .mm-ln { animation-duration: 11s; animation-iteration-count: infinite; animation-timing-function: ease; animation-fill-mode: both; }
    .hub-anim.ha-mail-merge-labels .mm-r1 { animation-name: hamm-row1; }
    @keyframes hamm-row1 { 0%, 4.55% { background: transparent; transform: none; } 6.82%, 29.09% { background: #ffd9cf; transform: translateX(6px); } 31.82%, 100% { background: transparent; transform: none; } }
    .hub-anim.ha-mail-merge-labels .mm-e1 .mm-lab { animation-name: hamm-lab1; }
    @keyframes hamm-lab1 { 0%, 5.45% { box-shadow: 0 0 0 0 rgba(239, 106, 79, 0); } 7.73%, 28.18% { box-shadow: 0 0 0 4px rgba(239, 106, 79, 0.55); } 31.36%, 100% { box-shadow: 0 0 0 0 rgba(239, 106, 79, 0); } }
    .hub-anim.ha-mail-merge-labels .mm-l1a { animation-name: hamm-t1a; }
    @keyframes hamm-t1a { 0%, 8.18% { clip-path: inset(0 100% 0 0); opacity: 1; animation-timing-function: steps(12, end); } 13.64%, 93.5% { clip-path: inset(0 0 0 0); opacity: 1; } 98% { clip-path: inset(0 0 0 0); opacity: 0; } 100% { clip-path: inset(0 100% 0 0); opacity: 0; } }
    .hub-anim.ha-mail-merge-labels .mm-l1b { animation-name: hamm-t1b; }
    @keyframes hamm-t1b { 0%, 14.55% { clip-path: inset(0 100% 0 0); opacity: 1; animation-timing-function: steps(14, end); } 20.00%, 93.5% { clip-path: inset(0 0 0 0); opacity: 1; } 98% { clip-path: inset(0 0 0 0); opacity: 0; } 100% { clip-path: inset(0 100% 0 0); opacity: 0; } }
    .hub-anim.ha-mail-merge-labels .mm-l1c { animation-name: hamm-t1c; }
    @keyframes hamm-t1c { 0%, 20.91% { clip-path: inset(0 100% 0 0); opacity: 1; animation-timing-function: steps(16, end); } 26.82%, 93.5% { clip-path: inset(0 0 0 0); opacity: 1; } 98% { clip-path: inset(0 0 0 0); opacity: 0; } 100% { clip-path: inset(0 100% 0 0); opacity: 0; } }
    .hub-anim.ha-mail-merge-labels .mm-r2 { animation-name: hamm-row2; }
    @keyframes hamm-row2 { 0%, 33.64% { background: transparent; transform: none; } 35.91%, 58.18% { background: #ffd9cf; transform: translateX(6px); } 60.91%, 100% { background: transparent; transform: none; } }
    .hub-anim.ha-mail-merge-labels .mm-e2 .mm-lab { animation-name: hamm-lab2; }
    @keyframes hamm-lab2 { 0%, 34.55% { box-shadow: 0 0 0 0 rgba(239, 106, 79, 0); } 36.82%, 57.27% { box-shadow: 0 0 0 4px rgba(239, 106, 79, 0.55); } 60.45%, 100% { box-shadow: 0 0 0 0 rgba(239, 106, 79, 0); } }
    .hub-anim.ha-mail-merge-labels .mm-l2a { animation-name: hamm-t2a; }
    @keyframes hamm-t2a { 0%, 37.27% { clip-path: inset(0 100% 0 0); opacity: 1; animation-timing-function: steps(12, end); } 42.73%, 93.5% { clip-path: inset(0 0 0 0); opacity: 1; } 98% { clip-path: inset(0 0 0 0); opacity: 0; } 100% { clip-path: inset(0 100% 0 0); opacity: 0; } }
    .hub-anim.ha-mail-merge-labels .mm-l2b { animation-name: hamm-t2b; }
    @keyframes hamm-t2b { 0%, 43.64% { clip-path: inset(0 100% 0 0); opacity: 1; animation-timing-function: steps(14, end); } 49.09%, 93.5% { clip-path: inset(0 0 0 0); opacity: 1; } 98% { clip-path: inset(0 0 0 0); opacity: 0; } 100% { clip-path: inset(0 100% 0 0); opacity: 0; } }
    .hub-anim.ha-mail-merge-labels .mm-l2c { animation-name: hamm-t2c; }
    @keyframes hamm-t2c { 0%, 50.00% { clip-path: inset(0 100% 0 0); opacity: 1; animation-timing-function: steps(16, end); } 55.91%, 93.5% { clip-path: inset(0 0 0 0); opacity: 1; } 98% { clip-path: inset(0 0 0 0); opacity: 0; } 100% { clip-path: inset(0 100% 0 0); opacity: 0; } }
    .hub-anim.ha-mail-merge-labels .mm-r3 { animation-name: hamm-row3; }
    @keyframes hamm-row3 { 0%, 62.73% { background: transparent; transform: none; } 65.00%, 87.27% { background: #ffd9cf; transform: translateX(6px); } 90.00%, 100% { background: transparent; transform: none; } }
    .hub-anim.ha-mail-merge-labels .mm-e3 .mm-lab { animation-name: hamm-lab3; }
    @keyframes hamm-lab3 { 0%, 63.64% { box-shadow: 0 0 0 0 rgba(239, 106, 79, 0); } 65.91%, 86.36% { box-shadow: 0 0 0 4px rgba(239, 106, 79, 0.55); } 89.55%, 100% { box-shadow: 0 0 0 0 rgba(239, 106, 79, 0); } }
    .hub-anim.ha-mail-merge-labels .mm-l3a { animation-name: hamm-t3a; }
    @keyframes hamm-t3a { 0%, 66.36% { clip-path: inset(0 100% 0 0); opacity: 1; animation-timing-function: steps(12, end); } 71.82%, 93.5% { clip-path: inset(0 0 0 0); opacity: 1; } 98% { clip-path: inset(0 0 0 0); opacity: 0; } 100% { clip-path: inset(0 100% 0 0); opacity: 0; } }
    .hub-anim.ha-mail-merge-labels .mm-l3b { animation-name: hamm-t3b; }
    @keyframes hamm-t3b { 0%, 72.73% { clip-path: inset(0 100% 0 0); opacity: 1; animation-timing-function: steps(14, end); } 78.18%, 93.5% { clip-path: inset(0 0 0 0); opacity: 1; } 98% { clip-path: inset(0 0 0 0); opacity: 0; } 100% { clip-path: inset(0 100% 0 0); opacity: 0; } }
    .hub-anim.ha-mail-merge-labels .mm-l3c { animation-name: hamm-t3c; }
    @keyframes hamm-t3c { 0%, 79.09% { clip-path: inset(0 100% 0 0); opacity: 1; animation-timing-function: steps(16, end); } 85.00%, 93.5% { clip-path: inset(0 0 0 0); opacity: 1; } 98% { clip-path: inset(0 0 0 0); opacity: 0; } 100% { clip-path: inset(0 100% 0 0); opacity: 0; } }
}