/* La mascotte viva (schermi/templates/schermi/_mascotte.html + static/js/mascotte.js).
   Regola di costo: SOLO transform e opacity, nessun filtro SVG, i bagliori sono gradienti radiali già disegnati.
   Stati via [data-stato]: quieta | ascolta | pensa | parla | felice | pausa. Con prefers-reduced-motion resta solo la dissolvenza. */
.mascotte { display: block; width: 100%; height: auto; overflow: visible; }
.mascotte * { transform-box: fill-box; transform-origin: center; }
.mascotte-testata { width: 2.1rem; height: 2.1rem; }
.mascotte-piccola { width: 7rem; }
.mascotte-media { width: 13rem; }
.mascotte-grande { width: 26rem; }
.mascotte-tv { width: 19rem; }

/* liquido: il livello lo muove il JS (translateY sul gruppo .m-livello, con transizione), l'onda scorre da sola */
.mascotte .m-livello { transform-box: view-box; transform-origin: 0 0; transition: transform 1100ms cubic-bezier(.2, .7, .2, 1); }
.mascotte .m-onda-liquido { transform-box: view-box; transform-origin: 0 0; animation: m-onda 7s linear infinite; }
@keyframes m-onda { from { transform: translateX(0); } to { transform: translateX(-34px); } }
.mascotte .m-bolle-ferme { animation: m-galleggia 6s ease-in-out infinite; }
@keyframes m-galleggia { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1.2px); } }

/* palpebre: la classe .sbatte la mette il JS ogni 4-7 s */
.mascotte .m-occhio { transition: transform 110ms ease-in; }
.mascotte.sbatte .m-occhio { transform: scaleY(.08); }
.mascotte .m-occhio-tondo, .mascotte .m-occhio-luna { transition: opacity 350ms ease; }
.mascotte .m-occhio-luna { opacity: 0; }
.mascotte .m-occhio-bagliore, .mascotte .m-orecchio-bagliore, .mascotte .m-antenna-bagliore { opacity: .55; transition: opacity 600ms ease, transform 600ms ease; }
.mascotte .m-suono { opacity: 0; transition: opacity 500ms ease; }
.mascotte .m-suono rect { fill: #8B5CF6; transform-origin: center; }
.mascotte .m-bolle { opacity: 0; transition: opacity 500ms ease; }
.mascotte .m-bolla { opacity: 0; }
.mascotte .m-antenna-luce, .mascotte .m-vetro, .mascotte .m-riflesso, .mascotte .m-onda-liquido path { transition: opacity 700ms ease; }

/* ascolta: orecchie che pulsano viola, onda sonora sottile sotto */
.mascotte[data-stato="ascolta"] .m-orecchio-bagliore { opacity: 1; animation: m-pulsa-orecchio 1.6s ease-in-out infinite; }
.mascotte[data-stato="ascolta"] .m-dx .m-orecchio-bagliore { animation-delay: .8s; }
@keyframes m-pulsa-orecchio { 0%, 100% { transform: scale(1); opacity: .45; } 50% { transform: scale(1.25); opacity: 1; } }
.mascotte[data-stato="ascolta"] .m-suono { opacity: .9; }
.mascotte[data-stato="ascolta"] .m-suono rect { animation: m-barra 1.4s ease-in-out infinite; }
.mascotte[data-stato="ascolta"] .m-suono rect:nth-child(2n) { animation-duration: 1.9s; animation-delay: .2s; }
.mascotte[data-stato="ascolta"] .m-suono rect:nth-child(3n) { animation-duration: 1.1s; animation-delay: .35s; }
.mascotte[data-stato="ascolta"] .m-suono rect:nth-child(5n) { animation-duration: 2.2s; animation-delay: .1s; }
@keyframes m-barra { 0%, 100% { transform: scaleY(.3); } 50% { transform: scaleY(1); } }

/* pensa: bollicine che salgono nel liquido */
.mascotte[data-stato="pensa"] .m-bolle { opacity: 1; }
.mascotte[data-stato="pensa"] .m-bolla { animation: m-sale 2.4s linear infinite; }
.mascotte[data-stato="pensa"] .m-bolla:nth-child(2) { animation-duration: 2.9s; animation-delay: .3s; }
.mascotte[data-stato="pensa"] .m-bolla:nth-child(3) { animation-duration: 2.1s; animation-delay: .9s; }
.mascotte[data-stato="pensa"] .m-bolla:nth-child(4) { animation-duration: 3.2s; animation-delay: .15s; }
/* le bolle nascono sotto il fondo del vetro (y=88) e salgono fino alla superficie: --salita la scrive mascotte.js dal livello */
@keyframes m-sale { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: .85; } 85% { opacity: .7; } 100% { transform: translateY(calc(-1 * var(--salita, 30px))); opacity: 0; } }
.mascotte[data-stato="pensa"] .m-antenna-bagliore { animation: m-respira 2.2s ease-in-out infinite; }

