.btn{position:relative;display:inline-flex;align-items:center;width:fit-content;min-width:12rem;max-width:100%;height:3.3rem;min-height:3.3rem;padding:.15rem .5rem .15rem .15rem;outline:none;border:none;font-size:.9rem;background:var(--color-primary);backdrop-filter:blur(10px);cursor:pointer;margin:1rem 0;overflow:hidden}.btn,.btn .circle{border-radius:4rem;transform:scale(0)}.btn .circle{position:absolute;inset:.15rem;background:var(--color-brand);clip-path:inset(0 calc(100% - 3rem) 0 0 round 4rem);transition:clip-path .5s cubic-bezier(.65,0,.076,1)}.btn .icon{position:absolute;top:1.65rem;left:.95rem;display:inline-flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;line-height:1;transform:translateY(-50%) translateX(0);font-size:1.5rem;will-change:transform}.btn .button-text,.btn .icon{color:var(--color-brand-foreground);transition:all .5s cubic-bezier(.65,0,.076,1);z-index:1}.btn .button-text{position:relative;margin:0 .75rem 0 3.35rem;text-align:left;font-family:var(--font-heading);line-height:1.1;white-space:normal;text-wrap:balance}.btn .line{position:relative;transform:translateY(100%);will-change:transform;padding-bottom:.2em;margin-bottom:-.2em}.btn:hover .circle{clip-path:inset(0 0 0 0 round 4rem)}.btn:hover .icon{transform:translateY(-50%) translateX(.75rem)}.btn:hover .button-text{color:var(--color-brand-foreground)}@media (max-width:480px){.btn{min-width:10.75rem;max-width:100%;min-height:3.2rem;height:auto}.btn .button-text{margin:0 .6rem 0 3.1rem;font-size:.84rem;line-height:1.15}}