/* ============================================================
   Ajebhom as an actor in a landing's hero scene (ajebhom-actor.js): the stacked stills, the float, the speech
   bubble. Generic; each page places the actor and sets its size:
     --ab-size   the robot's frame (square)
     --ab-peek   how much of it shows above a card's edge (the rest is cut there); leave unset to show it whole
   The bubble's tail points toward the robot at its inline-start side; .ab-say-down points it down at the head.
   ============================================================ */

.ab-actor {
    position: absolute;
    z-index: 1;
    width: var(--ab-size, 140px);
}

/* only the bottom is cut (at the card's edge); hops and arms may go past the other sides */
.ab-window {
    height: var(--ab-peek, auto);
    clip-path: inset(-300px -200px 0 -200px);
}

.ab-float {
    position: relative;
    width: var(--ab-size, 140px);
    height: var(--ab-size, 140px);
    animation: ab-float 3.2s ease-in-out infinite;
}

@keyframes ab-float {
    50% { transform: translateY(-5px); }
}

.ab-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
}

    .ab-img.is-on {
        opacity: 1;
    }

.ab-say {
    position: absolute;
    width: max-content;
    margin: 0 !important;
    padding: 9px 14px;
    border-radius: 14px;
    background: var(--ds-surface);
    border: 1px solid var(--ds-line);
    border-top: 3px solid var(--ds-red);
    box-shadow: var(--ds-shadow-md);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.7;
    color: var(--ds-ink);
}

    .ab-say.is-in {
        animation: ab-pop .35s cubic-bezier(.34, 1.56, .64, 1);
    }

    .ab-say[hidden] {
        display: none;
    }

    /* the tail, toward the robot at the inline-start side */
    .ab-say::after {
        content: "";
        position: absolute;
        bottom: 12px;
        inset-inline-start: -8px;
        width: 14px;
        height: 14px;
        background: var(--ds-surface);
        border-bottom: 1px solid var(--ds-line);
        border-inline-start: 1px solid var(--ds-line);
        transform: rotate(45deg);
    }

html[dir="rtl"] .ab-say::after {
    transform: rotate(-45deg);
}

@keyframes ab-pop {
    from { opacity: 0; transform: translateY(6px) scale(.94); }
}

@media (prefers-reduced-motion: reduce) {
    .ab-float,
    .ab-say.is-in {
        animation: none;
    }
}