/* stile-volto — foglio di stile di RitMo Coach.
   Stava dentro coach.html (blocco «volto-vivo»). */
/* ================= IL VOLTO DELL'ASSISTENTE =================
   La faccia studiata nell'artefatto «Il volto dell'assistente», portata qui
   in piccolo. Solo vetro (il volume 3D e' stato provato e scartato), occhi
   bianchi senza pupille, la spirale del marchio che appare SOLO quando pensa,
   come un caricamento. Tre taglie: 40px sul tasto in alto a destra, 38px nel
   compilatore, 88px nel nucleo della dettatura. Tutto CSS: niente ciclo
   JavaScript, cosi' non pesa nulla. */
.volto-ai{ position:relative; width:var(--vd,44px); height:var(--vd,44px);
  display:block; pointer-events:none; transition:transform .35s ease }
/* IL PALLONCINO. Jacopo: «deve sembrare proprio che svolazza, ma un
   palloncino… non diamogli pulsazione, la grandezza rimane sempre uguale,
   pero' va su e giu'».
   Quindi: NIENTE scala, da nessuna parte. Il movimento e' tutto spostamento —
   un'ellisse stretta e alta, con un dondolio sfasato che arriva un po' dopo.
   E' lo sfasamento a farlo sembrare appeso a un filo invece che spinto su e
   giu' da un pistone. Curva campionata e velocita' LINEARE: agli estremi non
   si ferma (vedi trappole). */
.volto-ai .vv-vola{ position:absolute; inset:0;
  animation:vvSvolazza 5.4s linear infinite }
@keyframes vvSvolazza{
  0%{ transform:translate(0.00%,-7.00%) rotate(-1.02deg) }
  2.08%{ transform:translate(0.25%,-6.94%) rotate(-0.90deg) }
  4.17%{ transform:translate(0.49%,-6.76%) rotate(-0.77deg) }
  6.25%{ transform:translate(0.73%,-6.47%) rotate(-0.63deg) }
  8.33%{ transform:translate(0.95%,-6.06%) rotate(-0.48deg) }
  10.42%{ transform:translate(1.16%,-5.55%) rotate(-0.32deg) }
  12.5%{ transform:translate(1.34%,-4.95%) rotate(-0.15deg) }
  14.58%{ transform:translate(1.51%,-4.26%) rotate(0.02deg) }
  16.67%{ transform:translate(1.65%,-3.50%) rotate(0.19deg) }
  18.75%{ transform:translate(1.76%,-2.68%) rotate(0.36deg) }
  20.83%{ transform:translate(1.84%,-1.81%) rotate(0.52deg) }
  22.92%{ transform:translate(1.88%,-0.91%) rotate(0.67deg) }
  25%{ transform:translate(1.90%,-0.00%) rotate(0.81deg) }
  27.08%{ transform:translate(1.88%,0.91%) rotate(0.93deg) }
  29.17%{ transform:translate(1.84%,1.81%) rotate(1.04deg) }
  31.25%{ transform:translate(1.76%,2.68%) rotate(1.14deg) }
  33.33%{ transform:translate(1.65%,3.50%) rotate(1.21deg) }
  35.42%{ transform:translate(1.51%,4.26%) rotate(1.26deg) }
  37.5%{ transform:translate(1.34%,4.95%) rotate(1.29deg) }
  39.58%{ transform:translate(1.16%,5.55%) rotate(1.30deg) }
  41.67%{ transform:translate(0.95%,6.06%) rotate(1.29deg) }
  43.75%{ transform:translate(0.73%,6.47%) rotate(1.25deg) }
  45.83%{ transform:translate(0.49%,6.76%) rotate(1.19deg) }
  47.92%{ transform:translate(0.25%,6.94%) rotate(1.12deg) }
  50%{ transform:translate(0.00%,7.00%) rotate(1.02deg) }
  52.08%{ transform:translate(-0.25%,6.94%) rotate(0.90deg) }
  54.17%{ transform:translate(-0.49%,6.76%) rotate(0.77deg) }
  56.25%{ transform:translate(-0.73%,6.47%) rotate(0.63deg) }
  58.33%{ transform:translate(-0.95%,6.06%) rotate(0.48deg) }
  60.42%{ transform:translate(-1.16%,5.55%) rotate(0.32deg) }
  62.5%{ transform:translate(-1.34%,4.95%) rotate(0.15deg) }
  64.58%{ transform:translate(-1.51%,4.26%) rotate(-0.02deg) }
  66.67%{ transform:translate(-1.65%,3.50%) rotate(-0.19deg) }
  68.75%{ transform:translate(-1.76%,2.68%) rotate(-0.36deg) }
  70.83%{ transform:translate(-1.84%,1.81%) rotate(-0.52deg) }
  72.92%{ transform:translate(-1.88%,0.91%) rotate(-0.67deg) }
  75%{ transform:translate(-1.90%,0.00%) rotate(-0.81deg) }
  77.08%{ transform:translate(-1.88%,-0.91%) rotate(-0.93deg) }
  79.17%{ transform:translate(-1.84%,-1.81%) rotate(-1.04deg) }
  81.25%{ transform:translate(-1.76%,-2.68%) rotate(-1.14deg) }
  83.33%{ transform:translate(-1.65%,-3.50%) rotate(-1.21deg) }
  85.42%{ transform:translate(-1.51%,-4.26%) rotate(-1.26deg) }
  87.5%{ transform:translate(-1.34%,-4.95%) rotate(-1.29deg) }
  89.58%{ transform:translate(-1.16%,-5.55%) rotate(-1.30deg) }
  91.67%{ transform:translate(-0.95%,-6.06%) rotate(-1.29deg) }
  93.75%{ transform:translate(-0.73%,-6.47%) rotate(-1.25deg) }
  95.83%{ transform:translate(-0.49%,-6.76%) rotate(-1.19deg) }
  97.92%{ transform:translate(-0.25%,-6.94%) rotate(-1.12deg) }
  100%{ transform:translate(-0.00%,-7.00%) rotate(-1.02deg) } }
