/* The Clanker kit (js/clanker.js): a strip fixed to the bottom of the window that lets clicks
   through; only the robot (.clanker-hit) takes them. Own colours, so any page can use it.
   --clanker-z: 25 sits above page content but under the storefront's sticky header, menus,
   cart drawer and modals (Hyva z-30 and up); a page can set its own. */
.clanker { --clanker-z: 25; }
.clanker-strip {
    position: fixed; left: 0; right: 0; bottom: 0; height: 170px; z-index: var(--clanker-z);
    overflow: hidden; pointer-events: none;
}
.clanker-view { position: absolute; left: 0; bottom: 0; width: 340px; height: 170px; will-change: transform; }
.clanker-view canvas { display: block; width: 340px; height: 170px; }
.clanker-hit {
    position: absolute; left: 0; bottom: 12px; width: 76px; height: 122px;
    pointer-events: auto; cursor: pointer; border-radius: 14px; outline: none; will-change: transform;
}
.clanker-hit:focus-visible { outline: none; box-shadow: 0 0 0 2px #38bdf8; }
.clanker-bubble {
    --tail: 24px;
    position: fixed; left: 0; bottom: 136px; z-index: calc(var(--clanker-z) + 1); margin: 0;
    width: max-content; max-width: 280px; min-height: 34px; padding: 8px 40px 8px 12px;  /* right: the sound button */
    background: #1d2844; color: #e8ecf5; border: 1px solid #f59e0b;
    border-radius: 10px; font-size: 13px; line-height: 1.35; text-align: left;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .45);
    opacity: 0; transform: translateY(4px); transition: opacity .35s, transform .35s; pointer-events: none;
}
.clanker-bubble::after {
    content: ""; position: absolute; left: var(--tail); bottom: -7px; width: 12px; height: 12px;
    background: #1d2844; border-right: 1px solid #f59e0b; border-bottom: 1px solid #f59e0b;
    transform: rotate(45deg);
}
.clanker-bubble[hidden] { display: none; }
/* The words he has said so far; the rest keeps its space (invisible) so the bubble does not grow */
.clanker-rest { color: transparent; }
.clanker-sr {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* Sound on/off: a 32 px button in the bubble's top-right corner; the bubble lets clicks through, the button does not */
.clanker-mute {
    position: absolute; top: 1px; right: 2px; width: 32px; height: 32px; margin: 0; padding: 0;
    display: grid; place-items: center; border: 0; border-radius: 8px; background: none;
    color: #9aa6c0; cursor: pointer; pointer-events: auto;
}
.clanker-mute:hover { color: #fbbf24; background: rgba(255, 255, 255, .06); }
.clanker-mute:focus-visible { outline: none; box-shadow: 0 0 0 2px #38bdf8; color: #fbbf24; }
.clanker-mute .clanker-off { display: none; }
.clanker-mute[aria-pressed="true"] .clanker-on { display: none; }
.clanker-mute[aria-pressed="true"] .clanker-off { display: inline; }
.clanker-bubble.is-shown { opacity: 1; transform: none; }
.clanker-bubble.is-poked { animation: clanker-poked .45s ease-out; }
@keyframes clanker-poked {
    0%, 100% { rotate: 0deg; translate: 0 0; }
    25% { rotate: -4deg; translate: 0 -5px; }
    60% { rotate: 3deg; translate: 0 -2px; }
}
/* Dust where he lands when he trips */
.clanker-dust { position: absolute; bottom: 6px; width: 96px; height: 34px; margin-left: -48px; opacity: 0; }
.clanker-dust::before, .clanker-dust::after {
    content: ""; position: absolute; bottom: 0; width: 34px; height: 22px; border-radius: 50%;
    background: radial-gradient(circle, rgba(200, 208, 225, .75), rgba(200, 208, 225, 0) 70%);
}
.clanker-dust::before { left: 4px; }
.clanker-dust::after { right: 4px; }
.clanker-dust.is-puff { animation: clanker-dust .8s ease-out; }
@keyframes clanker-dust {
    0% { opacity: .95; transform: scale(.35, .5); }
    100% { opacity: 0; transform: scale(1.7, 1.2) translateY(-8px); }
}
/* Out of sight while a box marked data-clanker-avoid is where he stands (mascot_avoid.js); back with a fade.
   The bubble hides while it has no room clear of those boxes. */
.clanker.is-away .clanker-strip, .clanker.is-away .clanker-bubble, .clanker-bubble.is-blocked { visibility: hidden; }
.clanker.is-back .clanker-view { animation: clanker-back .4s ease-out; }
@keyframes clanker-back { from { opacity: 0; } to { opacity: 1; } }
/* Switched off (mascot_switch.js) */
.clanker[hidden] { display: none; }
/* His X: beside his head while the pointer is on him (or a few seconds after a tap) */
.clanker-close {
    position: absolute; left: 0; bottom: 108px; width: 28px; height: 28px; margin: 0; padding: 0;
    display: grid; place-items: center; border: 1px solid #f59e0b; border-radius: 50%;
    background: #1d2844; color: #e8ecf5; font: 600 13px/1 system-ui, sans-serif; cursor: pointer;
    opacity: 0; pointer-events: none; transition: opacity .2s; will-change: transform;
}
.clanker.is-near .clanker-close, .clanker-close:focus-visible { opacity: 1; pointer-events: auto; }
.clanker-close:hover, .clanker-close:focus-visible { color: #fbbf24; outline: none; box-shadow: 0 0 0 2px #38bdf8; }
/* Tucked at the side while the visitor reads: a small bubble pinned to that side */
.clanker-bubble.is-compact { max-width: 190px; font-size: 12px; line-height: 1.3; padding: 6px 34px 6px 10px; min-height: 30px; }
.clanker-bubble.is-compact.is-quiet { opacity: 0; visibility: hidden; transition: opacity .6s, visibility 0s .6s; }
@media (prefers-reduced-motion: reduce) { .clanker-bubble.is-compact.is-quiet { transition: none; } }
.clanker-bubble.is-compact .clanker-mute { top: 0; width: 28px; height: 28px; }
/* The footer's Hide / Show Clanker button: looks like the footer's small print */
.clanker-toggle {
    margin: 0 0 0 .75em; padding: 0; border: 0; background: none; font: inherit; font-size: .875rem;
    color: inherit; opacity: .8; text-decoration: underline; text-underline-offset: 2px; cursor: pointer;
}
.clanker-toggle:hover, .clanker-toggle:focus-visible { opacity: 1; }
.clanker-toggle-row { margin: 1.5em 0 2em; text-align: center; }