/*
 * Mascote compartilhado pelas duas áreas (ver templates/_robo.html).
 *
 * Arquivo próprio, e não um bloco repetido em admin.css e portal.css: o SVG é
 * um só, e duas cópias do estilo seriam duas coisas para manter em acordo.
 *
 * Nada aqui usa cor de marca. É o que permite o mesmo robô aparecer sobre o
 * cinza da FlyData, sobre um portal branco e sobre um portal preto.
 */

.robo { text-align: center; }

.robo svg {
  width: 96px;
  height: auto;
  display: block;
  margin: 0 auto;
  animation: robo-flutua 4.5s ease-in-out infinite;
}

/* A sombra encolhe quando o robô sobe: é o que vende o flutuar. */
.robo-sombra {
  animation: robo-sombra 4.5s ease-in-out infinite;
  transform-origin: center;
}

/* transform-box: fill-box faz o transform-origin valer dentro da caixa da
   própria forma; sem isso a origem seria o canto do SVG e a piscada viraria um
   deslocamento dos olhos para fora do visor. */
.robo-olhos {
  transform-box: fill-box;
  transform-origin: center;
  animation: robo-pisca 6s ease-in-out infinite;
}

@keyframes robo-flutua {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}

@keyframes robo-sombra {
  0%, 100% { transform: scaleX(1); opacity: 1; }
  50% { transform: scaleX(0.82); opacity: 0.6; }
}

@keyframes robo-pisca {
  0%, 93%, 100% { transform: scaleY(1); }
  96% { transform: scaleY(0.1); }
}

@media (prefers-reduced-motion: reduce) {
  .robo svg,
  .robo-sombra,
  .robo-olhos { animation: none; }
}

/* ---------- palco do login: mascote ao lado da caixa ---------- */

.palco-login {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 56px;
  padding: 24px;
  width: 100%;
}

.robo-lateral { flex-shrink: 0; }
.robo-lateral .robo svg { width: 280px; }
.palco-login .caixa-login { flex-shrink: 0; margin: 0; }

/* Empilha antes de o robô começar a espremer o formulário. */
@media (max-width: 900px) {
  .palco-login { flex-direction: column; gap: 8px; }
  .robo-lateral .robo svg { width: 168px; }
}

/* Em tela baixa o robô sai: quem entra precisa ver os dois campos e o botão
   sem rolar. */
@media (max-height: 620px) {
  .robo-lateral { display: none; }
}