/* Animazioni della mascotte LinePilot — pilotate da #avatar[data-state="..."]
   (stati cambiati da js/mascot.js, MascotAnimator). Estratte dalla chat UI. */

#avatar { width: 100%; pointer-events: none; --mascot-blue: #38bdf8; --mascot-green: #4ade80; }
#avatar:empty { display: none; }
/* NIENTE filter sul root: un filtro (drop-shadow) forza la rasterizzazione
   dell'intero SVG in texture e sfoca occhi e contorni. */
#avatar svg { width: 100%; height: auto; display: block; }
#avatar #leftEye, #avatar #rightEye {
  transform-box: fill-box; transform-origin: center; transition: fill 0.25s;
}
#avatar #trace1, #avatar #trace2, #avatar #trace3 { transform-box: fill-box; }

/* Float "hovering": traslazione pura (nessuno scaling -> occhi nitidi). */
@keyframes av-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
#avatar[data-state="idle"] { animation: av-float 4s ease-in-out infinite; }
#avatar[data-state="listening"] { animation: av-float 2.2s ease-in-out infinite; }

/* Blink pilotato da JS (classe .blink, timer casuale in MascotAnimator). */
#avatar.blink #leftEye,
#avatar.blink #rightEye { animation: av-blink-once 0.18s ease-in-out; }

/* listening: occhi che pulsano lentamente */
#avatar[data-state="listening"] #leftEye,
#avatar[data-state="listening"] #rightEye { animation: av-listen 2s ease-in-out infinite; }

/* thinking: occhi dx/sx + onda ambra sui circuiti */
#avatar[data-state="thinking"] #leftEye,
#avatar[data-state="thinking"] #rightEye { animation: av-think 1.2s ease-in-out infinite; }
#avatar[data-state="thinking"] #trace1,
#avatar[data-state="thinking"] #trace2,
#avatar[data-state="thinking"] #trace3 { animation: av-wave 1.5s ease-in-out infinite; }
#avatar[data-state="thinking"] #trace2 { animation-delay: 0.25s; }
#avatar[data-state="thinking"] #trace3 { animation-delay: 0.5s; }

/* plc: trasferimento dati — circuiti BLU che lampeggiano veloci,
   occhi stretti blu che tremolano (versione animation-lab). */
#avatar[data-state="plc"] #trace1 { animation: av-datablink 0.5s steps(1) infinite; }
#avatar[data-state="plc"] #trace2 { animation: av-datablink 0.5s steps(1) 0.17s infinite; }
#avatar[data-state="plc"] #trace3 { animation: av-datablink 0.5s steps(1) 0.34s infinite; }
#avatar[data-state="plc"] #leftEye,
#avatar[data-state="plc"] #rightEye {
  animation: av-eyeflicker 0.6s ease-in-out infinite;
  fill: var(--mascot-blue);
}

/* answering: occhi leggermente più aperti + glow */
#avatar[data-state="answering"] #leftEye,
#avatar[data-state="answering"] #rightEye {
  transform: scaleY(1.08); animation: av-glow 1.2s ease-in-out infinite;
}

/* success: salto + occhi felici e circuiti VERDI (versione animation-lab;
   transitorio, torna a idle da JS). */
#avatar[data-state="success"] { animation: av-hop 0.9s ease-out; }
#avatar[data-state="success"] #leftEye,
#avatar[data-state="success"] #rightEye {
  transform: scaleY(0.32) translateY(-10px);
  fill: var(--mascot-green);
  filter: drop-shadow(0 0 5px var(--mascot-green));
}
#avatar[data-state="success"] #trace1,
#avatar[data-state="success"] #trace2,
#avatar[data-state="success"] #trace3 { fill: var(--mascot-green); }

/* error: vibrazione breve + occhi rossi */
#avatar[data-state="error"] { animation: av-shake 0.4s linear 2; }
#avatar[data-state="error"] #leftEye,
#avatar[data-state="error"] #rightEye { fill: #ff4d4d; }

@keyframes av-datablink {
  0%, 44% { opacity: 1; filter: drop-shadow(0 0 4px var(--mascot-blue)); fill: var(--mascot-blue); }
  50%, 100% { opacity: 0.25; filter: none; }
}
@keyframes av-eyeflicker {
  0%, 100% { transform: scaleX(0.75) scaleY(0.9); }
  50% { transform: scaleX(0.75) scaleY(0.75); }
}
@keyframes av-blink-once { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(0.08); } }
@keyframes av-listen { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(0.55); } }
@keyframes av-think { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-25%); } 75% { transform: translateX(25%); } }
@keyframes av-wave { 0%, 100% { opacity: 0.5; filter: none; } 50% { opacity: 1; filter: drop-shadow(0 0 3px var(--accent, #ffb020)); } }
/* brightness invece di drop-shadow sugli occhi: resta nitido a dimensioni piccole */
@keyframes av-glow { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.5); } }
@keyframes av-hop {
  0% { transform: translateY(0); }
  30% { transform: translateY(-14px); }
  55% { transform: translateY(0); }
  70% { transform: translateY(-6px); }
  100% { transform: translateY(0); }
}
@keyframes av-shake { 0%, 100% { transform: translateX(0); } 20%, 60% { transform: translateX(-2px); } 40%, 80% { transform: translateX(2px); } }

@media (prefers-reduced-motion: reduce) {
  #avatar, #avatar * { animation: none !important; }
}