/* Mascote Bia: palco 3D + versão em CSS 3D de reserva. O tamanho vem do elemento que o contém. */
.mz3d { position: relative; width: 100%; height: 100%; min-height: 160px; --mz-c1: #f7faff; --mz-c2: #b8c8e6; --mz-trim: #8da4c9; --mz-visor: #060c1f; --mz-led: #5fd6ff; --mz-led2: #1a86d9; }
.mz3d.preto { --mz-c1: #2a2a2c; --mz-c2: #050505; --mz-trim: #d4af37; --mz-visor: #0e0a02; --mz-led: #f5d76e; --mz-led2: #b38728; }
.mz3d-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: none; pointer-events: none;
  -webkit-mask-image: radial-gradient(closest-side at 50% 50%, #000 78%, transparent 100%); mask-image: radial-gradient(closest-side at 50% 50%, #000 78%, transparent 100%); }
.mz3d.em3d .mz3d-canvas { display: block; }
.mz3d-palco { position: absolute; inset: 14% 22% 4%; background: none; border: 0; padding: 0; cursor: pointer; border-radius: 40%; }
.mz3d-palco:focus-visible { outline: 2px solid var(--primary, #d4af37); outline-offset: 2px; }
.mz3d-fala { position: absolute; left: 50%; top: 2%; transform: translate(-50%, -6px); width: max-content; max-width: min(88%, 300px); padding: 10px 14px; text-align: center; font-size: 14px; line-height: 1.4;
  background: var(--surface-solid, #101216); color: var(--text, #f4f2ec); border: 1px solid var(--primary-line, rgba(212, 175, 55, .28)); border-radius: 16px; box-shadow: 0 14px 34px rgba(0, 0, 0, .5);
  opacity: 0; pointer-events: none; transition: opacity .3s, transform .3s cubic-bezier(.16, 1, .3, 1); z-index: 2; }
.mz3d-fala.on { opacity: 1; transform: translate(-50%, 0); }
.mz3d-som { position: absolute; right: 4px; bottom: 4px; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: rgba(0, 0, 0, .35); color: var(--text-2, #b0b0b0); border: 1px solid var(--line, rgba(255, 255, 255, .12)); cursor: pointer; z-index: 3; opacity: .7; }
.mz3d-som:hover { opacity: 1; }
.mz3d-som svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.mz3d-som .off { display: none; }
.mz3d-som.mudo .on { display: none; } .mz3d-som.mudo .off { display: inline; }

/* reserva em CSS 3D: gira e vem do fundo, para na frente; se ignorada, gira de novo e some */
.mz3d-fb { position: absolute; inset: 0; display: grid; place-items: center; perspective: 900px; pointer-events: none; }
.mz3d-fb[hidden] { display: none; }
.mz3d-fb-robo { width: min(62%, 220px); transform-style: preserve-3d; filter: drop-shadow(0 18px 24px rgba(0, 0, 0, .45)); }
.mz3d-fb-robo svg { display: block; width: 100%; height: auto; overflow: visible; }
.fb-entrar { animation: fb-entrar 2.8s cubic-bezier(.16, .84, .3, 1) both; }
.fb-sair { animation: fb-sair 2.1s cubic-bezier(.55, 0, .9, .4) both; }
.fb-parado { animation: fb-flutuar 5s ease-in-out infinite; }
.fb-pum { animation: fb-pum .55s cubic-bezier(.3, 1.6, .5, 1), fb-flutuar 5s .55s ease-in-out infinite; }
@keyframes fb-entrar {
  0% { transform: translate3d(42%, -38%, -1100px) rotateY(0) rotateZ(26deg) scale(.12); opacity: 0; }
  14% { opacity: 1; }
  100% { transform: translate3d(0, 0, 0) rotateY(1080deg) rotateZ(0) scale(1); opacity: 1; }
}
@keyframes fb-sair {
  0% { transform: translate3d(0, 0, 0) rotateY(0) rotateZ(0) scale(1); opacity: 1; }
  80% { opacity: 1; }
  100% { transform: translate3d(-46%, -42%, -1100px) rotateY(-1080deg) rotateZ(-30deg) scale(.1); opacity: 0; }
}
@keyframes fb-pum { 0% { transform: scale(1.12, .9); } 50% { transform: scale(.96, 1.05); } 100% { transform: none; } }
@keyframes fb-flutuar { 50% { transform: translateY(-9px); } }
.mz3d .fb-olho { transform-box: fill-box; transform-origin: center; animation: fb-piscar 5s infinite; }
@keyframes fb-piscar { 0%, 93%, 100% { transform: scaleY(1); } 96% { transform: scaleY(.08); } }
.mz3d.acenando .fb-braco { transform-origin: 152px 156px; animation: fb-acenar .9s ease-in-out 2; }
@keyframes fb-acenar { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(-150deg); } 65% { transform: rotate(-120deg); } }
.mz3d.pulsando .mz3d-fb-robo { filter: drop-shadow(0 0 22px var(--mz-led)); }
@media (prefers-reduced-motion: reduce) {
  .fb-entrar, .fb-sair, .fb-parado, .fb-pum, .mz3d .fb-olho, .mz3d.acenando .fb-braco { animation: none !important; }
  .fb-entrar, .fb-parado, .fb-pum { transform: none; opacity: 1; }
}