/* ============================================================
   Dealbert, o mascote (página inicial)
   ============================================================
   O tucano fica SENTADO em algo de cada seção (a imagem do topo, um cartão,
   o bloco de contato), alternando os lados. Ao trocar de seção ele levanta
   voo e some, e reaparece descendo no lugar novo — nunca atravessa o texto.
   Clicando nele, ele vai para a barra de navegação; clicando lá, volta.

   Cuidados:
   - fica abaixo do cabeçalho fixo (z-index 1030);
   - só o desenho recebe clique, não a caixa em volta dele;
   - some abaixo de 992px (celular e tablet);
   - com "reduzir movimento" ligado no sistema não voa, não pisca e não
     bate asa: só aparece no lugar.
   ============================================================ */

/* ---------- no site ---------- */
.mascote {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1020;
    width: 84px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
    will-change: transform, opacity;
}

.mascote.visivel {
    opacity: 1;
}

/* só o desenho é clicável; a área transparente em volta deixa o clique
   passar para o que estiver embaixo */
.mascote.visivel .m-tucano {
    pointer-events: visiblePainted;
    cursor: pointer;
}

.dealbert .mascote-svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
    filter: drop-shadow(0 3px 4px rgba(8, 58, 99, 0.22));
}

/* desenhado olhando para a direita */
.dealbert.olha-esquerda .mascote-svg {
    transform: scaleX(-1);
}

@media (max-width: 991.98px) {
    .mascote {
        display: none;
    }
}

/* ---------- na barra de navegação ---------- */
.btn-mascote-barra {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 48px; /* mesma altura dos botões vizinhos: o menu não cresce */
    padding: 0;
    border: 0;
    border-radius: 12px;
    background: transparent;
}

.btn-mascote-barra:focus-visible {
    outline: 2px solid var(--smart-primary-light);
    outline-offset: 2px;
}

/* o desenho é maior que o botão e passa um pouco por cima e por baixo
   (margem negativa), para ganhar tamanho sem aumentar a altura do menu */
.dealbert-barra {
    display: block;
    width: 76px;
    margin: -10px -6px;
    opacity: 0;
    transform: translateY(-8px) scale(0.85);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* A caixa do desenho reserva espaço em cima (asas de voo, brilhos) e à
   esquerda (asa aberta): o corpo do tucano fica abaixo e à direita do centro
   da caixa. Na barra ele está sempre pousado, então a caixa é deslocada para o
   corpo ficar no centro, alinhado aos botões vizinhos. Medida no desenho
   (viewBox -12 -10 50 44): corpo pousado em x 4..29 e y 3..31,3. */
.dealbert-barra .mascote-svg {
    transform: translate(-7%, -12%);
}

.btn-mascote-barra.na-barra .dealbert-barra {
    opacity: 1;
    transform: none;
}

/* fora da barra o botão continua alcançável pelo teclado: com foco, o
   tucano aparece apagado, indicando onde ele vai ficar */
.btn-mascote-barra:not(.na-barra):focus-visible .dealbert-barra {
    opacity: 0.45;
    transform: none;
}

/* ---------- partes de cada pose ---------- */
.dealbert .m-asa-voo,
.dealbert .m-olho-feliz,
.dealbert .m-brilhos {
    display: none;
}

.dealbert.pose-voando .m-asa-voo {
    display: inline;
}

.dealbert.pose-voando .m-asa-fechada,
.dealbert.pose-voando .m-pes {
    display: none;
}

.dealbert.pose-feliz .m-olho {
    display: none;
}

.dealbert.pose-feliz .m-olho-feliz,
.dealbert.pose-feliz .m-brilhos {
    display: inline;
}

/* pivôs em coordenadas do desenho (viewBox -12 -10 50 44) */
.dealbert .m-asa-voo {
    transform-box: view-box;
    /* com view-box, a origem é a do sistema de coordenadas do desenho: o
       ombro (6,17) é escrito direto, sem descontar o -12 -10 da viewBox */
    transform-origin: 6px 17px;
    transform: rotate(-6deg);
}

.dealbert .m-olho {
    transform-box: fill-box;
    transform-origin: center;
}

.dealbert .m-brilho {
    transform-box: fill-box;
    transform-origin: center;
}

/* ---------- movimento ---------- */
@media (prefers-reduced-motion: no-preference) {
    .dealbert.pose-voando .m-asa-voo {
        animation: m-bater 0.28s ease-in-out infinite alternate;
    }

    .dealbert.pose-pousado .m-olho {
        animation: m-piscar 4.5s ease-in-out infinite;
    }

    .dealbert.pose-feliz .m-tucano {
        animation: m-pulinho 0.45s ease-out 2;
    }

    .dealbert.pose-feliz .m-brilho {
        animation: m-brilhar 1.1s ease-in-out infinite;
    }

    .dealbert.pose-feliz .m-brilho-2 {
        animation-delay: 0.25s;
    }

    .dealbert.pose-feliz .m-brilho-3 {
        animation-delay: 0.5s;
    }

    /* na barra, cada tucano pisca num ritmo um pouco diferente do do site */
    .dealbert-barra.pose-pousado .m-olho {
        animation-duration: 5.2s;
    }
}

@keyframes m-bater {
    from { transform: rotate(-18deg); }
    to { transform: rotate(10deg); }
}

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

@keyframes m-pulinho {
    0%, 100% { transform: translateY(0); }
    40% { transform: translateY(-4px); }
}

@keyframes m-brilhar {
    0%, 100% { opacity: 0.25; transform: scale(0.6); }
    50% { opacity: 1; transform: scale(1); }
}