.audio-btn{display:flex;align-items:center;justify-content:center;position:relative;width:60px;height:60px;box-shadow:0 4px 4px rgba(0,0,0,.3);border-radius:50%;text-align:center;text-decoration:none;color:white;transition:all .2s ease;overflow:visible;z-index:1;transform:translateY(0);cursor:default}.audio-btn,.audio-btn:active{background:linear-gradient(to bottom,var(--primary),var(--primary))}.audio-btn:active{transform:none;box-shadow:none}.audio-btn:before{display:block;position:absolute;z-index:-1;width:100%;height:100%;border-radius:50%;background:var(--primary);opacity:0;content:"";animation:none;pointer-events:none;transition:all .2s ease}.audio-btn:hover:active{box-shadow:none}.audio-btn:hover:before{animation:none;opacity:0;transform:scale(1)}.audio-btn.is-clicked{background:linear-gradient(180deg,gray 0,dimgray)}.audio-btn.is-clicked:before{animation:pulse 1.5s infinite;opacity:.5}.audio-btn.blast-animation:before{z-index:9;background:var(--primary);animation:blastOut 1.2s cubic-bezier(.17,.67,.83,.67) forwards!important}@keyframes pulse{0%{transform:scale(1);opacity:.5}to{transform:scale(1.3);opacity:0}}@keyframes blastOut{0%{transform:scale(.9);opacity:.8}20%{opacity:.7}to{transform:scale(20);opacity:0}}.audio-btn-container{position:relative;z-index:10;overflow:visible}.card-hover-effect{transition:all .2s ease;position:relative}.card-hover-effect:active .audio-btn{transform:translateY(3px) scale(.97);box-shadow:0 1px 2px rgba(0,0,0,.4);background:linear-gradient(to bottom,var(--primary),var(--primary))}.card-hover-effect:hover:active .audio-btn{box-shadow:0 0 0 4px var(--primary)/.3,0 1px 3px rgba(0,0,0,.4)}.card-hover-effect.is-recording{background-color:rgba(239,68,68,.05)}