/* Lojic Loop — floating WhatsApp button
   Brand purple rather than WhatsApp green: the palette has three colours and
   the glyph already carries the recognition. */

.wa {
    position: fixed;
    right: clamp(1rem, 2.5vw, 1.9rem);
    bottom: clamp(1rem, 2.5vw, 1.9rem);
    z-index: 90;

    display: inline-flex;
    align-items: center;
    /* No gap: the label collapses to max-width 0 but stays a flex item, so a
       gap here survives the collapse and pushes the glyph off centre. The
       label carries its own margin instead, applied only when it expands. */
    gap: 0;

    height: 56px;
    padding: 0 6px;                       /* symmetric, so the collapsed button
                                             is 56x56 with the circle centred */
    border-radius: 100px;

    background: var(--purple);
    color: var(--white);
    box-shadow: 0 10px 30px rgba(110, 56, 207, .32);

    transition:
        transform .42s var(--ease),
        box-shadow .42s var(--ease),
        padding .42s var(--ease);
}

.wa:hover,
.wa:focus-visible {
    transform: translateY(-3px);
    box-shadow: 0 16px 40px rgba(110, 56, 207, .42);
    padding-left: 1.25rem;
}

/* Icon -------------------------------------------------------------------- */

.wa-icon {
    /* Positioned so it paints ABOVE .wa-ring: the ring is absolute, and an
       absolutely positioned sibling paints over an in-flow one whatever the
       DOM order, which was tinting the white disc purple. */
    position: relative;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    border-radius: 50%;
    background: var(--white);
    color: var(--purple);
    transition: transform .5s var(--ease);
}

.wa:hover .wa-icon {
    transform: rotate(8deg) scale(1.04);
}

/* Label — collapsed by default, expands on hover --------------------------- */

.wa-label {
    max-width: 0;
    overflow: hidden;
    white-space: nowrap;
    opacity: 0;
    font-size: var(--step--1);
    font-weight: 400;
    letter-spacing: .01em;
    margin-right: 0;
    transition:
        max-width .5s var(--ease),
        margin-right .5s var(--ease),
        opacity .32s var(--ease-soft);
}

.wa:hover .wa-label,
.wa:focus-visible .wa-label {
    max-width: 150px;
    margin-right: .7rem;
    opacity: 1;
}

/* Attention ring ----------------------------------------------------------- */

.wa-ring {
    position: absolute;
    right: 6px;
    bottom: 6px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--purple);
    opacity: .55;
    pointer-events: none;
    animation: ll-pulse-ring 2.8s var(--ease-soft) infinite;
}

.wa:hover .wa-ring {
    animation-play-state: paused;
    opacity: 0;
}

/* Tip ---------------------------------------------------------------------
   The standing invitation, so the button reads as an offer rather than as an
   unexplained icon. It bobs gently on its own and gets out of the way the
   moment the pointer arrives, since the inline label takes over from there --
   the two never show the same words at once.

   The bob owns `transform` and the hover fade owns `opacity`, which is what
   lets an infinite animation and a hover transition coexist on one element. */

.wa-tip {
    position: absolute;
    right: 0;
    bottom: calc(100% + 11px);
    padding: .42rem .72rem;
    border-radius: 9px;
    background: var(--white);
    color: var(--ink);
    font-size: var(--step--1);
    font-weight: 400;
    letter-spacing: .01em;
    white-space: nowrap;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .16);
    pointer-events: none;
    animation: ll-wa-bob 3.6s var(--ease-soft) infinite;
    transition: opacity .28s var(--ease-soft);
}

/* The tail, pointing back down at the button. */
.wa-tip::after {
    content: "";
    position: absolute;
    top: 100%;
    right: 20px;
    border: 6px solid transparent;
    border-top-color: var(--white);
}

.wa:hover .wa-tip,
.wa:focus-visible .wa-tip {
    opacity: 0;
}

/* Never let the button sit on top of the footer CTA on small screens -------- */

@media (max-width: 560px) {
    .wa {
        height: 52px;
        padding: 0 5px;                   /* (52 - 42) / 2, so the smaller
                                             button stays square and centred */
    }

    .wa-icon {
        width: 42px;
        height: 42px;
        flex-basis: 42px;
    }

    .wa-ring {
        width: 42px;
        height: 42px;
    }

    /* Label would crowd a phone screen; the glyph is enough. */
    .wa:hover .wa-label,
    .wa:focus-visible .wa-label {
        max-width: 0;
        opacity: 0;
    }

    .wa:hover {
        padding-left: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .wa-ring {
        animation: none;
        opacity: 0;
    }

    /* The tip stays: it is the invitation. Only the bobbing stops. */
    .wa-tip {
        animation: none;
    }
}