.mx-spr{background-repeat:no-repeat;background-size:600% 400%;background-position:0 0;width:100%;height:100%}.hero__visual--motion{position:relative;display:block;padding:0;aspect-ratio:10/9;background:transparent;overflow:visible}.hero__visual--motion .mx-panel{position:absolute;left:6%;right:2%;top:9%;bottom:8%;border-radius:36px;background:var(--c-panel);transition:transform .4s ease-out}.mx-bt{position:absolute;left:var(--x);top:var(--y);height:var(--h);aspect-ratio:var(--ar);z-index:var(--zi);transition:transform .4s ease-out;text-decoration:none;color:var(--c-ink)}.mx-bt__float{width:100%;height:100%;animation:mxFloat 6s ease-in-out infinite;animation-delay:var(--dl)}.mx-bt__pop{width:100%;height:100%;transition:transform .45s cubic-bezier(.2,.9,.25,1.25)}.mx-bt__glow{position:absolute;left:50%;top:50%;width:120%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,var(--glow) 0%,rgba(247,246,242,0) 68%);opacity:.7;pointer-events:none}.mx-bt__tag{position:absolute;left:50%;bottom:-8px;transform:translate(-50%,8px);white-space:nowrap;background:var(--c-ink);color:var(--c-bg);border-radius:999px;padding:9px 16px;font-size:14px;font-weight:700;opacity:0;transition:opacity .25s,transform .25s;pointer-events:none}.mx-bt:hover{z-index:9;color:var(--c-ink)}.mx-bt:hover .mx-bt__pop,.mx-bt:focus-visible .mx-bt__pop{transform:translateY(-22px) scale(1.1)}.mx-bt:hover .mx-bt__tag,.mx-bt:focus-visible .mx-bt__tag{opacity:1;transform:translate(-50%)}@keyframes mxFloat{0%,to{transform:translateY(0)}50%{transform:translateY(-14px)}}@media(max-width:640px){.hero__visual--motion{aspect-ratio:1/1;border-radius:0}.mx-bt__tag{display:none}}.needs--motion{padding-top:104px;row-gap:124px}.needs--motion .need-card{position:relative;overflow:visible}.need-card__bottle{position:absolute;right:10px;top:-118px;height:156px;aspect-ratio:var(--ar);pointer-events:none;transition:transform .5s cubic-bezier(.2,.9,.25,1.3),filter .5s;filter:drop-shadow(0 14px 16px rgba(0,0,0,.18))}.needs--motion .need-card:hover .need-card__bottle{transform:translateY(-26px) scale(1.12);filter:drop-shadow(0 26px 24px rgba(0,0,0,.28))}.needs--motion .need-card__title{padding-right:24px}@media(prefers-reduced-motion:reduce){.mx-bt__float{animation:none}.mx-bt__pop,.need-card__bottle,.hero__visual--motion .mx-panel,.mx-bt{transition:none}}
/*# sourceMappingURL=/cdn/shop/t/21/assets/medix-motion.css.map */