:root{--misco-red:#c72e40;--misco-blue:#579aa9;--medical-blue:#0c5394;--soundscape:#083f21;--text-white:#fff;--text-dark:#212121}.animated-button{align-items:center;border:4px solid transparent;border-radius:100px;box-shadow:0 0 0 2px hsla(0,0%,100%,0);color:var(--text-white);cursor:pointer;display:inline-flex;font-size:16px;font-weight:600;gap:4px;justify-content:center;overflow:hidden;padding:16px 36px;position:relative;text-decoration:none;transition:all .6s cubic-bezier(.23,1,.32,1)}.animated-button.red{background-color:var(--misco-red)}.animated-button.blue{background-color:var(--misco-blue)}.animated-button.medical-blue{background-color:var(--medical-blue)}.animated-button.soundscape{background-color:var(--soundscape)}.animated-button .circle,.animated-button .text,.animated-button svg{text-transform:uppercase;transition:all .8s cubic-bezier(.23,1,.32,1)}.animated-button svg{position:absolute;width:24px;fill:currentColor;z-index:9}.animated-button .arr-1{right:16px}.animated-button .arr-2{left:-25%}.animated-button .circle{background-color:var(--text-white);border-radius:50%;height:20px;left:50%;opacity:0;position:absolute;top:50%;transform:translate(-50%,-50%);width:20px}.animated-button .text{position:relative;transform:translateX(-12px);z-index:1}.animated-button:hover{border-radius:12px;box-shadow:0 0 0 12px transparent;color:var(--text-dark)}.animated-button:hover .arr-1{right:-25%}.animated-button:hover .arr-2{left:16px}.animated-button:hover .text{transform:translateX(12px)}.animated-button:hover .circle{height:600px;opacity:1;width:600px}.animated-button:hover svg{fill:currentColor}.animated-button:active{box-shadow:0 0 0 4px #595959;scale:.95}