/* Mascotte "Mini": posizioni del contenitore, espressioni e gesti.
   Solo transform/opacity. I gesti brevi durano 150–600 ms; il respiro è un ciclo lento sull'<svg> intero
   (un solo strato, economico da disegnare). Lo spazio libero in basso sul telefono si regola con --mascotte-sotto. */

#mascotte {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 20;
  width: min(42vw, 220px);
  pointer-events: none;
  transform-origin: 0 0;
  transform: translate(calc(50vw - 50%), calc(50vh - 50%));
  transform: translate(calc(50vw - 50%), calc(50dvh - 50%));
  opacity: 0;
  visibility: hidden;
  transition: transform 600ms cubic-bezier(.22, 1, .36, 1), opacity 400ms ease, visibility 0s linear 400ms;
}
#mascotte > img,
#mascotte > svg {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: auto;
  transform-origin: 50% 94%;
}
#mascotte.visibile {
  opacity: 1;
  visibility: visible;
  transition: transform 600ms cubic-bezier(.22, 1, .36, 1), opacity 400ms ease, visibility 0s;
}

/* A sinistra, più piccola, mentre si leggono i servizi. */
#mascotte.a-sinistra {
  transform: translate(1.5rem, calc(50vh - 31%)) scale(.62);
  transform: translate(1.5rem, calc(50dvh - 31%)) scale(.62);
}
@media (max-width: 700px) {
  #mascotte { width: min(46vw, 180px); }
  /* In basso a sinistra, sopra la barra dei pulsanti (preventivo e menu). */
  #mascotte.a-sinistra {
    transform: translate(.5rem, calc(100vh - var(--mascotte-sotto, 6rem) - 40%)) scale(.4);
    transform: translate(.5rem, calc(100dvh - var(--mascotte-sotto, 6rem) - 40%)) scale(.4);
  }
}

/* Sopra "Come lavoriamo" e il modulo si fa da parte (mascotte.js mette la classe "coperta"). */
html:not([data-livello="statico"]) #mascotte.coperta {
  opacity: 0;
  visibility: hidden;
  transition: transform 600ms cubic-bezier(.22, 1, .36, 1), opacity 400ms ease, visibility 0s linear 400ms;
}
html:not([data-livello="statico"]) #mascotte.visibile.coperta > svg { animation: none; }

/* Livello statico e pagina senza JavaScript: ferma, nel flusso della pagina (dentro #incontro). */
html[data-livello="statico"] #mascotte,
html:not(.js) #mascotte {
  position: relative;
  width: min(45vw, 200px);
  margin: 1.5rem auto;
  transform: none;
  opacity: 1;
  visibility: visible;
  transition: none;
}

/* Parti del disegno: punti di rotazione in unità del viewBox (vedi commento in img/mascotte.svg). */
#mascotte svg * { transform-box: view-box; }
#mascotte #occhio-sx, #mascotte .pupilla-sx { transform-origin: 47px 56px; }
#mascotte #occhio-dx, #mascotte .pupilla-dx { transform-origin: 73px 56px; }
#mascotte #braccio-sx { transform-origin: 24px 78px; }
#mascotte #braccio-dx { transform-origin: 96px 78px; }
#mascotte #germoglio { transform-origin: 60px 24px; }
#mascotte #bocca-o { transform-origin: 60px 72px; }
#mascotte #occhio-sx, #mascotte #occhio-dx, #mascotte .pupilla-sx, #mascotte .pupilla-dx,
#mascotte #bocca, #mascotte #bocca-o, #mascotte .occhio-chiuso {
  transition: transform 150ms ease-out, opacity 150ms ease-out;
}
/* Le pupille seguono il puntatore (mascotte.js imposta il transform in linea). */
#mascotte #pupille { transition: transform 200ms ease-out; }

/* Espressioni: classi sull'<svg>. */
.occhiolino #occhio-dx, .occhiolino .pupilla-dx { transform: scaleY(.1); opacity: 0; }
.occhiolino .occhio-chiuso { opacity: 1; }
.sorpresa #occhio-sx, .sorpresa #occhio-dx { transform: scale(1.15); }
.sorpresa #bocca, .sbadiglio #bocca { opacity: 0; }
.sorpresa #bocca-o { opacity: 1; }
.sbadiglio #occhio-sx, .sbadiglio #occhio-dx,
.sbadiglio .pupilla-sx, .sbadiglio .pupilla-dx { transform: scaleY(.4); transition-duration: 300ms; }
.sbadiglio #bocca-o { opacity: 1; transform: scale(1.3, 1.7); transition-duration: 400ms; }

/* Gesti. Il respiro gira solo quando la mascotte è visibile in un livello animato. */
html:not([data-livello="statico"]) #mascotte.visibile > svg { animation: mini-respiro 1.8s ease-in-out infinite alternate; }
html:not([data-livello="statico"]) #mascotte > svg.entra { animation: mini-entra 500ms cubic-bezier(.34, 1.56, .64, 1); }
html:not([data-livello="statico"]) #mascotte > svg.salta { animation: mini-salto 500ms cubic-bezier(.34, 1.56, .64, 1); }
.saluta #braccio-dx { animation: mini-saluto 600ms ease-in-out 2; }
.sbadiglio #braccio-sx { transform: rotate(18deg); transition: transform 400ms ease-out; }
#mascotte.in-pausa > svg { animation-play-state: paused; }

@keyframes mini-respiro { to { transform: scale(1.015, 1.03); } }
@keyframes mini-entra {
  from { transform: translateY(30%) scale(.6); opacity: 0; }
  to { transform: none; opacity: 1; }
}
@keyframes mini-salto {
  0% { transform: none; }
  25% { transform: scale(1.06, .92); }
  55% { transform: translateY(-14%) scale(.96, 1.05); }
  100% { transform: none; }
}
@keyframes mini-saluto {
  0%, 100% { transform: rotate(0deg); }
  30% { transform: rotate(-145deg); }
  60% { transform: rotate(-115deg); }
  85% { transform: rotate(-140deg); }
}

/* Statico e "riduci movimento": nessun movimento, solo cambi di espressione istantanei. */
html[data-livello="statico"] #mascotte *,
html[data-livello="statico"] #mascotte > svg {
  animation: none !important;
  transition: none !important;
}
@media (prefers-reduced-motion: reduce) {
  #mascotte, #mascotte > svg, #mascotte svg * {
    animation: none !important;
    transition: none !important;
  }
}