.su-vendor-earning-animation{position:relative;isolation:isolate;width:min(100%,40rem);aspect-ratio:1;justify-self:end;margin:0;overflow:hidden;padding:clamp(1rem,2.2vw,1.6rem);border:0;background:var(--su-bg)}
.su-vendor-earning-animation__orb{position:absolute;z-index:0;display:block;border-radius:999px;pointer-events:none}
.su-vendor-earning-animation__orb--top{top:-10rem;right:-7rem;width:20rem;height:20rem;background:var(--su-surface-rose)}
.su-vendor-earning-animation__orb--bottom{bottom:-10rem;left:-8rem;width:15rem;height:15rem;border:2.8rem solid var(--su-trust-soft)}
.su-vendor-earning-animation__card{position:relative;z-index:1;display:flex;height:100%;flex-direction:column;padding:clamp(1.25rem,3vw,2rem);border:1px solid var(--su-rose-border);border-radius:clamp(1.5rem,3vw,2.25rem);background:var(--su-surface);box-shadow:0 1.75rem 4.375rem rgb(43 16 40/.09)}
.su-vendor-earning-animation__top{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.su-vendor-earning-animation__top img{width:clamp(6.75rem,18vw,9.5rem);height:auto}
.su-vendor-earning-animation__top span{padding:.42rem .78rem;border:1px solid var(--su-rose-border);border-radius:999px;background:var(--su-surface-rose);color:var(--su-pink);font-family:var(--su-font-heading);font-size:clamp(.55rem,1vw,.68rem);font-weight:var(--su-weight-strong);letter-spacing:.075em;text-transform:uppercase}
.su-vendor-earning-animation h3{max-width:22rem;margin:clamp(1.25rem,3vw,2rem) 0 clamp(1.5rem,3vw,2.25rem);font-family:var(--su-font-heading);font-size:clamp(1.85rem,4.3vw,3.1rem);font-weight:var(--su-weight-strong);letter-spacing:-.045em;line-height:.98}
.su-vendor-earning-animation__bars{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));align-items:end;gap:clamp(.35rem,1.2vw,.75rem);margin-top:auto}
.su-vendor-earning-animation__bar{display:grid;min-width:0;gap:.55rem;color:var(--su-muted);font-size:clamp(.56rem,1.25vw,.78rem);font-weight:var(--su-weight-strong);line-height:1.15;text-align:center}
.su-vendor-earning-animation__bar:last-child{color:var(--su-pink)}
.su-vendor-earning-animation__track{display:flex;height:clamp(8rem,20vw,13.5rem);align-items:end;overflow:hidden;border:1px solid var(--su-border);border-radius:clamp(.8rem,2vw,1.35rem);background:var(--su-surface-soft)}
.su-vendor-earning-animation__fill{position:relative;display:flex;width:100%;height:var(--su-bar-level);align-items:start;justify-content:center;border-radius:clamp(.75rem,1.8vw,1.2rem) clamp(.75rem,1.8vw,1.2rem) .7rem .7rem;background:color-mix(in srgb,var(--su-pink-light) 22%,var(--su-surface))}
.su-vendor-earning-animation__bar:nth-child(2) .su-vendor-earning-animation__fill{background:color-mix(in srgb,var(--su-pink-light) 32%,var(--su-surface))}
.su-vendor-earning-animation__bar:nth-child(3) .su-vendor-earning-animation__fill{background:color-mix(in srgb,var(--su-pink-light) 58%,var(--su-surface))}
.su-vendor-earning-animation__bar:nth-child(4) .su-vendor-earning-animation__fill{background:var(--su-pink-light)}
.su-vendor-earning-animation__bar:last-child .su-vendor-earning-animation__fill{background:var(--su-pink);box-shadow:0 1rem 2rem rgb(175 41 82/.22)}
.su-vendor-earning-animation__fill strong{position:absolute;top:.48rem;left:50%;padding:clamp(.18rem,.55vw,.33rem) clamp(.22rem,.65vw,.45rem);border:1px solid var(--su-rose-border);border-radius:.65rem;background:var(--su-surface);color:var(--su-plum);font-family:var(--su-font-heading);font-size:clamp(.53rem,1.18vw,.78rem);font-weight:var(--su-weight-strong);letter-spacing:-.035em;line-height:1;white-space:nowrap;transform:translateX(-50%)}
.su-vendor-earning-animation.is-animated .su-vendor-earning-animation__card{animation:su-vendor-card-enter 650ms cubic-bezier(.16,1,.3,1) both}
.su-vendor-earning-animation.is-animated h3{animation:su-vendor-title-enter 620ms cubic-bezier(.16,1,.3,1) 180ms both}
.su-vendor-earning-animation.is-animated .su-vendor-earning-animation__fill{animation:su-vendor-bar-rise 1150ms cubic-bezier(.16,1,.3,1) calc(380ms + var(--su-bar-index)*350ms) both}
.su-vendor-earning-animation.is-animated .su-vendor-earning-animation__fill strong{animation:su-vendor-value-enter 420ms cubic-bezier(.16,1,.3,1) calc(900ms + var(--su-bar-index)*350ms) both}
@keyframes su-vendor-card-enter{from{opacity:0;transform:translateY(1.25rem)}to{opacity:1;transform:translateY(0)}}
@keyframes su-vendor-title-enter{from{opacity:0;transform:translateY(1rem)}to{opacity:1;transform:translateY(0)}}
@keyframes su-vendor-bar-rise{from{height:0}to{height:var(--su-bar-level)}}
@keyframes su-vendor-value-enter{from{opacity:0;transform:translateX(-50%) translateY(.5rem)}to{opacity:1;transform:translateX(-50%) translateY(0)}}
@media (max-width:35rem){.su-vendor-earning-animation{justify-self:center}.su-vendor-earning-animation__card{padding:.9rem}.su-vendor-earning-animation__top span{max-width:7.5rem;padding:.32rem .48rem;text-align:center}.su-vendor-earning-animation h3{margin:1rem 0;font-size:clamp(1.65rem,8vw,2rem)}.su-vendor-earning-animation__bar{gap:.35rem}.su-vendor-earning-animation__track{height:clamp(7.5rem,36vw,9.25rem)}}
@media (prefers-reduced-motion:reduce){.su-vendor-earning-animation.is-animated .su-vendor-earning-animation__card,.su-vendor-earning-animation.is-animated h3,.su-vendor-earning-animation.is-animated .su-vendor-earning-animation__fill,.su-vendor-earning-animation.is-animated .su-vendor-earning-animation__fill strong{animation:none}}