/* SELL + BUY pixel buddies (js/landing.js initBots): used by the home hero and the About page.
   Each page sizes its .scene; the bots are drawn in --u units (one bot pixel). */

/* ---------- Scene + SELL / BUY pixel buddies ----------
   --u is one bot pixel (the home hero scene is 220u wide on desktop). Both bots are 23u wide and
   stand --edge u from the right, --gap u apart. */
.scene {
    position: absolute;
    inset: 0;
    container-type: size;
    --u: calc(100cqw / 220);
    --edge: 8;
    --gap: 3;
    --ground: 4;
}

.bot {
    position: absolute;
    bottom: calc(var(--u) * var(--ground));
    width: calc(var(--u) * 23);
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: translate 0.2s steps(2);
}

.bot-sell {
    right: calc(var(--u) * (var(--edge) + 23 + var(--gap)));
}

.bot-buy {
    right: calc(var(--u) * var(--edge));
}

.bot:focus-visible {
    outline: 2px solid var(--sell-bright);
    outline-offset: 4px;
}

.bot-art {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}

/* BUY faces SELL */
.bot-buy .bot-art {
    transform: scaleX(-1);
}

.bot-art g {
    transform-box: fill-box;
}

/* BUY's badge is mirrored in the SVG itself (transform attribute), which needs the normal SVG coordinates */
.bot-art .bag-badge {
    transform-box: view-box;
}

/* idle: the upper body breathes one pixel, out of step with the other bot */
.bot-upper {
    animation: bot-breathe 1.6s steps(1, jump-end) infinite;
}

.bot-buy .bot-upper {
    animation-delay: -0.8s;
}

@keyframes bot-breathe {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-1px); }
}

/* eyes follow the cursor (landing.js sets --look-x / --look-y in whole pixels) */
.bot-eyes-look {
    transform: translate(var(--look-x, 0px), var(--look-y, 0px));
    transition: transform 0.1s steps(1);
}

.bot-eyes {
    transform-origin: center;
}

.bot.is-blinking .bot-eyes {
    transform: scaleY(0.3);
}

/* expressions (js/landing.js express): a pixel face is drawn over the eyes, so the plain eyes step aside */
.bot.has-expr .bot-eyes {
    visibility: hidden;
}

.bot.expr-shock .bot-art {
    animation: bot-shake 0.3s steps(1) 3;
}

.bot.expr-bleh .bot-art {
    animation: bot-wiggle 0.36s steps(1) 3;
}

.bot.expr-sleepy .bot-upper {
    animation: bot-nod 2.4s steps(1) infinite;
}

.bot.expr-smug .bot-hat {
    translate: 0 1px;
}

@keyframes bot-shake {
    0%, 100% { translate: 0 0; }
    25% { translate: -1px 0; }
    75% { translate: 1px 0; }
}

@keyframes bot-wiggle {
    0%, 100% { translate: 0 0; }
    33% { translate: 0 -1px; }
    66% { translate: 1px 0; }
}

@keyframes bot-nod {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(1px); }
}

.bot-fx-zzz {
    width: calc(var(--u) * 2);
}

.bot-jump {
    transform-origin: 50% 100%;
}

.bot-shadow {
    transform-origin: center;
}

.bot-hat {
    transform-origin: 50% 100%;
}

.bot-bag {
    transform-origin: 50% 0;
}

.bot.is-hopping .bot-jump {
    animation: bot-hop 0.6s steps(6) both;
}

.bot.is-hopping .bot-shadow {
    animation: bot-shadow 0.6s steps(6) both;
}

.bot.is-hopping .bot-hat,
.bot.is-excited .bot-hat {
    animation: bot-hat 0.5s steps(4) both;
}

.bot.is-hopping .bot-bag,
.bot.is-excited .bot-bag {
    animation: bot-bag 0.6s steps(4) both;
}

@keyframes bot-hop {
    0% { translate: 0 0; scale: 1 1; }
    15% { translate: 0 0; scale: 1.08 0.88; }
    45% { translate: 0 -4px; scale: 0.95 1.06; }
    75% { translate: 0 0; scale: 1.06 0.92; }
    100% { translate: 0 0; scale: 1 1; }
}

