.hero-ani{position:relative;width:100%;overflow:hidden;pointer-events:none}.hero-ani-inner{position:relative;width:390px;height:180px;margin:0 auto;transform-origin:top center}.hero-ani-inner .pill{position:absolute;top:0;width:108px;height:40px;border-radius:9999px;transform-origin:50% 50%;will-change:transform;display:flex;align-items:center;opacity:0}[dir=ltr] .hero-ani-inner .pill{left:0}[dir=rtl] .hero-ani-inner .pill{right:0}.hero-ani-inner .pill .ava{position:absolute;top:7px;width:26px;height:26px;border-radius:50%;background-size:cover;background-position:50%;border:2px solid #f6f6f6}[dir=ltr] .hero-ani-inner .pill .ava{left:7px}[dir=rtl] .hero-ani-inner .pill .ava{right:7px}.hero-ani-inner .pill .lbl{position:absolute;top:0;height:100%;display:flex;align-items:center;font-size:16px;line-height:1;white-space:nowrap}[dir=ltr] .hero-ani-inner .pill .lbl{left:38px}[dir=rtl] .hero-ani-inner .pill .lbl{right:38px}.hero-ani-inner .pill.cyan{background:#befbff}.hero-ani-inner .pill.cyan .lbl{color:#2ad4e0}.hero-ani-inner .pill.purple{background:#f5e9ff}.hero-ani-inner .pill.purple .lbl{color:#c7a5e4}.hero-ani-inner .pill.gold{background:#ffedd1}.hero-ani-inner .pill.gold .lbl{color:#efc178}.hero-ani-inner .pill.pink{background:#ffeeef}.hero-ani-inner .pill.pink .lbl{color:#f19ca5}.hero-ani-inner .pill.green{background:#e4ffd0}.hero-ani-inner .pill.green .lbl{color:#95d864}.hero-ani-inner .coin{position:absolute;top:0;width:44px;height:44px;border-radius:50%;transform-origin:50% 50%;will-change:transform;opacity:0}[dir=ltr] .hero-ani-inner .coin{left:0}[dir=rtl] .hero-ani-inner .coin{right:0}.hero-ani-inner .coin img{width:100%;height:100%;display:block}.hero-ani-inner .coin .shine{position:absolute;inset:0;border-radius:50%;overflow:hidden;pointer-events:none;opacity:0}.hero-ani-inner .coin .shine:before{content:"";position:absolute;top:-30%;width:46%;height:160%}[dir=ltr] .hero-ani-inner .coin .shine:before{left:0;background:linear-gradient(90deg,transparent,hsla(0,0%,100%,.9) 50%,transparent);transform:rotate(20deg) translateX(-260%)}[dir=rtl] .hero-ani-inner .coin .shine:before{right:0;background:linear-gradient(-90deg,transparent,hsla(0,0%,100%,.9) 50%,transparent);transform:rotate(-20deg) translateX(260%)}.hero-ani-inner .coin.flash .shine{opacity:1}.hero-ani-inner .coin.flash .shine:before{animation:heroAniCoinSweep .85s cubic-bezier(.4,0,.2,1)}@keyframes heroAniCoinSweep{0%{transform:rotate(20deg) translateX(-260%)}to{transform:rotate(20deg) translateX(520%)}}.hero-ani-inner .coin .glint{position:absolute;width:26px;height:26px;opacity:0;pointer-events:none;background:#fff;-webkit-clip-path:polygon(50% 0,57% 43%,100% 50%,57% 57%,50% 100%,43% 57%,0 50%,43% 43%);clip-path:polygon(50% 0,57% 43%,100% 50%,57% 57%,50% 100%,43% 57%,0 50%,43% 43%);filter:drop-shadow(0 0 5px rgba(255,255,255,.95))}[dir=ltr] .hero-ani-inner .coin .glint{transform:translate(-50%,-50%) scale(0)}[dir=rtl] .hero-ani-inner .coin .glint{transform:translate(50%,-50%) scale(0)}.hero-ani-inner .coin .glint.g2{width:15px;height:15px}.hero-ani-inner .coin.flash .glint.g1{animation:heroAniGlint 1s ease-out}.hero-ani-inner .coin.flash .glint.g2{animation:heroAniGlint .8s ease-out .22s}@keyframes heroAniGlint{0%{transform:translate(-50%,-50%) scale(0) rotate(0deg);opacity:0}35%{transform:translate(-50%,-50%) scale(1.1) rotate(40deg);opacity:1}to{transform:translate(-50%,-50%) scale(0) rotate(80deg);opacity:0}}
/*# sourceMappingURL=a879ecfa471694df.css.map*/