/* ===== Functional micro-animations (see js/micro.js) ===== */
.btn,.card-quote,.card-share,.bt-btn,.pf-tab,.gal-tab,.qw-submit,.cb-send,.sp-copy,.wa-btn{position:relative;overflow:hidden}
.ripple{position:absolute;border-radius:50%;background:currentColor;opacity:.28;transform:scale(0);pointer-events:none;animation:rippleOut .55s ease-out forwards}
@keyframes rippleOut{to{transform:scale(1);opacity:0}}
.card.product.pop-in{animation:popIn .45s cubic-bezier(.2,.9,.3,1.2) both;animation-delay:calc(var(--pi,0) * 45ms)}
@keyframes popIn{from{opacity:0;transform:translateY(14px) scale(.94)}to{opacity:1;transform:none}}
.shake{animation:shake .4s ease;outline:2px solid #e5484d!important;outline-offset:1px}
@keyframes shake{20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(3px)}}
.tapped svg{animation:tapPulse .5s ease}
@keyframes tapPulse{40%{transform:scale(1.5) rotate(-12deg)}}
.sp-copy.ok{background:#128c5a!important;color:#fff!important;border-color:#128c5a!important}
.stat b,.bt-stat b{font-variant-numeric:tabular-nums}
/* focus: fields glow so the active input is obvious */
.qw-form input:focus,.qw-form textarea:focus,.qw-form select:focus,.cf-form input:focus,.cf-form textarea:focus,.pf-input:focus{box-shadow:0 0 0 3px #c9962e55;transition:box-shadow .2s}
@media(prefers-reduced-motion:reduce){.ripple{display:none}}