@keyframes bot-shadow {
    0%, 100% { scale: 1 1; }
    45% { scale: 0.7 1; }
}

/* hat flaps and bag swings in whole pixels so the art stays crisp */
@keyframes bot-hat {
    0%, 100% { translate: 0 0; }
    25% { translate: -1px -1px; }
    50% { translate: 0 -2px; }
    75% { translate: 1px -1px; }
}

@keyframes bot-bag {
    0%, 100% { translate: 0 0; }
    30% { translate: -1px 1px; }
    70% { translate: 1px 0; }
}

/* high five: lean in toward the badge */
.scene.is-high-five .bot-sell {
    translate: calc(var(--u) * 1.5) 0;
}

.scene.is-high-five .bot-buy {
    translate: calc(var(--u) * -1.5) 0;
}

/* speech bubble */
.bot-bubble {
    position: absolute;
    bottom: calc(100% + 6px);
    z-index: 2;
    padding: 8px 12px;
    border: 2px solid;
    border-radius: 4px;
    background: var(--white);
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 14px;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--ink);
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transform: translateY(6px) scale(0.6);
    transition: opacity 0.12s steps(2), transform 0.2s steps(3);
}

.bot-bubble::after {
    content: "";
    position: absolute;
    top: 100%;
    width: 8px;
    height: 8px;
    border: 2px solid;
    border-top: 0;
    border-left: 0;
    border-color: inherit;
    background: var(--white);
    transform: translateY(-4px) rotate(45deg);
}

.bot-sell .bot-bubble {
    left: 0;
    border-color: var(--sell);
    box-shadow: 3px 3px 0 var(--sell);
    transform-origin: 30% 100%;
}

.bot-sell .bot-bubble::after {
    left: 30%;
}

.bot-buy .bot-bubble {
    right: 0;
    border-color: var(--buy);
    box-shadow: 3px 3px 0 var(--buy);
    transform-origin: 70% 100%;
}

.bot-buy .bot-bubble::after {
    right: 30%;
}

.bot.has-bubble .bot-bubble {
    opacity: 1;
    transform: none;
}

/* little pixel hearts that float up on hover / tap */
.bot-fx {
    position: absolute;
    left: var(--fx-x, 50%);
    top: 20%;
    width: calc(var(--u) * 2.5);
    pointer-events: none;
    animation: bot-fx 0.9s steps(6) forwards;
}

.bot-fx svg {
    display: block;
    width: 100%;
    height: auto;
}

@keyframes bot-fx {
    0% { opacity: 0; translate: 0 0; }
    20% { opacity: 1; }
    100% { opacity: 0; translate: 0 calc(var(--u) * -6); }
}

/* sitting pose: the upper body drops onto the ground (3 leg pixels) and the legs stick out front */
.bot-leg-sit {
    display: none;
}

.bot.is-sitting .bot-leg {
    display: none;
}

.bot.is-sitting .bot-leg-sit {
    display: inline;
}

.bot.is-sitting .bot-upper {
    translate: 0 3px;
}

/* the bag gets set down on the ground beside them */
.bot-sell.is-sitting .bot-bag {
    translate: 0 -3px;
}

.bot-buy.is-sitting .bot-bag {
    translate: 0 -2px;
}

/* walking: the legs take turns lifting a pixel */
.bot.is-walking .bot-leg-l {
    animation: bot-step 0.28s steps(1) infinite;
}

.bot.is-walking .bot-leg-r {
    animation: bot-step 0.28s steps(1) infinite -0.14s;
}

@keyframes bot-step {
    50% { translate: 0 -1px; }
}

/* BUY can turn to face right (when it sits on the counter facing the owner) */
.bot-buy.faces-right .bot-art,
.bot-buy.faces-right .bag-badge {
    transform: none;
}

.bot-buy.faces-right .bot-bubble {
    right: auto;
    left: 0;
    transform-origin: 30% 100%;
}

.bot-buy.faces-right .bot-bubble::after {
    right: auto;
    left: 30%;
}