/* l'alone: fermo di misura, si limita a stare dietro e a scaldare */
/* L'ALONE, ABBASSATO IL 6 SETTEMBRE 2026.
   Era rimasto della vecchia intensita': un disco verde al 34% che usciva del
   24% dalla faccia, acceso allo stesso modo anche quando l'assistente non sta
   facendo niente. Sul tema scuro nuovo — dove il fondo e' neutro e l'accento
   deve stare sotto il 5% dei pixel — quella macchia era la cosa piu' accesa di
   qualunque schermata, in alto a destra, sempre.
   A riposo adesso e' un fiato; quando ascolta, pensa o e' contento torna
   pieno, perche' li' l'alone STA DICENDO qualcosa. */
.volto-ai .vv-alone{ position:absolute; inset:-20%; border-radius:50%;
  background:radial-gradient(circle,
    color-mix(in srgb,var(--accento) 16%,transparent) 0%,
    color-mix(in srgb,var(--accento) 5%,transparent) 45%, transparent 72%);
  opacity:.5; transition:opacity .5s ease, inset .5s ease }
/* il corpo di vetro: la ricetta dell'artefatto, ridotta. Fluttua da solo. */
.volto-ai .vv-corpo{ position:absolute; inset:0; border-radius:50%;
  background:
    linear-gradient(180deg, rgba(255,255,255,.13) 0%, rgba(255,255,255,.04) 36%, rgba(255,255,255,.01) 100%),
    radial-gradient(circle at 50% 96%, color-mix(in srgb,var(--accento) 42%,transparent) 0%, transparent 62%),
    rgba(8,12,9,.6);
  box-shadow:
    inset 0 1px 0 0 rgba(255,255,255,.42),
    inset 0 0 0 1px rgba(255,255,255,.15),
    inset 0 calc(var(--vd,44px)*.11) calc(var(--vd,44px)*.17) calc(var(--vd,44px)*-.1) rgba(0,0,0,.6),
    inset 0 calc(var(--vd,44px)*-.14) calc(var(--vd,44px)*.22) calc(var(--vd,44px)*-.11) color-mix(in srgb,var(--accento) 62%,transparent),
    0 0 calc(var(--vd,44px)*.3) color-mix(in srgb,var(--accento) 14%,transparent) }
/* gli occhi: due ovali bianchi, il battito e — a riposo — lo sguardo che
   ogni tanto va a destra e a sinistra, come uno che si guarda intorno */
.volto-ai .vv-occhi{ position:absolute; left:0; right:0; top:37%; height:26%;
  display:flex; justify-content:center; align-items:center; gap:21%;
  transition:opacity .2s ease, top .3s ease }
.volto-ai .vv-occhio{ width:15%; height:100%; background:#FFF; border-radius:50%;
  box-shadow:0 0 calc(var(--vd,44px)*.1) rgba(255,255,255,.9),
             0 0 calc(var(--vd,44px)*.3) color-mix(in srgb,var(--accento) 75%,transparent);
  transition:width .3s ease, height .3s ease;
  animation:vvBatte 4.9s infinite }
.volto-ai .vv-occhio.dx{ animation-duration:4.9s }
@keyframes vvBatte{ 0%,93.6%,96.8%,100%{ transform:scaleY(1) } 95.2%{ transform:scaleY(.08) } }
/* A RIPOSO SI GUARDA INTORNO — quattro direzioni, tutte evidenti.
   Jacopo: «togliamo l'occhiolino, non mi piace… fagli solo guardare a destra
   e a sinistra, in alto e in basso, che sia bello evidente».
   Quindi niente diagonali e niente faccine: quattro occhiate pulite, una per
   direzione, ognuna con la sua sosta.
   ATTENZIONE ALLE PERCENTUALI, che qui ingannano: in «translate» la X si
   conta sulla LARGHEZZA dell'elemento e la Y sulla sua ALTEZZA. Il nastro
   degli occhi e' largo quanto la faccia ma alto un quarto, quindi un 15%
   verticale faceva un pixel e mezzo mentre lo stesso 15% orizzontale ne
   faceva sei. Misurato: di lato 16 px, su e giu' 3. Per questo l'alto e il
   basso «non si vedevano».
   Adesso i due assi sono pareggiati a mano: 20% di lato e 60% su e giu',
   che su un bollo da quaranta fanno otto pixel e sei.
   Le SOSTE valgono quanto i movimenti: sono loro a far sembrare che stia
   guardando qualcosa invece di scansionare. */
.v-riposo .vv-occhi{ animation:vvGuarda 14s ease-in-out infinite }
/* ...MA SE C'E' UN PUNTATORE, GUARDA QUELLO (6 settembre 2026).
   E' l'unica cosa che il Mo della console fa e questo non faceva. Li' e' un
   pianeta disegnato su tela con ventiduemila granelli; qui la faccia vive fra
   i 34 e i 126 pixel dentro un'app che gira sul telefono, e una tela cosi' su
   un telefono si paga. Quello che rende vivo il personaggio pero' non sono i
   granelli: e' che ti guarda. Quello si porta, e costa due righe.
   Vale solo dove un puntatore c'e' davvero: sul telefono resta l'occhiata
   che gira da sola, che li' e' l'unica possibile. */
