/* Mascotte 3D — stili di canvas e nuvoletta.
   Le dimensioni della nuvoletta sono in em: cambia solo font-size per ingrandirla o ridurla. */
.mascotte-canvas {
  position: fixed; left: 0; top: 0; width: 100vw; height: 100vh;
  pointer-events: none; display: block;
}

.mascotte-bubble {
  --mascotte-font: var(--font-inter, system-ui), -apple-system, "Segoe UI", sans-serif;
  position: fixed; left: 0; top: 0; width: max-content; max-width: 17em;
  font: 500 clamp(15px, 1.25vw, 24px) / 1.36 var(--mascotte-font);
  letter-spacing: -0.01em; color: #0b0f2a;
  opacity: 0; pointer-events: none; will-change: transform, opacity;
}
.mascotte-bubble-in {
  position: relative; display: flex; align-items: center; gap: 0.5em;
  background: #fff; border-radius: 1.33em; padding: 0.67em 1.17em 0.67em 0.58em;
  box-shadow: 0 0.67em 1.83em rgba(10, 20, 80, 0.2);
}
.mascotte-bubble-in::after {
  content: ""; position: absolute; bottom: 1em; width: 0.92em; height: 0.92em;
  background: #fff; border-radius: 0.17em; transform: rotate(45deg);
}
.mascotte-bubble.to-right .mascotte-bubble-in::after { left: -0.375em; }
.mascotte-bubble.to-left .mascotte-bubble-in::after { right: -0.375em; }
.mascotte-ico { width: 2em; height: auto; flex: none; display: block; }
.mascotte-txt { position: relative; }
.mascotte-ghost { display: block; visibility: hidden; }          /* riserva lo spazio del testo completo */
.mascotte-typed { position: absolute; left: 0; right: 0; top: 0; }

.mascotte-sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}