/* Mix Salient SVG Buttons */

.mix-svg-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  position:relative;
  box-sizing:border-box;
  text-decoration:none;
  border:0;
  cursor:pointer;
  user-select:none;
  outline:0;
  background-color:transparent;
  background-image:var(--mix-bg-url);
  background-repeat:no-repeat;
  background-position:center;
  background-size:var(--mix-bg-fit, contain);
  line-height:1;
}

.mix-svg-btn:focus-visible{outline:2px solid currentColor;outline-offset:3px;}

/* Hover animations */
.mix-anim-hover-grow:hover{transform:scale(1.04);} 
.mix-anim-hover-lift:hover{transform:translateY(-3px);} 
.mix-anim-hover-glow:hover{filter:drop-shadow(0 10px 18px rgba(0,0,0,.18)) drop-shadow(0 0 18px var(--mix-glow-color, rgba(255,255,255,.35)));}
.mix-anim-hover-shine::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(120deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.25) 18%, rgba(255,255,255,0) 36%);transform:translateX(-120%);transition:transform .5s ease;pointer-events:none;}
.mix-anim-hover-shine:hover::after{transform:translateX(120%);} 

/* Click animations */
@keyframes mix-pulse{0%{transform:scale(1);}50%{transform:scale(0.96);}100%{transform:scale(1);}}
@keyframes mix-bounce{0%{transform:translateY(0);}30%{transform:translateY(-4px);}60%{transform:translateY(0);}100%{transform:translateY(-2px);}}

.mix-anim-click-pulse:active{animation:mix-pulse .22s ease-in-out;}
.mix-anim-click-bounce:active{animation:mix-bounce .28s ease-in-out;}

/* Smoothness */
.mix-svg-btn{transition:transform .18s ease, filter .18s ease;}

/* Diagonal hover (uses CSS vars set inline) */
.mix-anim-hover-diag:hover{transform:translate(var(--mix-hover-x,0), var(--mix-hover-y,0)) scale(var(--mix-hover-scale,1));}

.mix-svg-btn__text{display:block;width:100%;text-align:center;pointer-events:none;}