/* parla: occhi che pulsano col ritmo del testo (il JS aggiunge .impulso a ogni pezzo che arriva) */
.mascotte[data-stato="parla"] .m-occhio-bagliore { opacity: .9; animation: m-respira 1.1s ease-in-out infinite; }
.mascotte[data-stato="parla"] .m-dx .m-occhio-bagliore { animation-delay: .25s; }
.mascotte[data-stato="parla"] .m-occhio-tondo { transition: transform 160ms ease-out; }
.mascotte.impulso .m-occhio-tondo { transform: scale(1.18); }
.mascotte.impulso .m-occhio-bagliore { opacity: 1; }
@keyframes m-respira { 0%, 100% { transform: scale(1); opacity: .5; } 50% { transform: scale(1.3); opacity: 1; } }

/* felice: occhi a mezzaluna, antenna che brilla */
.mascotte[data-stato="felice"] .m-occhio-tondo { opacity: 0; }
.mascotte[data-stato="felice"] .m-occhio-luna { opacity: 1; }
.mascotte[data-stato="felice"] .m-occhio-bagliore { opacity: .9; transform: scale(1.15); }
.mascotte[data-stato="felice"] .m-antenna-bagliore { opacity: 1; animation: m-brilla 1.3s ease-in-out infinite; }
.mascotte[data-stato="felice"] .m-antenna-luce { animation: m-brilla-luce 1.3s ease-in-out infinite; }
@keyframes m-brilla { 0%, 100% { transform: scale(1); opacity: .7; } 50% { transform: scale(1.7); opacity: 1; } }
@keyframes m-brilla-luce { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.25); } }

/* pausa: occhi semichiusi, luce bassa */
.mascotte[data-stato="pausa"] .m-occhio { transform: scaleY(.42); transition: transform 600ms ease; }
.mascotte[data-stato="pausa"] .m-occhio-bagliore, .mascotte[data-stato="pausa"] .m-orecchio-bagliore, .mascotte[data-stato="pausa"] .m-antenna-bagliore { opacity: .15; }
.mascotte[data-stato="pausa"] .m-antenna-luce { opacity: .55; }
.mascotte[data-stato="pausa"] .m-onda-liquido path { opacity: .7; }
.mascotte[data-stato="pausa"] .m-onda-liquido { animation-duration: 14s; }
.mascotte[data-stato="pausa"].sbatte .m-occhio { transform: scaleY(.42); }

/* respiro lento della TV in modalità ambiente */
.mascotte.respira { animation: m-respiro 6s ease-in-out infinite; transform-origin: 50% 60%; }
@keyframes m-respiro { 0%, 100% { transform: scale(1) translateY(0); } 50% { transform: scale(1.025) translateY(-.6rem); } }

@media (prefers-reduced-motion: reduce) {
  .mascotte, .mascotte * { animation: none !important; }
  .mascotte .m-occhio, .mascotte .m-livello { transition-duration: 0s; }
  .mascotte[data-stato="ascolta"] .m-orecchio-bagliore { opacity: 1; transform: scale(1.2); }
  .mascotte[data-stato="pensa"] .m-bolla { opacity: .7; transform: translateY(calc(-.35 * var(--salita, 30px))); }
  .mascotte[data-stato="pensa"] .m-bolla:nth-child(2) { transform: translateY(calc(-.7 * var(--salita, 30px))); }
  .mascotte[data-stato="pensa"] .m-bolla:nth-child(3) { transform: translateY(calc(-.2 * var(--salita, 30px))); }
  .mascotte[data-stato="pensa"] .m-bolla:nth-child(4) { transform: translateY(calc(-.5 * var(--salita, 30px))); }
  .mascotte[data-stato="felice"] .m-antenna-bagliore { transform: scale(1.5); }
}