/*
 * Botão flutuante de WhatsApp
 *
 * Tema: Altéria
 * Ficheiro: assets/css/whatsapp.css
 */

.wa-float {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 350;
    display: grid;
    width: 58px;
    height: 58px;
    place-items: center;
    border-radius: 50%;
    background-color: var(--color-gold);
    color: var(--color-navy);
    box-shadow: 0 10px 28px rgba(5, 16, 35, 0.28);
    transition:
        transform 320ms cubic-bezier(0.22, 1, 0.36, 1),
        background-color 260ms ease,
        color 260ms ease,
        box-shadow 320ms ease;
    animation: wa-enter 600ms cubic-bezier(0.22, 1, 0.36, 1) 1.2s both;
}

.wa-float__icon {
    width: 30px;
    height: 30px;
    transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes wa-enter {
    from {
        opacity: 0;
        transform: scale(0.4) translateY(12px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* ---------------------------------------------------------------- */
/* Pulso de chamada                                                   */
/* ---------------------------------------------------------------- */

/*
 * Anel que se expande e desvanece, a cada 3,5 segundos. O intervalo
 * longo é deliberado: um pulso contínuo lê-se como anúncio e cansa;
 * espaçado, apenas chama o olhar de vez em quando.
 */
.wa-float::before {
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: 50%;
    background-color: var(--color-gold);
    animation: wa-pulse 3.5s cubic-bezier(0.22, 1, 0.36, 1) 2.4s infinite;
    content: "";
}

@keyframes wa-pulse {
    0% {
        opacity: 0.55;
        transform: scale(1);
    }
    40%,
    100% {
        opacity: 0;
        transform: scale(1.75);
    }
}

/* ---------------------------------------------------------------- */
/* Hover: a bolha dourada dá lugar à pastilha azul                    */
/* ---------------------------------------------------------------- */

/*
 * A etiqueta nasce por baixo do botão redondo e desliza para a
 * esquerda. Ao mesmo tempo o dourado desaparece — fundo transparente
 * e sem sombra — de modo que o que se vê é uma única pastilha azul
 * contínua com o ícone lá dentro. Ao sair o rato, o dourado volta.
 */
.wa-float::after {
    position: absolute;
    right: 0;
    z-index: -2;
    padding: 0 62px 0 20px;
    border-radius: 999px;
    background-color: var(--color-navy);
    color: var(--color-white);
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 58px;
    white-space: nowrap;
    opacity: 0;
    transform: translateX(12px);
    transition:
        opacity 300ms ease,
        transform 380ms cubic-bezier(0.22, 1, 0.36, 1);
    pointer-events: none;
    content: "Fale connosco";
}

.wa-float:hover,
.wa-float:focus-visible {
    background-color: transparent;
    color: var(--color-white);
    box-shadow: none;
}

.wa-float:hover .wa-float__icon,
.wa-float:focus-visible .wa-float__icon {
    transform: rotate(-8deg) scale(1.08);
}

.wa-float:hover::after,
.wa-float:focus-visible::after {
    opacity: 1;
    transform: translateX(0);
}

/* O pulso pára enquanto o rato está em cima — já tem a atenção */
.wa-float:hover::before,
.wa-float:focus-visible::before {
    animation: none;
    opacity: 0;
}

.wa-float:focus-visible {
    outline: 2px solid var(--color-light-gold);
    outline-offset: 3px;
}

/* ---------------------------------------------------------------- */
/* Convivência com o banner de cookies                                */
/* ---------------------------------------------------------------- */

/*
 * Enquanto o aviso de cookies está visível, o botão sobe para não
 * ficar por baixo dele. O seletor irmão funciona porque ambos são
 * renderizados no wp_footer, com o banner primeiro.
 */
.consent.is-visible ~ .wa-float {
    transform: translateY(-96px);
}

/* ---------------------------------------------------------------- */
/* Responsivo                                                         */
/* ---------------------------------------------------------------- */

@media (max-width: 768px) {

    .wa-float {
        right: 16px;
        bottom: 16px;
        width: 52px;
        height: 52px;
    }

    .wa-float__icon {
        width: 27px;
        height: 27px;
    }

    /*
     * Sem rato não há hover. A etiqueta é escondida e, com ela, tem de
     * cair também a troca de cores: num toque o :hover fica "colado" e
     * o botão ficaria transparente com o ícone branco sobre o fundo da
     * página.
     */
    .wa-float::after {
        display: none;
    }

    .wa-float:hover,
    .wa-float:focus-visible {
        background-color: var(--color-gold);
        color: var(--color-navy);
        box-shadow: 0 10px 28px rgba(5, 16, 35, 0.28);
    }

    .consent.is-visible ~ .wa-float {
        transform: translateY(-172px);
    }
}

/* ---------------------------------------------------------------- */
/* Movimento reduzido                                                 */
/* ---------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

    .wa-float,
    .wa-float__icon,
    .wa-float::before,
    .wa-float::after {
        animation: none;
        transition: none;
    }

    .wa-float::before {
        display: none;
    }
}