@media(hover:hover) and (pointer:fine){
  .volto-ai.vv-segue .vv-occhi{
    animation:none !important;
    transform:translate(var(--vv-sx,0%), var(--vv-sy,0%));
    transition:transform .16s cubic-bezier(.22,.8,.3,1) }
}
@keyframes vvGuarda{
  0%,7%    { transform:translate(0,0) }
  12%,20%  { transform:translate(20%,0) }      /* a destra */
  25%,31%  { transform:translate(0,0) }
  36%,44%  { transform:translate(-20%,0) }     /* a sinistra */
  49%,55%  { transform:translate(0,0) }
  60%,68%  { transform:translate(0,-60%) }     /* in alto */
  73%,79%  { transform:translate(0,0) }
  84%,92%  { transform:translate(0,60%) }      /* in basso */
  97%,100% { transform:translate(0,0) } }

/* ============ LA FACCIA GRANDE: VETRO CON DENTRO LA POLVERE ============
   Sotto una certa misura la faccia resta quella di prima, tutta CSS. Sopra,
   il corpo diventa un guscio vuoto e dentro ci gira la tela dei granelli.
   Due cose che sembrano dettagli e non lo sono:
   · IL GUSCIO STA SU UNO STRATO SUO (::before) e non sul corpo. Il corpo
     contiene la polvere: mettendo il fondo scuro sul corpo, la polvere ci
     finirebbe sotto e non si vedrebbe piu'.
   · LA TELA E' PIU' GRANDE DEL CERCHIO (1,6 volte) e il tondo la ritaglia.
     Serve perche' l'alone della polvere si spenga da solo prima del bordo
     invece di essere tagliato di netto: un bagliore tagliato si legge come
     un errore di disegno. */
.volto-ai.vv-granelli .vv-corpo{ background:none; box-shadow:none }
.volto-ai.vv-granelli .vv-corpo::before{
  content:""; position:absolute; inset:0; border-radius:50%;
  /* la luce che sale da sotto resta, ma piu' bassa: nella faccia vecchia era
     lei a dare volume, qui il volume lo fa la polvere e a 42% le si mangiava
     mezza sfera */
  background:
    radial-gradient(circle at 50% 98%, color-mix(in srgb,var(--accento) 22%,transparent) 0%, transparent 58%),
    rgba(9,10,12,.62);
  box-shadow:
    inset 0 calc(var(--vd,44px)*.11) calc(var(--vd,44px)*.17) calc(var(--vd,44px)*-.1) rgba(0,0,0,.6),
    inset 0 calc(var(--vd,44px)*-.14) calc(var(--vd,44px)*.22) calc(var(--vd,44px)*-.11) color-mix(in srgb,var(--accento) 62%,transparent),
    0 0 calc(var(--vd,44px)*.36) color-mix(in srgb,var(--accento) 26%,transparent) }
.volto-ai.vv-granelli .vv-dentro{ position:absolute; inset:0; border-radius:50%; overflow:hidden }
.volto-ai.vv-granelli canvas.mo-nucleo{
  position:absolute; left:50%; top:50%;
  width:calc(var(--vd,44px)*1.6); height:calc(var(--vd,44px)*1.6);
  transform:translate(-50%,-50%); display:block; pointer-events:none }
/* GLI OCCHI STANNO SOPRA LA POLVERE, MA NON LE DEVONO DARE FUOCO.
   Il primo tentativo ha tenuto l'alone largo della faccia vecchia — li'
   serviva a dare vita a una sfera piatta. Sopra una nuvola accesa quello
   stesso alone allaga il centro: i granelli ci sono e non si vedono, e la
   faccia torna a essere un disco verde con due buchi bianchi. Qui l'alone
   e' stretto e quasi tutto bianco: gli occhi si staccano dalla polvere
   invece di scioglierla. */
.volto-ai.vv-granelli .vv-occhi{ z-index:2 }
.volto-ai.vv-granelli .vv-occhio{
  box-shadow:0 0 calc(var(--vd,44px)*.035) rgba(255,255,255,.95),
             0 0 calc(var(--vd,44px)*.09) color-mix(in srgb,var(--accento) 45%,transparent) }
