/* CRM demo: micro-animazioni di dettaglio (spec 24l, catalogo canale/grafica/micro-animazioni/CATALOGO.md, decisioni di regia).
   Regole: solo transform / opacity / filter (e, su pochi elementi minuscoli, colore e stroke); mai layout.
   Ogni stato di passaggio sta dentro (hover:hover) and (pointer:fine); riduci movimento = nessun movimento.
   Interruttore globale: classe html.mi-off (la mette crm-micro.js, ?micro=0 o CRMMicro.attiva(false)).
   Colori solo dai token del CRM (--acc --on-acc --err --warn --ok --g-fill --g-line --mu --tx --sink --hi --sh0). */
:root{
  --mi-out:cubic-bezier(.23,1,.32,1);
  --mi-io:cubic-bezier(.77,0,.175,1);
  --mi-molla:cubic-bezier(.34,1.56,.64,1);
}
/* testo per gli screen reader mentre le cifre rullano */
.mi-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
#mi-live{position:fixed;left:0;top:0;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

/* ---------- 1. premi: pulsanti ---------- */
html:not(.mi-off) .btn{transition:transform .12s ease-out,box-shadow .15s ease,border-color .15s ease,background-color .15s ease}
html:not(.mi-off) .btn:active:not(.mi-ic){transform:scale(.97);transition-duration:.09s;transition-timing-function:var(--mi-out)}
@media (hover:hover) and (pointer:fine){
  html:not(.mi-off) .btn:not(.mi-ic):not(:has(> svg:only-child)):hover{transform:translateY(-1px) scale(1.02);box-shadow:0 5px 14px color-mix(in srgb,var(--sh0,#000) var(--mi-sa,34%),transparent)}
  html:not(.mi-off) .btn:not(.mi-ic):not(:has(> svg:only-child)):active{transform:scale(.97);box-shadow:0 1px 3px color-mix(in srgb,var(--sh0,#000) var(--mi-sb,30%),transparent)}
  /* icone dentro i pulsanti: la freccia avanza di 2 px, WhatsApp oscilla una volta */
  html:not(.mi-off) .btn svg.i{transition:translate .16s var(--mi-out)}
  html:not(.mi-off) .btn:hover svg.i:last-child:not(:first-child){translate:2px 0}
  html:not(.mi-off) a.btn.wa:hover svg.i{animation:mi-wa .36s ease-in-out 1}
}
@keyframes mi-wa{0%,100%{rotate:0deg}25%{rotate:-6deg}60%{rotate:6deg}}
/* pulsanti piccoli senza testo e righe di elenco: niente scala, solo colore */
html:not(.mi-off) .btn.mi-ic:active,html:not(.mi-off) .btn:has(> svg:only-child):active{transform:none}

/* ---------- 2. pillola scorrevole nei tab e nei filtri ---------- */
.mi-pg{position:relative}
.mi-pill{position:absolute;left:0;top:0;pointer-events:none;z-index:0;transform-origin:0 0;box-sizing:border-box}
.mi-trav > *:not(.mi-pill){position:relative;z-index:1}
.mi-trav > [aria-pressed=true]{background:transparent!important;border-color:transparent!important;box-shadow:none!important}

/* ---------- 3. odometro ---------- */
.mi-d{position:relative;display:inline-block;overflow:clip}
.mi-g{visibility:hidden}
.mi-s{position:absolute;left:0;top:0;width:100%;display:block;will-change:transform}
.mi-s > span{display:block;text-align:center}
.kpi .n,.kpis .n,.pv-n,.cv1-v,.cv-n,.o-n,.bz-big,.bf-n,b.num,.big.num,.an-c3 b,.an-sv b{font-variant-numeric:tabular-nums}

/* ---------- 4. anello ---------- */
html:not(.mi-off) .op-pt{transition:transform .15s var(--mi-out);transform-origin:50% 50%}
@media (hover:hover) and (pointer:fine){html:not(.mi-off) .op-pt:hover{transform:scale(1.06)}}

/* ---------- 5. interruttore: il pallino scivola con transform (non con left) ---------- */
html:not(.mi-off) .tog{transition:background-color .16s ease,transform .12s ease-out}
html:not(.mi-off) .tog i{left:3px;transition:none;will-change:auto}
html:not(.mi-off) .tog[aria-checked=true] i{left:3px;transform:translateX(19px)}
html:not(.mi-off) .tog:active{transform:scale(.96)}

/* ---------- 6. spunta ---------- */
.mi-ck{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;fill:none;stroke:var(--on-acc,#fff);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.bx{position:relative}
.mi-ln{position:absolute;height:1.5px;background:currentColor;transform-origin:0 50%;pointer-events:none}
.mi-rel{position:relative}
.mi-st0{text-decoration-color:transparent!important}
.mi-salvato{display:inline-flex;align-items:center;gap:6px}
.mi-salvato svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}

/* ---------- 7. card: hover, premuto, badge ---------- */
html:not(.mi-off) article.card.op,html:not(.mi-off) article.pcard,html:not(.mi-off) article.pv,html:not(.mi-off) button.pt-cat,html:not(.mi-off) article.mk-s,html:not(.mi-off) article.an-cd,html:not(.mi-off) .an-ag,html:not(.mi-off) a.kpi,html:not(.mi-off) .cc,html:not(.mi-off) .cv1-cd{transition:transform .16s var(--mi-out),border-color .16s ease,box-shadow .16s ease}
html:not(.mi-off) article.card.op:active,html:not(.mi-off) article.pcard:active,html:not(.mi-off) article.pv:active,html:not(.mi-off) button.pt-cat:active,html:not(.mi-off) article.mk-s:active,html:not(.mi-off) a.kpi:active,html:not(.mi-off) .cc:active,html:not(.mi-off) .cv1-cd:active{transform:scale(.985);transition-duration:.12s}
@media (hover:hover) and (pointer:fine){
  html:not(.mi-off) article.card.op:hover,html:not(.mi-off) article.pcard:hover,html:not(.mi-off) article.pv:hover,html:not(.mi-off) button.pt-cat:hover,html:not(.mi-off) article.mk-s:hover,html:not(.mi-off) article.an-cd:hover,html:not(.mi-off) .an-ag:hover,html:not(.mi-off) a.kpi:hover,html:not(.mi-off) .cc:hover,html:not(.mi-off) .cv1-cd:hover{transform:translateY(-2px);border-color:var(--acc2,var(--acc))}
  html:not(.mi-off) button.pt-cat:hover svg.i{transform:scale(1.08)}
}
html:not(.mi-off) button.pt-cat svg.i{transition:transform .16s var(--mi-out)}
html:not(.mi-off) .cc:active,html:not(.mi-off) .cv1-cd:active{transform:scale(.985)}
html:not(.mi-off) article.card.op:active:hover,html:not(.mi-off) article.pv:active:hover{transform:scale(.985)}

/* ---------- 8. barre ---------- */
.o-tr > i,.livb > i,.an-bar{transform-origin:0 50%}
svg.bz-bar rect{transform-box:fill-box;transform-origin:0 50%}

/* ---------- 9. stelle (Partner) ---------- */
.pt-st > span{position:relative;display:inline-block;transition:opacity .12s ease}
.pt-st > span::after{content:"\2605";position:absolute;left:0;top:0;opacity:0;transition:opacity .12s ease}
.pt-st.mi-pv > span.mi-lit::after{opacity:1;transition-delay:calc(var(--i,0) * 30ms)}
.pt-st.mi-pv > span:not(.mi-lit){opacity:.35;transition-delay:calc(var(--i,0) * 30ms)}

/* ---------- 10. pin ---------- */
svg.op-mp .op-pin circle,svg.op-mp .op-pin{transform-box:fill-box;transform-origin:50% 50%}
.mi-ping{fill:none;stroke:var(--acc);stroke-width:.7;transform-box:fill-box;transform-origin:50% 50%;pointer-events:none}

/* ---------- grafici: hover su barre e funnel ---------- */
@media (hover:hover) and (pointer:fine){
  html:not(.mi-off) .cash .in,html:not(.mi-off) .cash .out,html:not(.mi-off) .an-bar{transition:scale .14s var(--mi-out),opacity .14s ease}
  html:not(.mi-off) .cash .d:hover .in,html:not(.mi-off) .cash .d:hover .out{scale:1 1.03}
  html:not(.mi-off) .cash:has(.d:hover) .d:not(:hover) .in,html:not(.mi-off) .cash:has(.d:hover) .d:not(:hover) .out{opacity:.65}
  html:not(.mi-off) .an-st:hover .an-bar{scale:1.03 1}
}

/* ---------- avvisi: finestre aperte con il mouse (non da tastiera) e toast ---------- */
html:not(.mi-off):not(.mi-kb) .ov .box{animation:mi-box .16s var(--mi-out) both}
@keyframes mi-box{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:none}}
html:not(.mi-off) .toast{transition:opacity .2s var(--mi-out),transform .2s var(--mi-out),visibility 0s linear .2s}

/* ---------- riduci movimento e interruttore globale: niente movimento ---------- */
@media (prefers-reduced-motion:reduce){
  .btn,.btn:hover,.btn:active,.tog,.tog i,.op-pt,.op-pt:hover,article.card.op,article.pv,button.pt-cat,.cc,.cv1-cd,a.kpi{transition:none!important}
  .btn:hover,.btn:active,.op-pt:hover,article.card.op:hover,article.pv:hover,button.pt-cat:hover,.cc:hover,.cv1-cd:hover,a.kpi:hover,.tog:active{transform:none!important}
  .btn:hover{box-shadow:none}
  .btn:hover svg.i,a.btn.wa:hover svg.i{translate:none;animation:none}
  .ov .box{animation:none!important}
  .pt-st > span,.pt-st > span::after{transition:none}
}
html.mi-off .tog i{transition:left .15s}