/* Estilos do pavó que sobrevoa o site, par do mascote.js desta mesma pasta.

   Esta pasta começou como o mascote compartilhado do pmsgra.net (o catavento
   "Ico"), mas virou um fork do Peti: o pássaro, a folha de sprites e a rota
   pelas seções são específicos da Estação Ambiental. */

#pavo-voo {
    position: fixed;
    left: 0;
    top: 0;
    width: 130px;
    height: 130px;
    /* Sobrevoa o conteúdo, mas passa POR BAIXO do cabeçalho fixo e dos menus —
       é enfeite, não pode cobrir navegação. */
    z-index: 90;
    pointer-events: none;
    user-select: none;
    will-change: transform;
    opacity: 0;
    transition: opacity 0.8s ease;
}

#pavo-voo.is-on {
    opacity: 1;
}

/* A folha pavo-sprite.png tem 8 quadros lado a lado (4 de voo, 2 de pouso e
   2 de ave pousada). Com background-size de 800%, cada quadro ocupa exatamente a largura do elemento e o JS troca só o
   background-position-x. Se a folha mudar de quantidade de quadros, este valor
   e a constante QUADROS do mascote.js têm de andar juntos. O url() é relativo a
   ESTE arquivo, então o trio .css + .png + .js viaja junto. */
#pavo-voo .pavo-quadro {
    width: 100%;
    height: 100%;
    background-image: url('pavo-sprite.png');
    background-repeat: no-repeat;
    background-size: 800% 100%;
    background-position: 0 0;
}

@media (max-width: 768px) {
    #pavo-voo {
        width: 88px;
        height: 88px;
    }
}