/* Avery page: the alignment check. In front of a bright window, a plain-paper test print slides
   over an Avery 5160 sheet (3 x 10 cells on Letter, true margins), turns see-through against the
   light and its printed boxes settle exactly on the label cells; a check pill says it lines up.
   Both sheets share one grid so the 100% overlay matches at every width (cqw of .av-scene).
   Reduced motion: the test print already sits on the sheet, see-through, both notes showing. */
.hub-anim.ha-labels-avery .ha-stage { border: 1px solid #c9d7ea; background-color: #d9e4f2;
    background-image: repeating-linear-gradient(90deg, rgba(40, 70, 120, 0.06) 0 2px, transparent 2px 26px); }
.hub-anim.ha-labels-avery .av-scene { position: relative; container-type: inline-size; aspect-ratio: 2.3; max-width: 920px; margin: 0 auto; overflow: hidden;
    --av-sw: 29.4cqw; --av-l: 35.3cqw; --av-t: 3cqw; --av-dx: 31cqw; --av-dy: 1.5cqw; --av-rot: 4deg; font-family: Inter, system-ui, sans-serif; }
.hub-anim.ha-labels-avery .av-scene p { margin: 0; }

/* window behind */
.hub-anim.ha-labels-avery .av-window { position: absolute; left: 20cqw; top: 1cqw; width: 60cqw; height: 38cqw; box-sizing: border-box; border: 1.3cqw solid #fffaf0; border-radius: 1.6cqw;
    background: linear-gradient(#fffaf0, #fffaf0) 50% 0 / 1.1cqw 100% no-repeat, linear-gradient(#fffaf0, #fffaf0) 0 50% / 100% 1.1cqw no-repeat,
    radial-gradient(ellipse at 50% 45%, #fffdf2 0%, #fff4c9 55%, #ffe8a6 100%);
    box-shadow: inset 0 0 0 1.5px rgba(23, 32, 47, 0.14), 0 0 0 1.5px rgba(23, 32, 47, 0.18), 0 0 3cqw 0.4cqw rgba(255, 238, 180, 0.7); }
.hub-anim.ha-labels-avery .av-window::after { content: ""; position: absolute; left: -3.3cqw; right: -3.3cqw; bottom: -3.2cqw; height: 1.9cqw; border-radius: 0.6cqw; background: #fffaf0;
    box-shadow: 0 0 0 1.5px rgba(23, 32, 47, 0.18), 0 1cqw 1.4cqw -0.8cqw rgba(23, 32, 47, 0.45); }

/* label sheet and test print share size and grid (Letter 8.5 x 11, 5160 margins) */
.hub-anim.ha-labels-avery .av-sheet, .hub-anim.ha-labels-avery .av-paper { position: absolute; left: var(--av-l); top: var(--av-t); width: var(--av-sw); aspect-ratio: 8.5 / 11; box-sizing: border-box; border-radius: 0.3cqw; }
.hub-anim.ha-labels-avery .av-grid { position: absolute; inset: 0; padding: 5.88% 2.2% 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 1.47%; }
.hub-anim.ha-labels-avery .av-grid > i { display: block; position: relative; aspect-ratio: 2.625; box-sizing: border-box; }
.hub-anim.ha-labels-avery .av-sheet { z-index: 1; background: #f3efe4; box-shadow: 0 0 0 1.5px #17202f, 0 1.6cqw 2.4cqw -1.4cqw rgba(23, 32, 47, 0.55); }
.hub-anim.ha-labels-avery .av-sheet .av-grid > i { background: #cbdaf4; border: 1px solid #6f8fc6; border-radius: 0.5cqw; }
.hub-anim.ha-labels-avery .av-code { position: absolute; left: 2.6%; top: 1.2%; font: 800 clamp(0.5rem, 0.95cqw, 0.62rem)/1 Manrope, Inter, sans-serif; color: #5d6b82; letter-spacing: 0.04em; }
.hub-anim.ha-labels-avery .av-paper { z-index: 2; background: rgba(255, 255, 255, 0.5); box-shadow: 0 0 0 1px rgba(23, 32, 47, 0.45), 0 1.6cqw 2.6cqw -1.2cqw rgba(23, 32, 47, 0.4); }
.hub-anim.ha-labels-avery .av-paper .av-grid > i { border: 1px solid #1d2638; border-radius: 0.5cqw; }
.hub-anim.ha-labels-avery .av-paper .av-grid > i > * { position: absolute; left: 10%; height: 9%; border-radius: 1cqw; background: #2a3550; text-decoration: none; }
.hub-anim.ha-labels-avery .av-paper .av-grid > i > b { top: 33%; width: 46%; }
.hub-anim.ha-labels-avery .av-paper .av-grid > i > s { top: 56%; width: 64%; background: #7a849a; }
.hub-anim.ha-labels-avery .av-grid > i:nth-child(3n+2) > b { width: 38%; } .hub-anim.ha-labels-avery .av-grid > i:nth-child(4n+1) > s { width: 54%; }
.hub-anim.ha-labels-avery .av-grid > i:nth-child(5n+3) > b { width: 52%; }

/* notes */
.hub-anim.ha-labels-avery .av-note { position: absolute; z-index: 5; display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.45rem 0.8rem; border-radius: 999px; white-space: nowrap;
    background: #1d3b6e; color: #fff; font: 800 clamp(0.74rem, 1.5cqw, 0.92rem)/1.1 Manrope, Inter, sans-serif; box-shadow: 3px 4px 0 #17202f; }
.hub-anim.ha-labels-avery .av-n1 { right: 1.5cqw; top: 2cqw; transform: rotate(3deg); }
.hub-anim.ha-labels-avery .av-n2 { left: 3cqw; top: 30cqw; transform: rotate(-3deg); background: #fff; color: #1d3b6e; border: 2px solid #17202f; }
.hub-anim.ha-labels-avery .av-n2 i { display: inline-grid; place-items: center; width: 1.25em; height: 1.25em; border-radius: 50%; background: #2f9e5b; color: #fff; }
.hub-anim.ha-labels-avery .av-n2 svg { width: 0.8em; height: 0.8em; }

@media (max-width: 880px) {
    .hub-anim.ha-labels-avery .ha-stage { padding-bottom: 3.2rem; }
    .hub-anim.ha-labels-avery .av-scene { max-width: 460px; aspect-ratio: 0.93; --av-sw: 60cqw; --av-l: 20cqw; --av-t: 12cqw; --av-dx: 14cqw; --av-dy: 4cqw; --av-rot: 3deg; }
    .hub-anim.ha-labels-avery .av-window { left: 6cqw; top: 8cqw; width: 88cqw; height: 84cqw; border-width: 2.4cqw; border-radius: 3cqw;
        background-size: 2cqw 100%, 100% 2cqw, auto; }
    .hub-anim.ha-labels-avery .av-window::after { left: -4cqw; right: -4cqw; bottom: -5.2cqw; height: 3cqw; border-radius: 1cqw; }
    .hub-anim.ha-labels-avery .av-code { font-size: 1.9cqw; }
    .hub-anim.ha-labels-avery .av-note { font-size: 3.5cqw; }
    .hub-anim.ha-labels-avery .av-n1 { right: auto; left: 4cqw; top: 1.5cqw; transform: rotate(-2deg); }
    .hub-anim.ha-labels-avery .av-n2 { left: auto; right: 4cqw; top: 95cqw; transform: rotate(-2deg); }
}

/* resting state: test print over the sheet */
.hub-anim.ha-labels-avery .av-paper { transform: none; }
@media (prefers-reduced-motion: reduce) { .hub-anim.ha-labels-avery .ba-toggle { display: none !important; } }
@media (prefers-reduced-motion: no-preference) {
    .hub-anim.ha-labels-avery .av-paper, .hub-anim.ha-labels-avery .av-window, .hub-anim.ha-labels-avery .av-note, .hub-anim.ha-labels-avery .av-sheet { animation-duration: 10s; animation-iteration-count: infinite; animation-timing-function: ease; animation-fill-mode: both; }
    .hub-anim.ha-labels-avery .av-sheet { animation-name: haav-sheet; }
    @keyframes haav-sheet { 0% { opacity: 0; } 5%, 94% { opacity: 1; } 100% { opacity: 1; } }
    .hub-anim.ha-labels-avery .av-paper { animation-name: haav-paper; }
    @keyframes haav-paper {
        0% { opacity: 0; transform: translate(var(--av-dx), calc(var(--av-dy) + 2cqw)) rotate(var(--av-rot)); background-color: #fff; }
        6%, 18% { opacity: 1; transform: translate(var(--av-dx), var(--av-dy)) rotate(var(--av-rot)); background-color: #fff; animation-timing-function: cubic-bezier(.45, 0, .25, 1); }
        38% { opacity: 1; transform: translate(-0.5cqw, 0.4cqw) rotate(-0.6deg); background-color: rgba(255, 255, 255, 0.92); }
        44% { transform: none; background-color: rgba(255, 255, 255, 0.78); }
        52%, 92% { opacity: 1; transform: none; background-color: rgba(255, 255, 255, 0.5); }
        98%, 100% { opacity: 0; transform: none; background-color: rgba(255, 255, 255, 0.5); } }
    .hub-anim.ha-labels-avery .av-window { animation-name: haav-glow; }
    @keyframes haav-glow { 0%, 40% { filter: brightness(0.94) saturate(0.8); } 52%, 90% { filter: brightness(1.03) saturate(1.1); } 100% { filter: brightness(0.94) saturate(0.8); } }
    .hub-anim.ha-labels-avery .av-n1 { animation-name: haav-n1; }
    @keyframes haav-n1 { 0%, 6% { opacity: 0; translate: 0 6px; } 11%, 92% { opacity: 1; translate: 0 0; } 98%, 100% { opacity: 0; translate: 0 0; } }
    .hub-anim.ha-labels-avery .av-n2 { animation-name: haav-n2; }
    @keyframes haav-n2 { 0%, 52% { opacity: 0; scale: 0.85; } 56% { opacity: 1; scale: 1.06; } 59%, 92% { opacity: 1; scale: 1; } 98%, 100% { opacity: 0; scale: 1; } }
}