/* /sticker-maker: How it works scene (a sticker sheet, a brand sticker and a heart peel off onto a kraft mailer). Sizes in em. */
.hub-anim.ha-sticker-maker .ha-stage { min-height: 0; border: 1px solid #fbcfe8; background: radial-gradient(circle at 12% 20%, #f9a8d4 0 3px, transparent 4px) 0 0 / 90px 70px, radial-gradient(circle at 60% 70%, #fde68a 0 3px, transparent 4px) 0 0 / 110px 80px, linear-gradient(170deg, #fff1f7 0%, #fde2ef 100%); }
.hub-anim.ha-sticker-maker .sc { position: relative; font-size: 16px; width: 33em; max-width: 100%; height: 16.5em; margin: 0 auto; }
.hub-anim.ha-sticker-maker .sk-sheet { position: absolute; left: 1.5em; top: .45em; display: grid; grid-template-columns: repeat(2, 4.2em); gap: .8em; padding: 1em; background: #fff; border: 2px solid #1f1f23; border-radius: .4em; transform: rotate(-3deg); box-shadow: .4em .5em 0 #f472b6; }
.hub-anim.ha-sticker-maker .sk-dot { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 4.2em; height: 4.2em; border-radius: 50%; background: #be185d; color: #fff; box-shadow: 0 0 0 .22em #fff, 0 0 0 .3em #1f1f23; }
.hub-anim.ha-sticker-maker .sk-dot b { font: 800 .72em/1 Manrope, Inter, sans-serif; letter-spacing: .06em; } .hub-anim.ha-sticker-maker .sk-dot small { margin-top: .3em; font: 600 .5em/1 Inter, system-ui, sans-serif; opacity: .9; }
.hub-anim.ha-sticker-maker .sk-heart { position: relative; display: flex; align-items: center; justify-content: center; width: 4.2em; height: 3.6em; }
.hub-anim.ha-sticker-maker .sk-heart::before { content: ""; position: absolute; inset: 0; background: #f472b6; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 21'%3E%3Cpath d='M12 21 1.6 10.6A6 6 0 0 1 12 2.6a6 6 0 0 1 10.4 8z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 21'%3E%3Cpath d='M12 21 1.6 10.6A6 6 0 0 1 12 2.6a6 6 0 0 1 10.4 8z'/%3E%3C/svg%3E") center / contain no-repeat; filter: drop-shadow(0 0 0 #fff); }
.hub-anim.ha-sticker-maker .sk-heart b { position: relative; margin-top: -.4em; font: 800 .8em/1 Manrope, Inter, sans-serif; color: #fff; }
.hub-anim.ha-sticker-maker .sk-gone, .hub-anim.ha-sticker-maker .sk-hgone { visibility: hidden; }
.hub-anim.ha-sticker-maker .sk-mailer { position: absolute; right: 1.5em; top: 2.4em; width: 15em; height: 11em; background: linear-gradient(170deg, #d9b98b, #c49b65); border: 2px solid #1f1f23; border-radius: .5em; box-shadow: .4em .5em 0 rgba(31, 31, 35, .25); }
.hub-anim.ha-sticker-maker .sk-flap { position: absolute; left: 0; right: 0; top: 0; height: 4.2em; background: linear-gradient(170deg, #e3c79c, #cfa874); border-bottom: 2px dashed rgba(31, 31, 35, .35); border-radius: .4em .4em 0 0; clip-path: polygon(0 0, 100% 0, 100% 40%, 50% 100%, 0 40%); }
.hub-anim.ha-sticker-maker .sk-fly { position: absolute; left: 4.9em; top: 1.6em; }
.hub-anim.ha-sticker-maker .sk-hfly { position: absolute; right: .8em; bottom: .7em; transform: rotate(12deg); }
.hub-anim.ha-sticker-maker .sk-thanks { position: absolute; left: .9em; bottom: .9em; padding: .3em .6em; background: #fff; border: 1.5px solid #1f1f23; border-radius: .3em; font: 700 .62em/1 Manrope, Inter, sans-serif; color: #831843; transform: rotate(-4deg); }
@media (max-width: 640px) { .hub-anim.ha-sticker-maker .sc { font-size: 7.1px; } .hub-anim.ha-sticker-maker .ha-stage { padding-bottom: 3.4rem; } }
@media (prefers-reduced-motion: no-preference) {
 .hub-anim.ha-sticker-maker .sk-fly { animation: sk-fly 10s cubic-bezier(.4, 0, .2, 1) infinite both; }
 .hub-anim.ha-sticker-maker .sk-hfly { animation: sk-hfly 10s cubic-bezier(.4, 0, .2, 1) infinite both; }
 .hub-anim.ha-sticker-maker .sk-gone { animation: sk-gone 10s step-end infinite both; } .hub-anim.ha-sticker-maker .sk-hgone { animation: sk-hgone 10s step-end infinite both; }
 .hub-anim.ha-sticker-maker .sk-thanks { animation: sk-thanks 10s ease infinite both; }
 @keyframes sk-gone { 0% { visibility: visible; } 12% { visibility: hidden; } 96% { visibility: visible; } }
 @keyframes sk-hgone { 0% { visibility: visible; } 44% { visibility: hidden; } 96% { visibility: visible; } }
 @keyframes sk-fly { 0%, 12% { transform: translate(-18.8em, 2.45em) rotate(-3deg); opacity: 1; } 18% { transform: translate(-18.2em, 1.6em) rotate(-14deg) scale(1.12); } 32% { transform: translate(0, -.6em) rotate(8deg) scale(1.12); } 36% { transform: scale(.94, 1.06); } 40%, 92% { transform: none; opacity: 1; } 97%, 100% { transform: none; opacity: 0; } }
 @keyframes sk-hfly { 0%, 44% { transform: translate(-23.9em, 2.35em) rotate(-3deg); opacity: 1; } 50% { transform: translate(-23.3em, 1.5em) rotate(-10deg) scale(1.12); } 62% { transform: translate(0, -.6em) rotate(18deg) scale(1.12); } 66% { transform: rotate(12deg) scale(.94, 1.06); } 70%, 92% { transform: rotate(12deg); opacity: 1; } 97%, 100% { transform: rotate(12deg); opacity: 0; } }
 @keyframes sk-thanks { 0%, 70% { opacity: 0; transform: rotate(-4deg) translateY(.6em); } 76%, 94% { opacity: 1; transform: rotate(-4deg); } 100% { opacity: 0; } }
}