html.tema-chiaro .volto-ai.vv-granelli .vv-corpo::before{
  background:
    radial-gradient(circle at 50% 96%, color-mix(in srgb,var(--accento) 30%,transparent) 0%, transparent 62%),
    color-mix(in srgb, var(--accento) 10%, #0B0D10);
  box-shadow:
    inset 0 calc(var(--vd,44px)*-.14) calc(var(--vd,44px)*.22) calc(var(--vd,44px)*-.11) color-mix(in srgb,var(--accento) 55%,transparent),
    0 calc(var(--vd,44px)*.05) calc(var(--vd,44px)*.3) color-mix(in srgb,var(--accento) 26%,transparent) }
/* sul tema chiaro gli occhi tornano bianchi: dentro una sfera di polvere
   accesa, due ovali del colore del tema sparirebbero dentro la nuvola */
html.tema-chiaro .volto-ai.vv-granelli .vv-occhio{ background:#FFF }

/* ============ I CERCHI DELLA FACCIA PICCOLA ============
   Jacopo, 6 settembre 2026: «magari gli mettiamo i cerchi che escono tipo
   wifi a quello piccolo». Tre onde sfasate di un terzo, sottili, che escono e
   si spengono prima di arrivare al bordo del suo posto. Sono disegnate col
   bordo di un elemento solo (::before e ::after piu' l'alone) invece che con
   tre nodi in piu': una faccia da quaranta pixel non merita tre elementi.
   Vale solo per le facce PICCOLE — sulla grande i cerchi ci sono gia', ed e'
   il nucleo della dettatura che li disegna. */
.volto-ai:not(.vv-granelli) .vv-vola::before,
.volto-ai:not(.vv-granelli) .vv-vola::after{
  content:""; position:absolute; left:50%; top:50%;
  width:100%; height:100%; margin:-50% 0 0 -50%;
  border-radius:50%; border:1px solid var(--accento);
  opacity:0; pointer-events:none;
  animation:vvWifi 3.4s cubic-bezier(.25,.6,.35,1) infinite }
.volto-ai:not(.vv-granelli) .vv-vola::after{ animation-delay:1.7s }
@keyframes vvWifi{
  0%   { transform:scale(.92); opacity:0 }
  22%  { opacity:.34 }
  100% { transform:scale(1.72); opacity:0 } }
/* quando lavora i cerchi si fanno più fitti, quando pensa spariscono:
   e' la stessa grammatica della faccia grande, in piccolo */
.volto-ai:not(.vv-granelli).v-ascolta .vv-vola::before,
.volto-ai:not(.vv-granelli).v-ascolta .vv-vola::after,
.volto-ai:not(.vv-granelli).v-parla .vv-vola::before,
.volto-ai:not(.vv-granelli).v-parla .vv-vola::after{ animation-duration:2.2s }
.volto-ai:not(.vv-granelli).v-pensa .vv-vola::before,
.volto-ai:not(.vv-granelli).v-pensa .vv-vola::after,
.volto-ai:not(.vv-granelli).v-scheda .vv-vola::before,
.volto-ai:not(.vv-granelli).v-scheda .vv-vola::after{ animation:none; opacity:0 }
@media (prefers-reduced-motion: reduce){
  .volto-ai .vv-vola::before, .volto-ai .vv-vola::after{ animation:none; opacity:0 } }

/* la girella: la spirale del marchio, solo mentre pensa, che gira */
.volto-ai .vv-girella{ position:absolute; inset:-14%; opacity:0; color:#FFF;
  --anelli:transparent; transition:opacity .22s ease;
  filter:drop-shadow(0 0 3px rgba(255,255,255,.85))
         drop-shadow(0 0 9px color-mix(in srgb,var(--accento) 75%,transparent)) }
/* ---- gli stati ---- */
.v-ascolta .vv-occhio{ width:18.5%; height:122% }
.v-ascolta .vv-alone{ inset:-32%; opacity:1;
  background:radial-gradient(circle,
    color-mix(in srgb,var(--accento) 30%,transparent) 0%,
    color-mix(in srgb,var(--accento) 9%,transparent) 45%, transparent 72%) }
.v-legge .vv-occhi{ top:45%; animation:vvLegge 2s ease-in-out infinite }
@keyframes vvLegge{ 0%,100%{ transform:translateX(9%) } 50%{ transform:translateX(-9%) } }
/* PENSA E SCHEDA SONO LA STESSA FACCIA: LA GIRELLA CHE GIRA.
   Jacopo, 27 agosto: «quando ragiona e crea la scheda dovrebbe esserci la
   girella che gira, il logo nostro; e se gli fai domande tecniche dovrebbero
   uscire gli occhialetti che leggono. Controllami bene le espressioni, che
   siano allineate dovunque ci sia IAcopo».
   Aveva ragione e l'errore era grosso: «scheda» faceva l'occhio a banana —
   cioe' l'occhiolino che avevamo tolto dalla chat perche' non gli piaceva —
   ed era rimasto vivo qui, dove lavora di piu'. Quindi nel compilatore la
   faccia strizzava l'occhio mentre scriveva una scheda.
   Adesso preparare una scheda E' pensare: stessa faccia, occhi spenti e
   girella che gira. Una faccia sola per una cosa sola. */
.v-pensa .vv-occhi, .v-scheda .vv-occhi{ opacity:0 }
.v-pensa .vv-girella, .v-scheda .vv-girella{ opacity:.95; animation:vvGira 2.4s linear infinite }
@keyframes vvGira{ to{ transform:rotate(360deg) } }
/* NIENTE OCCHI A BANANA, DA NESSUNA PARTE. Era il sorriso/occhiolino che
   Jacopo aveva bocciato («togliamo l'occhiolino, non mi piace, è orribile»):
   tolto dalla chat ma sopravvissuto in «felice». Ora «felice» non e' una
   smorfia, e' solo un alone piu' caldo per un attimo — la faccia resta
   quella, come quando uno annuisce senza cambiare espressione. */
.v-felice .vv-alone{ inset:-30%; opacity:1;
  background:radial-gradient(circle,
    color-mix(in srgb,var(--accento) 28%,transparent) 0%,
    color-mix(in srgb,var(--accento) 8%,transparent) 45%, transparent 72%) }
/* GLI OCCHIALETTI CHE LEGGONO: occhi stretti che scorrono, per le domande
   tecniche. Uguali in chat e nel compilatore. */
.v-tecnica .vv-occhio{ width:11.5%; height:74% }
.v-tecnica .vv-occhi{ top:43%; animation:vvLegge 1.5s ease-in-out infinite }
/* «non ho capito»: la testa storta e gli occhi un filo piu' piccoli. Prima
   uno era grande e l'altro piccolo, ed era di nuovo un occhiolino travestito
   da perplessita'. La testa storta basta e si legge subito. */
.v-chiede{ transform:rotate(7deg) }
.v-chiede .vv-occhio{ width:13%; height:88% }
/* il parlato: una pulsazione morbida, fluida — niente scatti */
.v-parla .vv-corpo{ animation:vvParla 1.5s ease-in-out infinite }
@keyframes vvParla{ 0%,100%{ transform:translateY(0) scale(1) }
                    50%    { transform:translateY(-1.5%) scale(1.05) } }
.v-parla .vv-alone{ background:radial-gradient(circle,
    color-mix(in srgb,var(--accento) 48%,transparent) 0%,
    color-mix(in srgb,var(--accento) 16%,transparent) 48%, transparent 74%) }
/* sul nucleo la pulsazione del parlato e' quella VERA (il ciclo col
   microfono scala tutto il bollo): la pulsazione disegnata resterebbe
   sopra a litigare, quindi li' si spegne e resta il fluttuare */
#aiNucleo .volto-ai.v-parla .vv-corpo{ animation:none }
/* NEL NUCLEO GRANDE VOLA TUTTA LA SCENA, non la faccia da sola.
   Prima avevo spento il volo qui perché la faccia scappava via dai suoi
   anelli, che restavano indietro. Ma Jacopo lo vuole («proviamo a mettere un
   pochino di fluttuazione anche all'avatar della chat»), e ha ragione: fermo
   sembra spento. La soluzione non era spegnerlo, era spostarlo di un piano —
   vola la SCENA, quindi faccia e anelli salgono insieme e restano incastrati.
   E qui l'ampiezza è la metà: su ottantotto pixel il movimento si legge
   comunque, e di più diventerebbe un dondolio da mal di mare. */
#aiNucleo .volto-ai .vv-vola{ animation:none }
/* sul nucleo l'ampiezza e' la meta': la percentuale si conta sull'elemento,
   e questo e' tre volte piu' grande del bollo in alto a destra — con lo
   stesso 7% qui diventava un dondolio da mal di mare (misurato: 30 px). */
#aiNucleo .asc-scena{ animation:vvSvolazzaPiano 6.2s linear infinite }
@keyframes vvSvolazzaPiano{
  0%{ transform:translate(0.00%,-3.40%) rotate(-0.55deg) }
  2.08%{ transform:translate(0.13%,-3.37%) rotate(-0.49deg) }
  4.17%{ transform:translate(0.26%,-3.28%) rotate(-0.42deg) }
  6.25%{ transform:translate(0.38%,-3.14%) rotate(-0.34deg) }
  8.33%{ transform:translate(0.50%,-2.94%) rotate(-0.26deg) }
  10.42%{ transform:translate(0.61%,-2.70%) rotate(-0.17deg) }
  12.5%{ transform:translate(0.71%,-2.40%) rotate(-0.08deg) }
  14.58%{ transform:translate(0.79%,-2.07%) rotate(0.01deg) }
  16.67%{ transform:translate(0.87%,-1.70%) rotate(0.10deg) }
  18.75%{ transform:translate(0.92%,-1.30%) rotate(0.19deg) }
  20.83%{ transform:translate(0.97%,-0.88%) rotate(0.28deg) }
  22.92%{ transform:translate(0.99%,-0.44%) rotate(0.36deg) }
  25%{ transform:translate(1.00%,-0.00%) rotate(0.44deg) }
  27.08%{ transform:translate(0.99%,0.44%) rotate(0.50deg) }
  29.17%{ transform:translate(0.97%,0.88%) rotate(0.56deg) }
  31.25%{ transform:translate(0.92%,1.30%) rotate(0.61deg) }
  33.33%{ transform:translate(0.87%,1.70%) rotate(0.65deg) }
  35.42%{ transform:translate(0.79%,2.07%) rotate(0.68deg) }
  37.5%{ transform:translate(0.71%,2.40%) rotate(0.70deg) }
  39.58%{ transform:translate(0.61%,2.70%) rotate(0.70deg) }
  41.67%{ transform:translate(0.50%,2.94%) rotate(0.69deg) }
  43.75%{ transform:translate(0.38%,3.14%) rotate(0.67deg) }
  45.83%{ transform:translate(0.26%,3.28%) rotate(0.64deg) }
  47.92%{ transform:translate(0.13%,3.37%) rotate(0.60deg) }
  50%{ transform:translate(0.00%,3.40%) rotate(0.55deg) }
  52.08%{ transform:translate(-0.13%,3.37%) rotate(0.49deg) }
  54.17%{ transform:translate(-0.26%,3.28%) rotate(0.42deg) }
  56.25%{ transform:translate(-0.38%,3.14%) rotate(0.34deg) }
  58.33%{ transform:translate(-0.50%,2.94%) rotate(0.26deg) }
  60.42%{ transform:translate(-0.61%,2.70%) rotate(0.17deg) }
  62.5%{ transform:translate(-0.71%,2.40%) rotate(0.08deg) }
  64.58%{ transform:translate(-0.79%,2.07%) rotate(-0.01deg) }
  66.67%{ transform:translate(-0.87%,1.70%) rotate(-0.10deg) }
  68.75%{ transform:translate(-0.92%,1.30%) rotate(-0.19deg) }
  70.83%{ transform:translate(-0.97%,0.88%) rotate(-0.28deg) }
  72.92%{ transform:translate(-0.99%,0.44%) rotate(-0.36deg) }
  75%{ transform:translate(-1.00%,0.00%) rotate(-0.44deg) }
  77.08%{ transform:translate(-0.99%,-0.44%) rotate(-0.50deg) }
  79.17%{ transform:translate(-0.97%,-0.88%) rotate(-0.56deg) }
  81.25%{ transform:translate(-0.92%,-1.30%) rotate(-0.61deg) }
  83.33%{ transform:translate(-0.87%,-1.70%) rotate(-0.65deg) }
  85.42%{ transform:translate(-0.79%,-2.07%) rotate(-0.68deg) }
  87.5%{ transform:translate(-0.71%,-2.40%) rotate(-0.70deg) }
  89.58%{ transform:translate(-0.61%,-2.70%) rotate(-0.70deg) }
  91.67%{ transform:translate(-0.50%,-2.94%) rotate(-0.69deg) }
  93.75%{ transform:translate(-0.38%,-3.14%) rotate(-0.67deg) }
  95.83%{ transform:translate(-0.26%,-3.28%) rotate(-0.64deg) }
  97.92%{ transform:translate(-0.13%,-3.37%) rotate(-0.60deg) }
  100%{ transform:translate(-0.00%,-3.40%) rotate(-0.55deg) } }
@media (prefers-reduced-motion: reduce){ #aiNucleo .asc-scena{ animation:none } }
/* ---- il volto nei suoi tre posti: si spengono le vecchie animazioni ---- */
/* le vecchie regole «svg dentro il tasto» erano per la spirale diretta:
   alla girella del volto non devono toccare ne' misura ne' animazione */
.ph .tasto-ai svg{ animation:none }
.ph .tasto-ai svg.vv-girella, .bdet-ic svg.vv-girella{
  width:auto; height:auto; animation:none;
  filter:drop-shadow(0 0 3px rgba(255,255,255,.85))
         drop-shadow(0 0 9px color-mix(in srgb,var(--accento) 75%,transparent)) }
.ph .tasto-ai .v-pensa svg.vv-girella, .bdet-ic .v-pensa svg.vv-girella,
.ph .tasto-ai .v-scheda svg.vv-girella, .bdet-ic .v-scheda svg.vv-girella,
.v-pensa svg.vv-girella, .v-scheda svg.vv-girella{ animation:vvGira 2.4s linear infinite }
#aiPanel.dettando #aiNucleo .asc-segno{ animation:none }
body.ai-pensa #aiNucleo .asc-segno,
body.ai-pensa #aiNucleo .asc-segno svg{ animation:none }
/* ---- IL VOLTO NEL TEMA CHIARO: SI INVERTE, NON SI OSCURA ----
   Prima qui c'era scritto «il vetro vuole il buio dietro, anche col tema
   chiaro», e si forzava un tondo nero dietro la faccia. Sbagliato, e Jacopo
   l'ha visto subito (27 agosto): «l'avatar non cambia colore, dovrebbe
   invertirsi». Su una pagina bianca quel tondo nero era l'unica macchia scura
   dello schermo — pesava piu' del logo — e per giunta diceva il contrario di
   quello che dice il tema.
   L'inversione giusta e' quella che ha proposto lui: corpo quasi bianco con un
   velo verde, e gli OCCHI verdi invece che bianchi. Il verde non sparisce, si
   sposta: prima era il bagliore, adesso e' lo sguardo. */
/* NIENTE PIATTO DIETRO. Jacopo, 27 agosto: «c'è un cerchio sotto bianco che
   non dovrebbe esserci». Aveva ragione ed era colpa mia: il tasto sotto la
   faccia ha un fondo tondo suo, che nel tema scuro era nero come la pagina e
   quindi invisibile. Schiarendolo diventava un secondo cerchio — e siccome la
   faccia fluttua su e giù, spuntava da sotto a ogni oscillazione, come se
   fossero due palle sovrapposte. Nel tema chiaro il piatto non serve: il corpo
   di vetro ha già il suo fondo. Si toglie, e resta una faccia sola. */
html.tema-chiaro .ph .tasto-ai,
html.tema-chiaro #aiNucleo .asc-segno,
html.tema-chiaro .bdet-ic{ background:transparent; box-shadow:none }
html.tema-chiaro .volto-ai .vv-corpo{
  background:
    linear-gradient(180deg, rgba(255,255,255,.94) 0%, rgba(255,255,255,.60) 40%, rgba(255,255,255,.22) 100%),
    radial-gradient(circle at 50% 99%, color-mix(in srgb,var(--accento) 88%,transparent) 0%,
                    color-mix(in srgb,var(--accento) 34%,transparent) 46%, transparent 72%),
    color-mix(in srgb, var(--accento) 13%, #FFFFFF);
  box-shadow:
    inset 0 1px 0 0 rgba(255,255,255,.95),
    inset 0 0 0 1px color-mix(in srgb,var(--accento) 34%,transparent),
    inset 0 calc(var(--vd,44px)*.11) calc(var(--vd,44px)*.17) calc(var(--vd,44px)*-.1) rgba(255,255,255,.8),
    inset 0 calc(var(--vd,44px)*-.16) calc(var(--vd,44px)*.26) calc(var(--vd,44px)*-.10) color-mix(in srgb,var(--accento) 70%,transparent),
    0 calc(var(--vd,44px)*.05) calc(var(--vd,44px)*.34) color-mix(in srgb,var(--accento) 34%,transparent) }
/* gli occhi: verdi pieni, con un alone verde al posto di quello bianco */
html.tema-chiaro .volto-ai .vv-occhio{
  background:var(--accento);
  box-shadow:0 0 calc(var(--vd,44px)*.07) color-mix(in srgb,var(--accento) 55%,transparent) }
html.tema-chiaro .volto-ai .vv-alone{ opacity:.55 }
/* la girella aveva un bagliore bianco, invisibile sul bianco */
html.tema-chiaro .ph .tasto-ai svg.vv-girella,
html.tema-chiaro .bdet-ic svg.vv-girella{
  filter:drop-shadow(0 0 calc(var(--vd,44px)*.09) color-mix(in srgb,var(--accento) 55%,transparent)) }
/* la spirale nel bollo del marchio, in alto a sinistra */
/* sostituita piu' su: il segno nostro esce dalla scatola e prende il colore
   del tema. Qui resta solo la misura di sicurezza per i browser che non
   conoscono :has(). */
.ph .mt-seg .mt-spira{ display:block }

/* ============ 7 SETTEMBRE 2026, SERA — I RITOCCHI DECISI SUL BANCO «Mo, da quello di adesso» ============
   Il volto resta questo. Cambiano:
   · GLI OCCHI: più luminosi, e il bordo dell'ovale sfuma nel bagliore invece di
     stare su un cerchio netto (Jacopo: «così che sfumino il cerchio che
     racchiude l'occhio»).
   · LA MISURA GRANDE: 100 pixel, non 168 («100 grandezza massima Mo»). E
     NIENTE POLVERE: «niente gas», poi «usiamo quello com'è adesso» guardando la
     faccia CSS a tutte le misure. Il motore MoNucleo resta in pagina ma
     nessuna faccia lo aggancia.
   · LO SGUARDO È UNA POSIZIONE, NON UN'ANIMAZIONE. Prima «si guarda intorno»
     era un'animazione a fotogrammi, e ogni cambio di stato la spegneva di
     colpo: gli occhi SALTAVANO al centro. Adesso sono due variabili (--gx,
     --gy) con una transizione; il copione le cambia ogni tanto, gli stati le
     fissano. Qualunque passaggio è una transizione, mai un salto.
   · MENTRE SCRIVI («legge») guarda GIÙ, fermo — non scorre più a destra e a
     sinistra: fermo sulla casella sembra che legga te.
   · LE ONDE: quattro, continue, sfasate di un quarto; ognuna sfuma mentre si
     allarga e sparisce prima di fermarsi. A passo doppio mentre carica. Ferme
     mentre dorme. I due cerchi «wifi» di prima si spengono.
   · IL CARICAMENTO: la girella grande sopra il volto e la spirale negli occhi
     sono bocciate. Spunta una RONDELLA in alto a destra, vicino alla testa,
     fatta come il «?», e lui la guarda CONCENTRATO: occhi stretti, un po' più
     vicini, inclinati verso il centro (l'angolo interno scende, come chi
     aggrotta), testa appena piegata, sguardo puntato e quasi fermo.
   · «NON CAPISCE»: un occhio grande, uno piccolo, e il «?» in alto a destra.
     Niente più testa storta.
   · IL TASTO IN ALTO A DESTRA, PER I FATTI SUOI (quando l'assistente è chiuso
     e non sta facendo niente): si guarda intorno, una volta su due gli cala
     la palpebra e sonnecchia, si sveglia di soprassalto, resta un po'
     spaesato e si calma da solo. Il copione sta nel motore del volto, sotto.
   Gli stessi numeri stanno nel banco, artefatto «Mo, da quello di adesso». */
html:not(.tema-chiaro) .volto-ai .vv-occhio{
  background:radial-gradient(closest-side, #FFF 0%, #FFF 58%, rgba(255,255,255,.92) 78%, rgba(255,255,255,.55) 100%);
  box-shadow:0 0 calc(var(--vd,44px)*.045) rgba(255,255,255,1),
             0 0 calc(var(--vd,44px)*.11) rgba(255,255,255,.70),
             0 0 calc(var(--vd,44px)*.30) color-mix(in srgb,var(--accento) 80%,transparent),
             0 0 calc(var(--vd,44px)*.50) color-mix(in srgb,var(--accento) 28%,transparent) }
.volto-ai .vv-occhio{ transition:width .3s ease, height .3s ease, rotate .35s ease }
/* lo sguardo: una posizione con transizione */
.volto-ai .vv-occhi{ animation:none !important;
  transform:translate(var(--gx,0%), var(--gy,0%));
  transition:transform var(--gt,.9s) cubic-bezier(.22,.8,.3,1), top var(--gt,.9s) ease, opacity .3s ease }
/* mentre scrivi: giù, fermo */
.v-legge .vv-occhio{ height:88%; width:14.5% }
.v-legge .vv-occhi{ top:39%; --gx:0%; --gy:60%; --gt:.45s }
/* il sonno del tasto */
.v-cala .vv-occhio{ height:42%; transition-duration:1.5s }
.v-cala .vv-occhi{ top:41%; --gx:6%; --gy:26%; --gt:1.5s }
.v-cala .vv-alone{ opacity:.35 }
.v-dorme .vv-occhio{ height:10%; transition-duration:1.6s; animation:vvRespira 3.8s ease-in-out infinite }
.v-dorme .vv-occhi{ top:44%; --gx:0%; --gy:18%; --gt:1.6s }
.v-dorme .vv-alone{ opacity:.15 }
.v-dorme .vv-corpo{ filter:brightness(.82) }
@keyframes vvRespira{ 0%,100%{ transform:scaleY(1) } 50%{ transform:scaleY(1.6) } }
.v-sveglia .vv-occhio{ width:18%; height:138%; transition-duration:.28s; transition-timing-function:cubic-bezier(.2,.9,.3,1) }
.v-sveglia .vv-occhi{ top:35%; --gx:0%; --gy:-10%; --gt:.28s }
.v-sveglia .vv-alone{ opacity:1; inset:-32%; transition-duration:.35s }
.v-spaesato .vv-occhio{ width:16.5%; height:112% }
.v-riposo .vv-occhio{ transition-duration:1.4s }
.v-riposo .vv-alone{ transition-duration:1.6s }
.volto-ai .vv-alone{ transition:opacity 1.1s ease, inset .8s ease }
.volto-ai .vv-corpo{ transition:filter 1.4s ease }
/* le onde: quattro, continue, che sfumano */
/* (il «:not(.vv-granelli)» serve a vincere sulle regole dei cerchi di prima,
   che hanno quella specificità: senza, i cerchi restavano accesi) */
.volto-ai:not(.vv-granelli) .vv-vola::before, .volto-ai:not(.vv-granelli) .vv-vola::after,
.volto-ai .vv-vola::before, .volto-ai .vv-vola::after{ animation:none !important; opacity:0 }
.volto-ai .vv-onda{ position:absolute; left:50%; top:50%;
  width:100%; height:100%; margin:-50% 0 0 -50%; border-radius:50%;
  border:1px solid var(--accento); opacity:0; pointer-events:none;
  animation:vvOnda var(--giro,4.4s) linear infinite }
.volto-ai .vv-onda.o2{ animation-delay:calc(var(--giro,4.4s)*-.25) }
.volto-ai .vv-onda.o3{ animation-delay:calc(var(--giro,4.4s)*-.50) }
.volto-ai .vv-onda.o4{ animation-delay:calc(var(--giro,4.4s)*-.75) }
@keyframes vvOnda{
  0%   { transform:scale(.94); opacity:0 }
  10%  { opacity:.36 }
  55%  { opacity:.16 }
  100% { transform:scale(1.78); opacity:0 } }
.v-dorme .vv-onda, .v-cala .vv-onda{ animation-play-state:paused; opacity:0; transition:opacity 1.2s ease }
.v-pensa .vv-onda, .v-scheda .vv-onda, .v-tecnica .vv-onda{ --giro:2.2s }
/* il caricamento: la rondella, e lui la guarda concentrato. «Scheda» e
   «tecnica» sono due modi di caricare: stessa faccia. */
.volto-ai .vv-rondella{ position:absolute; right:-24%; top:-20%;
  width:30%; height:30%; border-radius:50%; box-sizing:border-box; display:block;
  border-style:solid; border-width:calc(var(--vd,44px)*.04);
  border-color:color-mix(in srgb,var(--accento) 22%,transparent);
  border-top-color:var(--accento); border-right-color:var(--accento);
  filter:drop-shadow(0 0 calc(var(--vd,44px)*.06) color-mix(in srgb,var(--accento) 60%,transparent));
  opacity:0; transform:translateY(20%) scale(.7); pointer-events:none;
  transition:opacity .28s ease, transform .32s cubic-bezier(.2,.9,.3,1) }
.v-pensa .vv-rondella, .v-scheda .vv-rondella, .v-tecnica .vv-rondella{ opacity:1; transform:none; animation:vvGira .9s linear infinite }
.v-pensa .vv-occhi, .v-scheda .vv-occhi, .v-tecnica .vv-occhi{ opacity:1; top:37%; gap:17%; --gx:14%; --gy:-36%; --gt:.4s }
.v-pensa .vv-girella, .v-scheda .vv-girella, .v-tecnica .vv-girella{ opacity:0; animation:none }
.volto-ai.v-pensa, .volto-ai.v-scheda, .volto-ai.v-tecnica{ transform:rotate(4deg) translate(1.5%,-1.5%); transition:transform .5s cubic-bezier(.2,.9,.3,1) }
/* larghi e bassi, non tondi: un tondo inclinato resta un tondo, e a 100
   pixel gli occhi «concentrati» sembravano due puntini (visto in foto) */
.v-pensa .vv-occhio, .v-scheda .vv-occhio, .v-tecnica .vv-occhio{ width:21%; height:50% }
.v-pensa .vv-occhio.sx, .v-scheda .vv-occhio.sx, .v-tecnica .vv-occhio.sx{ rotate:-14deg }
.v-pensa .vv-occhio.dx, .v-scheda .vv-occhio.dx, .v-tecnica .vv-occhio.dx{ rotate:14deg }
/* «non capisce»: un occhio grande, uno piccolo, il «?» */
.volto-ai.v-chiede{ transform:none }
.v-chiede .vv-occhio.sx{ width:18.5%; height:124% }
.v-chiede .vv-occhio.dx{ width:11.5%; height:66% }
.v-chiede .vv-occhi{ --gx:9%; --gy:-26%; --gt:.4s }
.volto-ai .vv-domanda{ position:absolute; right:-26%; top:-22%;
  font-family:var(--f-display,'Archivo',system-ui,sans-serif); font-weight:700; font-style:normal;
  font-size:calc(var(--vd,44px)*.34); line-height:1; color:var(--accento);
  text-shadow:0 0 calc(var(--vd,44px)*.08) color-mix(in srgb,var(--accento) 60%,transparent);
  opacity:0; transform:translateY(20%) scale(.7); pointer-events:none;
  transition:opacity .28s ease, transform .32s cubic-bezier(.2,.9,.3,1) }
.v-chiede .vv-domanda{ opacity:1; transform:translateY(0) scale(1) }
@media (prefers-reduced-motion: reduce){
  .volto-ai *, .volto-ai{ animation:none !important } }

/* UNA FASCIA DI ONDE SOLA (Jacopo, 24 settembre 2026 sera: «i cerchi intorno
   a Mo sono troppi, due fasce di onde sovrapposte quando sono dentro la chat»).
   Nella chat giravano due sistemi insieme: le cinque onde del vecchio nucleo
   (mosse dal codice, che mentre pensa corrono VERSO il centro) e le quattro
   onde della faccia (che escono). Col caricamento andavano in versi opposti,
   ed era quello che sembrava rotto. Adesso vale la regola del 7 settembre:
   quattro onde, quelle della faccia, a passo doppio mentre carica con la
   rondella. Le onde del nucleo restano solo mentre si detta, perche' sono
   le uniche che seguono la voce — e allora si spengono quelle della faccia. */
#aiNucleo .asc-onda, #aiNucleo .asc-pensiero{ display:none }
#aiPanel.dettando #aiNucleo .asc-onda{ display:block }
#aiPanel.dettando #aiNucleo .volto-ai .vv-onda{ opacity:0 !important; animation-play-state:paused }