/**
 * Mascotte vettoriale della sezione AI (slot 2 del rig a parti separate).
 *
 * Tutte le variabili di posa sono scritte dal frame loop di ai-section-mascot.js.
 * Nessuna transition sui transform guidati dal loop: le sole eccezioni sono il
 * blink discreto e il crossfade opacity, che non duplicano l'interpolazione della
 * posa e quindi non producono una resa gommosa.
 * Le origini sono i perni reali convertiti dal viewBox 220 38 268 272:
 * percentuale = (coordinata - offset) / dimensione.
 *
 * Ordine di impilamento: tutto cio' che ruota sta dietro al corpo, cosi il
 * movimento scopre sempre scocca su scocca e mai il fondo. Le linguette
 * rientranti nei file di parte chiudono i giunti di testa.
 */
.ai-hero-mascot {
  --ai-motion-scale: 1;
  --ai-arm-angle: 0deg;
  --ai-eye-x: 0px;
  --ai-eye-y: 0px;
  --ai-body-lean: 0deg;
  --ai-reaction-y: 0px;
  --ai-reaction-scale: 1;
  --ai-float-amp: 1;
  --ai-antenna-angle: 0deg;
  --ai-free-arm-angle: 0deg;
  --ai-left-foot-y: 0px;
  --ai-right-foot-y: 0px;
  --ai-mouth-x: 0px;
  --ai-mouth-y: 0px;
  --ai-foot-breath-amp: 0;
  --ai-antenna-sway-amp: 0;
  position: absolute;
  z-index: 5;
  right: 0;
  bottom: -28px;
  /* Il pavimento non e' cosmetico: le clamp dello sguardo sono dimensionate sul
     rapporto unita/pixel peggiore, che si ha alla larghezza minima. */
  width: clamp(210px, 34%, 250px);
  aspect-ratio: 268 / 272;
  /* Il carosello sotto deve restare cliccabile: la mascotte non intercetta mai
     il puntatore, altrimenti rompe lo swipe e fa ripartire l'autoplay. */
  pointer-events: none;
  isolation: isolate;
  filter: drop-shadow(0 18px 30px rgba(75, 47, 109, .18));
}

.ai-mascot-float-shell,
.ai-mascot-reaction-shell,
.ai-mascot-layer,
.ai-mascot-part-shell,
.ai-mascot-screen-shell,
.ai-mascot-screen-layer,
.ai-mascot-eyes-shell,
.ai-mascot-mouth-shell,
.ai-mascot-foot-breath,
.ai-mascot-antenna-sway {
  position: absolute;
  inset: 0;
  display: block;
}

.ai-mascot-float-shell {
  animation: ai-mascot-float 3.8s ease-in-out infinite;
}

.ai-mascot-reaction-shell {
  transform: translateY(var(--ai-reaction-y)) scale(var(--ai-reaction-scale)) rotate(var(--ai-body-lean));
  transform-origin: 50% 63.97%;
}

/* Dietro al corpo -------------------------------------------------------- */

.ai-mascot-arm-left-shell {
  z-index: 1;
  transform: rotate(var(--ai-arm-angle));
  transform-origin: 14.74% 51.1%;
  will-change: transform;
}

.ai-mascot-arm-right-shell {
  z-index: 1;
  transform: rotate(var(--ai-free-arm-angle));
  transform-origin: 85.26% 51.1%;
}

.ai-mascot-antenna-shell {
  z-index: 1;
  transform: rotate(var(--ai-antenna-angle));
  transform-origin: 50.84% 19.51%;
}

.ai-mascot-antenna-sway {
  transform-origin: 50.84% 19.51%;
  animation: ai-mascot-antenna-sway 4.3s ease-in-out infinite alternate;
}

/* Il perno dei piedi sta sulla corda di attacco, non sul bordo inferiore:
   qui i piedi sporgono sotto la sagoma, quindi ancorare in basso scoprirebbe
   il fondo invece di comprimere scocca su scocca. */
.ai-mascot-foot-left-shell {
  z-index: 1;
  transform: translateY(var(--ai-left-foot-y));
  transform-origin: 35.39% 85.5%;
}

.ai-mascot-foot-right-shell {
  z-index: 1;
  transform: translateY(var(--ai-right-foot-y));
  transform-origin: 65.72% 85.5%;
}

.ai-mascot-foot-left-shell .ai-mascot-foot-breath {
  transform-origin: 35.39% 85.5%;
  animation: ai-mascot-foot-squash 3.8s ease-in-out infinite alternate;
}

.ai-mascot-foot-right-shell .ai-mascot-foot-breath {
  transform-origin: 65.72% 85.5%;
  animation: ai-mascot-foot-squash 3.8s ease-in-out infinite alternate;
}

/* Corpo e schermo -------------------------------------------------------- */

.ai-mascot-body {
  z-index: 2;
}

.ai-mascot-screen-shell {
  z-index: 3;
}

.ai-mascot-screen-layer {
  opacity: 0;
  transition: opacity 240ms ease-in-out;
  will-change: opacity;
}

