/* ==========================================================
   MISTERIO WHATSAPP TRACKER
========================================================== */

.misterio-wa-button{
    position:fixed;
    bottom:var(--mwa-desktop-bottom);
    z-index:99999;

    width:var(--mwa-desktop-size);
    height:var(--mwa-desktop-size);

    display:flex;
    align-items:center;
    justify-content:center;

    color:var(--mwa-icon) !important;
    background:var(--mwa-bg) !important;

    border:0 !important;
    border-radius:50%;
    box-shadow:0 12px 34px rgba(0,0,0,.18);

    text-decoration:none !important;

    transform:translateZ(0);
    transform-origin:center;

    transition:
        opacity .28s ease,
        visibility .28s ease,
        transform .28s ease,
        box-shadow .25s ease,
        filter .25s ease;
}

.misterio-wa-button--right{
    right:var(--mwa-desktop-side);
}

.misterio-wa-button--left{
    left:var(--mwa-desktop-side);
}

.misterio-wa-button:hover,
.misterio-wa-button:focus-visible{
    color:var(--mwa-icon) !important;
    transform:translateY(-3px) scale(1.04);
    box-shadow:0 16px 38px rgba(0,0,0,.24);
    filter:brightness(1.03);
}

.misterio-wa-button:focus-visible{
    outline:3px solid rgba(37,211,102,.28);
    outline-offset:4px;
}

.misterio-wa-button__icon{
    position:relative;
    z-index:2;

    width:64%;
    height:64%;

    display:block;
}

.misterio-wa-button__pulse{
    position:absolute;
    inset:0;

    border-radius:inherit;
    border:2px solid var(--mwa-bg);

    opacity:0;
    pointer-events:none;
}

.misterio-wa-animation--pulse .misterio-wa-button__pulse{
    animation:misterioWaPulse 2.4s ease-out infinite;
}

.misterio-wa-animation--soft{
    animation:misterioWaSoft 4.2s ease-in-out infinite;
}

@keyframes misterioWaPulse{
    0%{
        opacity:.52;
        transform:scale(.92);
    }

    75%,
    100%{
        opacity:0;
        transform:scale(1.45);
    }
}

@keyframes misterioWaSoft{
    0%, 78%, 100%{
        transform:translateY(0) scale(1);
    }

    84%{
        transform:translateY(-3px) scale(1.04);
    }

    90%{
        transform:translateY(0) scale(1);
    }
}

.misterio-wa-button--footer-visible{
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:translateY(24px) scale(.88);
}

@media (max-width:767px){
    .misterio-wa-button{
        bottom:var(--mwa-mobile-bottom);
        width:var(--mwa-mobile-size);
        height:var(--mwa-mobile-size);
    }

    .misterio-wa-button--right{
        right:var(--mwa-mobile-side);
    }

    .misterio-wa-button--left{
        left:var(--mwa-mobile-side);
    }
}

@media (prefers-reduced-motion:reduce){
    .misterio-wa-button,
    .misterio-wa-button__pulse{
        animation:none !important;
        transition:none !important;
    }
}