.btn{display:inline-flex;align-items:center;width:14rem;height:4.3rem;padding:.4rem 1.25rem .4rem .4rem;outline:none;border:none;font-size:clamp(16px,1.5vw,20px);background:rgba(242,237,230,.75);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);cursor:pointer;margin:1rem 0}.btn,.btn .circle{position:relative;border-radius:4rem;transform:scale(0)}.btn .circle{display:block;margin:0;width:3.5rem;height:3.5rem;background:var(--base-450);font-size:1.5rem;overflow:hidden;transition:width .5s cubic-bezier(.65,0,.076,1)}.btn .icon{left:.4rem;width:3.5rem;height:3.5rem;transform:translateY(-50%);color:var(--base-100);font-size:1.2rem;will-change:transform;display:flex;align-items:center;justify-content:center;z-index:2;pointer-events:none}.btn .button-text,.btn .icon{position:absolute;top:50%;transition:all .5s cubic-bezier(.65,0,.076,1);line-height:1}.btn .button-text{left:50%;transform:translate(-50%,-50%);margin:0 0 0 1.5rem;text-align:center;color:var(--base-500);font-family:var(--font-itc-garamond),sans-serif;font-weight:600;white-space:nowrap}.btn .line{position:relative;transform:translateY(100%);will-change:transform;padding-bottom:.2em;margin-bottom:-.2em}.btn:hover .circle{width:100%}.btn:hover .icon{transform:translateY(-50%) translateX(.3rem)}.btn:hover .button-text{color:var(--base-100)}