.ai-mascot-face-layer {
  opacity: 1;
  /* Centratura del volto (occhi + bocca) dentro il visore nero.
     Misurata sui pixel del render, non sulle coordinate dei path: gli asset
     usano curve, e il riquadro dei soli vertici non e' quello dipinto.
     Visore x 292.3->409.8, y 119.3->190.5. Volto grezzo x 327.3->393.5,
     y 149.5->187.0: fuori centro di 9.38 unita a destra e 13.11 in basso.
     Percentuali sul box della mascotte, 268 x 272 unita. */
  transform: translate(-3.5%, -4.82%);
}

/* Solo gli occhi seguono lo sguardo. Bocca e centratura non lo ereditano.
   Il grafico conserva la propria corsa, indipendente dal layer del volto. */
.ai-mascot-eyes-shell {
  transform: translate(var(--ai-eye-x), var(--ai-eye-y));
}

.ai-mascot-chart-layer {
  transform: translate(var(--ai-eye-x), var(--ai-eye-y));
}

.ai-hero-mascot[data-screen-mode="chart"] .ai-mascot-face-layer {
  opacity: 0;
}

.ai-hero-mascot[data-screen-mode="chart"] .ai-mascot-chart-layer {
  opacity: 1;
}

/* Il blink replica lo slot 1, ma comprime soltanto gli occhi: il grafico non
   viene mai deformato e il timer e' sospeso mentre questo e' visibile. */
.ai-mascot-eyes {
  transform-origin: 52.45% 45.9%;
  transform: scaleY(1);
  transition: transform 90ms ease-in-out;
}

.ai-hero-mascot.is-blinking .ai-mascot-eyes {
  transform: scaleY(.12);
}

/* Corsa assoluta e contenuta del sorriso: nessun movimento ereditato dagli occhi. */
.ai-mascot-mouth-shell {
  transform: translate(var(--ai-mouth-x), var(--ai-mouth-y));
  transform-origin: 52.39% 52.89%;
  will-change: transform;
}

/* Anche le animazioni CSS devono dormire quando il controller e sospeso. */
.ai-hero-mascot.is-suspended .ai-mascot-float-shell,
.ai-hero-mascot.is-suspended .ai-mascot-antenna-sway,
.ai-hero-mascot.is-suspended .ai-mascot-foot-breath {
  animation-play-state: paused;
}

.ai-hero-mascot.is-suspended .ai-mascot-screen-layer,
.ai-hero-mascot.is-suspended .ai-mascot-eyes {
  transition: none;
}

/* Micro-animazioni: l'ampiezza e' pilotata da una custom property, cosi il
   loop puo' spegnerle senza rimuovere l'animazione. */
@keyframes ai-mascot-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(calc(-5px * var(--ai-float-amp, 1) * var(--ai-motion-scale))); }
}

@keyframes ai-mascot-foot-squash {
  0% { transform: scaleY(1); }
  100% { transform: scaleY(calc(1 - (.035 * var(--ai-foot-breath-amp, 0)))); }
}

@keyframes ai-mascot-antenna-sway {
  0% { transform: rotate(calc(-3deg * var(--ai-antenna-sway-amp, 0))); }
  100% { transform: rotate(calc(3deg * var(--ai-antenna-sway-amp, 0))); }
}

@media (prefers-reduced-motion: reduce) {
  .ai-mascot-float-shell,
  .ai-mascot-antenna-sway,
  .ai-mascot-foot-left-shell .ai-mascot-foot-breath,
  .ai-mascot-foot-right-shell .ai-mascot-foot-breath {
    animation: none;
  }

  .ai-mascot-screen-layer,
  .ai-mascot-eyes {
    transition-duration: .01ms;
  }

  .ai-hero-mascot .ai-mascot-face-layer {
    opacity: 1;
  }

  .ai-hero-mascot .ai-mascot-chart-layer {
    opacity: 0;
  }

  .ai-hero-mascot.is-blinking .ai-mascot-eyes {
    transform: scaleY(1);
  }
}

.ai-mascot-footer { display: contents; }

/* Posizionamento a cavallo dell'angolo inferiore destro su smartphone */
@media (max-width: 760px) {
  .ai-stage .ai-mascot-footer {
    display: contents;
  }

  .ai-stage .ai-hero-mascot {
    display: block;
    position: absolute;
    right: 0;
    bottom: -14px;
    width: clamp(105px, 28vw, 125px);
    filter: drop-shadow(0 8px 16px rgba(75, 47, 109, .15));
  }

  /* Protezione testo di chiusura delle card: va a capo a sinistra senza toccare la mascotte */
  .ai-insight-body .ai-card-note {
    padding-right: 85px;
  }

  .ai-stage > .memphis-plus { display: none; }
}

@media (max-width: 350px) {
  .ai-stage .ai-hero-mascot {
    width: clamp(95px, 26vw, 110px);
    bottom: -10px;
  }

  .ai-insight-body .ai-card-note {
    padding-right: 75px;
  }
}