/* ZIOo — o palco do personagem. 02/10/2026
 *
 * Quase nada aqui é animação: o movimento vive no engine e o renderer o escreve
 * em atributos. O CSS só prepara o palco.
 *
 * SEM `transition` nas juntas, de propósito: uma transição do CSS por cima de um
 * valor que o JS já integra briga com a física e vira borracha. A suavidade vem
 * das molas.
 *
 * SEM fundo e SEM moldura: a OWL fica solta na página. Ela é geometria própria,
 * então não há retângulo de foto para esconder — a silhueta já termina nela mesma.
 */

.owl-palco{ position:relative; background:none; isolation:isolate }

.owl-palco .owl-svg{
  position:absolute; inset:0; width:100%; height:100%; display:block;
  filter:drop-shadow(0 16px 26px rgba(0,0,0,.42));
}

/* o estado em palavras, no canto */
.owl-palco .owl-rotulo{
  position:absolute; left:10px; top:9px; z-index:6;
  font-family:var(--mono,monospace); font-size:9px; letter-spacing:.2em; text-transform:uppercase;
  color:#cfe6f5; background:rgba(7,12,22,.55); border:1px solid rgba(63,224,230,.3);
  border-radius:20px; padding:3px 9px; backdrop-filter:blur(6px);
}

/* Movimento reduzido: o laço nem liga. O personagem é desenhado UMA vez, em
   repouso — continua legível, só não se mexe. */
@media (prefers-reduced-motion: reduce){
  .owl-palco .owl-svg{ filter:none }
}