/* =====================================================================
   bee.css — the look of bee.js: cestaudi's bee, on a page of its own,
   and its menu (talking to it).
   ===================================================================== */

/* where it lives: in the middle of the garden */
.front .bee-home {
    --bee-y: #f2c230;
    --lift: 0;
    --tilt: 0;
    --mouth: 0;
    --face: 1;
    --w: clamp(150px, 24vw, 300px);
    position: absolute;
    left: calc(50% - var(--w) / 2);
    top: 48%;
    width: var(--w);
    aspect-ratio: 120 / 100;
    z-index: 2;
    pointer-events: none;
    transition: left 1.2s cubic-bezier(.45, .05, .3, 1), top 1.2s cubic-bezier(.45, .05, .3, 1), width 1.2s cubic-bezier(.45, .05, .3, 1);
}
/* talking: it flies over beside the menu (and turns to face it) */
body.bee-talking .front .bee-home {
    left: 58%;
    top: 32%;
    --face: -1;
}
@media (max-width: 620px) {
    body.bee-talking .front .bee-home { left: calc(50% - var(--w) / 2); top: 10%; --w: 130px; --face: 1; }
}
@media (max-height: 500px) and (min-width: 621px) {
    body.bee-talking .front .bee-home { left: 64%; top: 30%; --w: 150px; }
}

.bee-home .bee {
    position: absolute;
    inset: 0;
    display: block;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    pointer-events: auto;
    -webkit-tap-highlight-color: transparent;
}
/* two bees (bee.js, the pair): her on the right, the other one on the left, facing each other */
body.bee-duet .front .bee-home:not(.second) { left: calc(66% - var(--w) / 2); --face: -1; }
.front .bee-home.second { left: calc(30% - var(--w) / 2); top: 50%; --face: 1; }
body.bee-talking.bee-duet .front .bee-home:not(.second) { left: 54%; top: 26%; --face: 1; }
body.bee-talking .front .bee-home.second { left: 76%; top: 46%; --face: -1; }
@media (max-width: 620px) {
    body.bee-talking.bee-duet .front .bee-home:not(.second) { left: 14%; top: 8%; --w: 120px; --face: 1; }
    body.bee-talking .front .bee-home.second { left: 58%; top: 10%; --w: 120px; --face: -1; }
}
.bee-home.look-colour .bee-fly { filter: hue-rotate(var(--hue, 0deg)) saturate(var(--sat, .8)) brightness(.96); }
/* coming and going through the hive's door (bee.js, the bees) */
.front .bee-home.second,
.front .bee-home.swarm,
body.bee-swarm .front .bee-home {
    transition: left 1.6s cubic-bezier(.45, .05, .3, 1), top 1.6s cubic-bezier(.45, .05, .3, 1), width 1.2s cubic-bezier(.45, .05, .3, 1), scale 1.6s cubic-bezier(.45, .05, .3, 1), opacity 1.2s;
}
.front .bee-home.at-hive { scale: .12; opacity: 0; }

/* inside the hive (bee.js, the swarm): warm and dark, the comb on a canvas; the way in opens from the hive's door */
.hive-scene {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 45%, #6b3d12 0%, #3d2008 55%, #1e0f04 100%);
    opacity: 0;
    visibility: hidden;
    transform: scale(.04);
    transition: transform 1.2s cubic-bezier(.6, 0, .3, 1), opacity .8s, visibility 0s 1.2s;
    pointer-events: none;
}
.hive-scene canvas { display: block; }
.front.in-hive .hive-scene {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: transform 1.2s cubic-bezier(.6, 0, .3, 1), opacity .6s;
}
.front.in-hive .title { opacity: 0; }
.front.in-hive .bee-trail { display: none; }
body.bee-duet .front .bee-home { --w: clamp(120px, 18vw, 230px); }
.hive-leave {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 4;
    display: none;
    padding: 4px 16px 5px;
    border: 2px solid #c9973c;
    border-radius: 999px;
    background: rgba(61, 32, 8, .85);
    color: #f7e6b4;
    cursor: pointer;
    font: italic 1rem "IM Fell English", Georgia, serif;
}
.hive-leave:hover { border-color: #f3dc9e; }
.front.in-hive .hive-leave { display: block; }
.hive-leave.save { top: 58px; }
.hive-leave.replay { top: 100px; }
.front .bee-home.in-hive-bee { --w: clamp(64px, 7vw, 96px); }
.front .bee-home.in-hive-bee.queen { --w: clamp(88px, 10vw, 130px); }
.bee-home.swarm.focus .bee-art,
.front.in-hive .bee-home.focus .bee-art { filter: drop-shadow(0 0 6px rgba(255, 236, 170, .9)); }

/* the queen's crown, on top of her head (in the picture's own left-facing space, so it turns with her) */
.bee-home .bee-art .bee-crown {
    position: absolute;
    left: 25%;
    top: 4%;
    width: 24%;
    translate: -50% 0;
    rotate: -12deg;
    filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .35));
}
.bee-home .bee-art .bee-crown svg { display: block; width: 100%; height: auto; }
.bee-home.look-little .bee-fly { scale: .72; }

/* a sting (bee.js dive): right up to the screen and back */
.bee-home.diving .bee {
    animation: bee-dive .95s cubic-bezier(.3, 0, .3, 1);
}
@keyframes bee-dive {
    0%   { scale: 1; translate: 0 0; }
    32%  { scale: 3.2; translate: var(--dive-x) var(--dive-y); }
    40%  { scale: 3.2; translate: calc(var(--dive-x) - 6px) calc(var(--dive-y) + 4px); }
    48%  { scale: 3.2; translate: calc(var(--dive-x) + 6px) calc(var(--dive-y) - 4px); }
    56%  { scale: 3.2; translate: var(--dive-x) var(--dive-y); }
    100% { scale: 1; translate: 0 0; }
}

/* dead (bee.js die): no more hovering, grey, upside down in the grass */
.bee-home.dead .bee-fly {
    animation: none;
    transform: translateY(70%) rotate(180deg);
    transition: transform 1.4s cubic-bezier(.5, 0, .7, 1);
}
.bee-home.dead .bee-pose {
    transform: none;
    filter: grayscale(1) brightness(.78);
}

/* put somewhere (bee.js hide): gone from sight */
.bee-home .bee,
.bee-home .bee-bubble {
    transition: scale .35s cubic-bezier(.5, -.4, .6, 1), opacity .35s;
}
.bee-home.away .bee,
.bee-home.away .bee-bubble {
    scale: 0;
    opacity: 0;
    pointer-events: none;
}
.bee-home .bee:focus-visible {
    outline: 2px dashed rgba(243, 230, 194, .8);
    outline-offset: 6px;
    border-radius: 50%;
}
.bee-home .bee:hover .kh-hint,
.bee-home .bee:focus-visible .kh-hint {
    opacity: 1;
}
body.bee-talking .bee-home .bee .kh-hint {
    opacity: 0;
}

/* hovering about its flowers, a lap at a time (quicker when it's worked up, slower when it's sleepy) */
.bee-home .bee-fly {
    position: absolute;
    inset: 0;
    animation: bee-hover var(--hover, 5s) ease-in-out infinite;
}
@keyframes bee-hover {
    0%   { transform: translate(0, 0) rotate(0deg); }
    20%  { transform: translate(22%, -16%) rotate(4deg); }
    45%  { transform: translate(-6%, -26%) rotate(-3deg); }
    70%  { transform: translate(-24%, -8%) rotate(-5deg); }
    85%  { transform: translate(-10%, 6%) rotate(2deg); }
    100% { transform: translate(0, 0) rotate(0deg); }
}
body.bee-talking .bee-home .bee-fly {
    animation-name: bee-hover-close;
}
@keyframes bee-hover-close {
    0%, 100% { transform: translate(0, 0); }
    50%      { transform: translate(0, -9%); }
}
.bee-home[data-mood=scared] .bee-fly {
    animation-name: bee-hover-jitter;
}
@keyframes bee-hover-jitter {
    0%, 100% { transform: translate(0, 0); }
    25%      { transform: translate(-6%, -4%); }
    50%      { transform: translate(5%, -9%); }
    75%      { transform: translate(-3%, -2%); }
}

/* the bee as it says each word: up for a high buzz, down for a low one, leaning into a slide, squashed on every buzz */
.bee-home .bee-pose {
    position: absolute;
    inset: 0;
    transform: translateY(calc(var(--lift) * -1%)) rotate(calc(var(--tilt) * 1deg));
    transition: transform .14s ease-out, filter 2.8s ease-in;   /* (dying, her colour drains away slowly; reviving, it flows back) */
}
.bee-home .bee-pose.squash .bee-art {
    animation: bee-squash .22s ease-out;
}
@keyframes bee-squash {
    0%   { scale: 1 1; }
    35%  { scale: 1.12 .86; }
    70%  { scale: .96 1.06; }
    100% { scale: 1 1; }
}
.bee-home .bee-art {
    position: absolute;
    inset: 0;
    transform: scaleX(var(--face));
    transition: transform .5s;
    filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .35));
}
.bee-home .bee-art > svg,
.bee-home .bee-art > img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}
/* Victor's bee faces left (mine faces right), so his is turned the other way round */
.bee-home .bee-art.has-art {
    transform: scaleX(calc(var(--face) * -1));
}
/* his pieces, one on the other: the body, its face, and the face's mouth-open twin (on each buzz, if he's drawn one) */
.bee-home .bee-art > img {
    position: absolute;
    inset: 0;
}
/* where the faces sit on the body: every face moved together, in shares of the bee's width / height (in his picture's own
   left and right: more = further right, into the head). 0 0 = exactly where they're drawn on the canvas */
.bee-home .bee-art > img.face,
.bee-home .bee-art > img.face-talk {
    translate: calc(var(--bee-face-x, 3) * 1%) calc(var(--bee-face-y, 0) * 1%);
}
/* where the faces sit on the body: every face moved together, in shares of the bee's width / height (in his picture's own
   left and right: more x = further right, into the head; more y = lower). 0 0 = exactly where they're drawn on the canvas */
.bee-home .bee-art > img.face,
.bee-home .bee-art > img.face-talk {
    translate: calc(var(--bee-face-x, 3) * 1%) calc(var(--bee-face-y, 3) * 1%);
}
.bee-home .bee-art > img.face-talk,
.bee-home.mouth-open .bee-art.has-talk > img.face {
    visibility: hidden;
}
.bee-home.mouth-open .bee-art.has-talk > img.face-talk {
    visibility: visible;
}
.bee-home .bee-art.has-art > svg,
.bee-home .bee-art:not(.has-art) > img,
.bee-home .bee-art > img[hidden] {
    display: none;
}
.bee-home[data-mood=scared] .bee-art {
    animation: bee-tremble .09s linear infinite;
}
@keyframes bee-tremble {
    0%, 100% { translate: 0 0; }
    50%      { translate: 1.5% -1%; }
}
/* how it feels, in colour: redder when furious, duller when sad, pale with fright */
.bee-home[data-mood=excited] { --bee-y: #ffd02a; }
.bee-home[data-mood=loving]  { --bee-y: #f7c34c; }
.bee-home[data-mood=angry]   { --bee-y: #f08a3a; }
.bee-home[data-mood=sad]     { --bee-y: #d6bf6f; }
.bee-home[data-mood=scared]  { --bee-y: #f6df8c; }
.bee-home[data-mood=sleepy]  { --bee-y: #e2c25c; }
.bee-home[data-mood=angry] .bee-art { filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .35)) drop-shadow(0 0 6px rgba(220, 70, 30, .55)); }
.bee-home[data-mood=sad] .bee-art.has-art img { filter: saturate(.7) brightness(.92); }
.bee-home[data-mood=angry] .bee-art.has-art img { filter: sepia(.35) saturate(1.6) hue-rotate(-18deg); }

/* the drawn bee's parts */
.bee-drawn * {
    transform-box: fill-box;
}
.bee-drawn .b-wing {
    transform-origin: 50% 95%;
    animation: bee-flap var(--flap, .1s) linear infinite alternate;
}
.bee-drawn .w-back {
    animation-delay: calc(var(--flap, .1s) * -.5);
}
@keyframes bee-flap {
    from { transform: scaleY(1) rotate(0deg); }
    to   { transform: scaleY(.32) rotate(-10deg); }
}
.bee-home.buzzing .bee-drawn .b-wing {
    animation-duration: calc(var(--flap, .1s) * .55);
}
.bee-drawn .b-ant {
    transform-origin: 40% 100%;
    animation: bee-ant 2.6s ease-in-out infinite;
}
@keyframes bee-ant {
    0%, 100% { transform: rotate(0deg); }
    50%      { transform: rotate(-7deg); }
}
.bee-home[data-mood=curious] .b-ant,
.bee-home[data-mood=excited] .b-ant { animation-duration: .9s; }
.bee-home[data-mood=sleepy] .b-ant,
.bee-home[data-mood=sad] .b-ant { animation: none; transform: rotate(14deg); transform-origin: 40% 100%; }

/* its eyes: wide open, smiling (^), shut, or hearts */
.bee-drawn .e-happy,
.bee-drawn .e-shut,
.bee-drawn .e-heart { display: none; }
.bee-home[data-mood=happy] .e-open,
.bee-home[data-mood=loving] .e-open,
.bee-home[data-mood=sleepy] .e-open { display: none; }
.bee-home[data-mood=happy] .e-happy,
.bee-home[data-mood=sleepy] .e-shut,
.bee-home[data-mood=loving] .e-heart { display: inline; }
.bee-drawn .b-pupil { transform-origin: 50% 50%; transition: transform .3s; }
.bee-home[data-mood=excited] .b-pupil { transform: scale(1.18); }
.bee-home[data-mood=scared] .b-pupil  { transform: scale(.6); }
.bee-home[data-mood=curious] .b-pupil { transform: translate(-1px, -1.5px); }
.bee-home[data-mood=loving] .e-heart  { transform-origin: 50% 50%; animation: bee-beat 1.1s ease-in-out infinite; }
@keyframes bee-beat {
    0%, 100% { transform: scale(1); }
    30%      { transform: scale(1.18); }
}
/* its brow: down at the front when furious, up when sad or frightened, raised when it wonders */
.bee-drawn .b-brow { transform-origin: 50% 50%; transition: transform .3s; }
.bee-home[data-mood=angry] .b-brow   { transform: translate(-1px, 3px) rotate(17deg); }
.bee-home[data-mood=sad] .b-brow     { transform: translateY(1px) rotate(-16deg); }
.bee-home[data-mood=scared] .b-brow  { transform: translateY(-3px) rotate(-8deg); }
.bee-home[data-mood=curious] .b-brow { transform: translateY(-4px) rotate(-9deg); }
.bee-home[data-mood=excited] .b-brow { transform: translateY(-3px); }
.bee-home[data-mood=sleepy] .b-brow  { transform: translateY(2px); }
/* its cheeks */
.bee-drawn .b-cheek { opacity: .35; transition: opacity .3s; }
.bee-home[data-mood=happy] .b-cheek,
.bee-home[data-mood=excited] .b-cheek { opacity: .6; }
.bee-home[data-mood=loving] .b-cheek  { opacity: .95; }
/* its mouth: a smile (a frown when sad or cross), open with each buzz */
.bee-drawn .b-mouth {
    transform-origin: 50% 50%;
    opacity: calc(1 - var(--mouth) * 4);
}
.bee-home[data-mood=sad] .b-mouth,
.bee-home[data-mood=angry] .b-mouth,
.bee-home[data-mood=scared] .b-mouth { transform: scaleY(-1); }
.bee-drawn .b-mouth-open {
    transform-origin: 50% 0;
    transform: scaleY(calc(.35 + var(--mouth) * .9));
    opacity: calc(var(--mouth) * 4);
    transition: transform .06s;
}
/* a tear when it's sad, a bead of sweat when it's frightened */
.bee-drawn .b-tear,
.bee-drawn .b-sweat { opacity: 0; }
.bee-home[data-mood=sad] .b-tear {
    opacity: 1;
    animation: bee-drip 2.4s ease-in infinite;
}
.bee-home[data-mood=scared] .b-sweat {
    opacity: 1;
    animation: bee-drip 1.6s ease-in infinite;
}
@keyframes bee-drip {
    0%   { transform: translateY(0); opacity: 0; }
    15%  { opacity: 1; }
    80%  { transform: translateY(70%); opacity: 1; }
    100% { transform: translateY(90%); opacity: 0; }
}

/* the little puffs it lets off: hearts, tears, steam, sweat, zZz, sparks, ?, a zap */
/* its little marks come out of its face: a box centred on the face (at the front, whichever way it's facing), the marks
   placed round it like in a cartoon. --fx-x / --fx-y: where the face is, from the middle of the bee (shares of its size) */
.bee-home .bee-fx {
    --fx-x: 27%;
    --fx-y: 0%;
    position: absolute;
    left: calc(50% + var(--face) * var(--fx-x));
    top: calc(50% + var(--fx-y));
    width: 36%;
    aspect-ratio: 1;
    translate: -50% -50%;
    pointer-events: none;
}
/* Victor's bee: its face is further forward, a little lower (bee-face's own spot, nudged like the faces) */
.bee-home .bee-art.has-art ~ .bee-fx {
    --fx-x: 38%;
    --fx-y: 3%;
}
/* one mark: where it starts (--x0 forwards, --y0 down, shares of the face's box; turned round with the bee), how big */
.bee-home .bee-p {
    --x0: 25%;
    --y0: -95%;
    position: absolute;
    left: calc(50% + var(--face) * var(--x0) + var(--jx, 0%));
    top: calc(50% + var(--y0) + var(--jy, 0%));
    width: 62%;
    aspect-ratio: 1;
    translate: -50% -50%;
    opacity: 0;
    animation: bee-float 1.9s ease-out forwards;
}
.bee-home .bee-p > svg,
.bee-home .bee-p > img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}
/* hearts, notes, Zzz: float up and forwards, swaying */
@keyframes bee-float {
    0%   { transform: translate(0, 0) scale(.3) rotate(0deg); opacity: 0; }
    15%  { opacity: 1; transform: translate(calc(var(--face) * var(--dx) * .15), calc(var(--dy) * .15)) scale(1.1) rotate(calc(var(--r) * .3)); }
    25%  { transform: translate(calc(var(--face) * var(--dx) * .25), calc(var(--dy) * .25)) scale(1) rotate(calc(var(--r) * .4)); }
    60%  { opacity: 1; transform: translate(calc(var(--face) * var(--dx) * .6 + 8%), calc(var(--dy) * .6)) scale(.95) rotate(calc(var(--r) * -.4)); }
    100% { transform: translate(calc(var(--face) * var(--dx)), var(--dy)) scale(.85) rotate(var(--r)); opacity: 0; }
}
.bee-home .bee-p.fx-heart { --x0: 30%; --y0: -80%; }
.bee-home .bee-p.fx-note  { --x0: 40%; --y0: -90%; }
.bee-home .bee-p.fx-zzz   { --x0: 10%; --y0: -105%; width: 50%; animation-duration: 2.4s; animation-timing-function: ease-in-out; }

/* the cross vein: pops on its forehead and throbs, staying put */
.bee-home .bee-p.fx-vein {
    --x0: -5%;
    --y0: -78%;
    width: 58%;
    animation: bee-pop-throb 1.8s ease-out forwards;
}
@keyframes bee-pop-throb {
    0%   { transform: scale(0) rotate(-20deg); opacity: 0; }
    12%  { transform: scale(1.35) rotate(6deg); opacity: 1; }
    22%  { transform: scale(.9) rotate(0deg); }
    34%  { transform: scale(1.15); }
    46%  { transform: scale(.95); }
    58%  { transform: scale(1.12); }
    72%  { transform: scale(1); opacity: 1; }
    100% { transform: scale(.9); opacity: 0; }
}
/* the question mark: pops up over its head with a little bounce and tilt */
.bee-home .bee-p.fx-question {
    --x0: 15%;
    --y0: -110%;
    animation: bee-pop-tilt 1.9s ease-out forwards;
}
@keyframes bee-pop-tilt {
    0%   { transform: translateY(30%) scale(0); opacity: 0; }
    14%  { transform: translateY(-12%) scale(1.25) rotate(calc(var(--r) * .6)); opacity: 1; }
    26%  { transform: translateY(0) scale(1) rotate(var(--r)); }
    75%  { transform: translateY(-6%) scale(1) rotate(calc(var(--r) * -.4)); opacity: 1; }
    100% { transform: translateY(-16%) scale(.9); opacity: 0; }
}
/* sparkles: twinkle round its face, turning */
.bee-home .bee-p.fx-spark {
    --x0: 35%;
    --y0: -55%;
    width: 50%;
    animation: bee-twinkle 1.3s ease-in-out forwards;
}
@keyframes bee-twinkle {
    0%   { transform: scale(0) rotate(0deg); opacity: 0; }
    25%  { transform: scale(1.2) rotate(45deg); opacity: 1; }
    45%  { transform: scale(.6) rotate(90deg); }
    65%  { transform: scale(1.05) rotate(135deg); opacity: 1; }
    100% { transform: translate(calc(var(--face) * var(--dx) * .3), calc(var(--dy) * .3)) scale(0) rotate(200deg); opacity: 0; }
}
/* the big sweat drop: appears on the side of its head and slides slowly down */
.bee-home .bee-p.fx-sweat {
    --x0: -30%;
    --y0: -62%;
    width: 46%;
    animation: bee-slide 1.9s ease-in forwards;
}
@keyframes bee-slide {
    0%   { transform: scale(.2); opacity: 0; }
    14%  { transform: scale(1.1); opacity: 1; }
    24%  { transform: scale(1); }
    80%  { transform: translateY(40%) scale(1); opacity: 1; }
    100% { transform: translateY(55%) scale(.95); opacity: 0; }
}
/* a tear: wells at its eye and falls */
.bee-home .bee-p.fx-tear {
    --x0: 5%;
    --y0: 5%;
    width: 36%;
    animation: bee-fall 1.6s ease-in forwards;
}
@keyframes bee-fall {
    0%   { transform: scale(.3); opacity: 0; }
    25%  { transform: scale(1); opacity: 1; }
    100% { transform: translate(calc(var(--face) * var(--dx) * .2), 220%) scale(.8); opacity: 0; }
}
/* a huff of steam: blown out in front of its face, swelling as it goes */
.bee-home .bee-p.fx-steam {
    --x0: 60%;
    --y0: 15%;
    width: 52%;
    animation: bee-huff 1.1s ease-out forwards;
}
@keyframes bee-huff {
    0%   { transform: scale(.2); opacity: 0; }
    20%  { transform: translate(calc(var(--face) * 40%), 0) scale(.9); opacity: 1; }
    100% { transform: translate(calc(var(--face) * 130%), -30%) scale(1.5); opacity: 0; }
}
/* the jolt of a sting: a flash, right at its front */
.bee-home .bee-p.fx-zap {
    --x0: 70%;
    --y0: 20%;
    width: 80%;
    animation: bee-flash .9s ease-out forwards;
}
@keyframes bee-flash {
    0%   { transform: scale(.2) rotate(0deg); opacity: 0; }
    20%  { transform: scale(1.3) rotate(20deg); opacity: 1; }
    50%  { transform: scale(.9) rotate(30deg); opacity: 1; }
    100% { transform: scale(1.4) rotate(45deg); opacity: 0; }
}

/* the dotted trail it leaves as it flies (bee.js fly/drop): dots dropped behind its tail, each fading as it shrinks.
   the layer sits just before the bee, so the dots are behind it (slot: assets/living/bee-trail, one dot) */
.bee-trail {
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.front .bee-trail { z-index: 2; }
.bee-trail .bee-dot {
    position: absolute;
    aspect-ratio: 1;
    translate: -50% -50%;
    border-radius: 50%;
    background: #fff4d6;
    box-shadow: 0 0 0 1.5px rgba(42, 29, 20, .45), 0 0 5px rgba(255, 236, 170, .6);
    animation: bee-dot 2.8s ease-out forwards;
}
.bee-trail .bee-dot:has(img) {
    background: none;
    box-shadow: none;
    border-radius: 0;
}
.bee-trail .bee-dot > img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}
@keyframes bee-dot {
    0%   { opacity: .9; scale: 1; }
    100% { opacity: 0; scale: .35; }
}

/* what it's saying, over its head */
.bee-home .bee-bubble {
    position: absolute;
    left: 50%;
    bottom: 86%;                          /* (his drawing has room above her: this sits it just over her wings) */
    transform: translate(-50%, 6px);
    max-width: 34vw;
    padding: 3px 11px 4px;
    border-radius: 12px;
    background: #f6ecd2;
    box-shadow: 0 3px 8px rgba(0, 0, 0, .35);
    color: #5b3a12;
    font: italic clamp(.85rem, 1.2vw, 1.1rem) "IM Fell English", Georgia, serif;
    white-space: nowrap;
    overflow: hidden;
    direction: rtl;                       /* (the newest words stay in view; the oldest slip off the left) */
    opacity: 0;
    transition: opacity .3s, transform .3s;
    pointer-events: none;
}
.bee-home .bee-bubble span {
    direction: ltr;
    unicode-bidi: plaintext;
}
.bee-home.saying .bee-bubble:not(:empty) {
    opacity: 1;
    transform: translate(-50%, 0);
}
.bee-home .bee-bubble::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 100%;
    margin-left: -6px;
    border: 6px solid transparent;
    border-top-color: #f6ecd2;
}

@media (prefers-reduced-motion: reduce) {
    .bee-home .bee-fly,
    .bee-drawn .b-wing,
    .bee-drawn .b-ant,
    .bee-home .bee-art { animation: none !important; }
}

/* =====================================================================
   talking to it: its menu (a card in the garden)
   ===================================================================== */
.bee-talk {
    position: fixed;
    left: 20px;
    bottom: 20px;
    z-index: 8;
    display: flex;
    flex-direction: column;
    width: min(400px, calc(100vw - 40px));
    max-height: min(76vh, 640px);
    padding: 12px 14px 10px;
    border: 2px solid #8fbd72;
    border-radius: 18px;
    background: rgba(252, 250, 240, .97);
    box-shadow: 0 8px 24px rgba(40, 60, 30, .25);
    color: #2f3a24;
    font-family: "IM Fell English", Georgia, serif;
    visibility: hidden;
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .35s, transform .35s, visibility 0s .35s;
}
.bee-talk.on {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
    transition: opacity .35s, transform .35s;
}
.bee-talk .bt-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(79, 124, 58, .25);
}
.bee-talk .bt-title {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}
.bee-talk .bt-title b {
    font: normal 1.35rem "IM Fell English SC", Georgia, serif;
    color: #3f6e35;
}
.bee-talk .bt-mood {
    color: #6b7f5a;
    font-size: .95rem;
}
.bee-talk .bt-modes {
    display: flex;
    padding: 3px;
    border-radius: 999px;
    background: #e4efd8;
}
.bee-talk .bt-modes button,
.bee-talk .bt-x,
.bee-talk .bt-row button {
    border: 0;
    background: none;
    color: #5a6e48;
    cursor: pointer;
    font: italic 1rem "IM Fell English", Georgia, serif;
}
/* the sing switch: a music note (yours, assets/living/bee-sing, or the drawn one) */
.bee-talk .bt-modes .bt-sing-ic {
    display: inline-block;
    width: 1.2em;
    height: 1.2em;
    vertical-align: -.25em;
}
.bee-talk .bt-modes .bt-sing-ic > svg,
.bee-talk .bt-modes .bt-sing-ic > img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.bee-talk .bt-modes button[data-mode=sing] {
    padding-left: 10px;
    padding-right: 10px;
}
.bee-talk .bt-modes button {
    padding: 3px 12px;
    border-radius: 999px;
}
.bee-talk .bt-modes button[aria-pressed=true] {
    background: #4f7c3a;
    color: #fffdf4;
}
.bee-talk .bt-x {
    padding: 4px 6px;
    font-style: normal;
}
.bee-talk .bt-x:hover,
.bee-talk .bt-modes button:hover:not([aria-pressed=true]) {
    color: #c63e5b;
}
.bee-talk .bt-tabs {
    display: flex;
    gap: 14px;
    padding-top: 6px;
}
.bee-talk .bt-tabs button {
    padding: 2px 2px 3px;
    border: 0;
    border-bottom: 2px solid transparent;
    background: none;
    color: #5a6e48;
    cursor: pointer;
    font: italic 1rem "IM Fell English", Georgia, serif;
}
.bee-talk .bt-tabs button:hover { color: #c63e5b; }
.bee-talk .bt-tabs button[aria-selected=true] {
    border-bottom-color: #4f7c3a;
    color: #2f3a24;
}
.bee-talk.info-open :is(.bt-log, .bt-say, .bt-row, .bt-modes, .bt-hints) {
    display: none;
}
.bee-talk .bt-info,
.bee-talk .bt-weather,
.bee-talk .bt-swarm {
    flex: 1;
    min-height: 120px;
    margin: 8px 0;
    overflow-y: auto;
}
.bee-talk .bt-info p { margin: 0 0 8px; line-height: 1.35; }
.bee-talk .bt-brains {
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(79, 124, 58, .25);
}
.bee-talk .bt-brains p,
.bee-talk .heading { margin-bottom: 4px; font-style: italic; color: #5a6e48; }
.bee-talk .bt-info .heading { margin-top: 14px; }
.bee-talk .bt-brains label { display: block; padding: 2px 0; cursor: pointer; }
.bee-talk .bt-brains input { accent-color: #4f7c3a; }
.bee-talk .bt-info .fine,
.bee-talk .bt-weather .fine { color: #7a8a68; font-size: .9rem; font-style: italic; }
.bee-talk .bt-weather .bt-brains { border-bottom: 0; margin-bottom: 4px; padding-bottom: 0; }
.bee-talk .bt-swarm .bt-brains { margin-bottom: 10px; padding-bottom: 8px; }
.bee-talk .bt-swarm .bt-range { width: 100%; accent-color: #4f7c3a; }
.bee-talk .bt-swarm .bt-pick { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 2px 0; cursor: default; }
.bee-talk .bt-swarm select {
    max-width: 62%;
    padding: 1px 4px;
    border: 1.5px solid rgba(79, 124, 58, .45);
    border-radius: 6px;
    background: transparent;
    color: #2f3a24;
    font: italic .9rem "IM Fell English", Georgia, serif;
}
.bee-talk .bt-swarm .fine { color: #7a8a68; font-size: .9rem; font-style: italic; line-height: 1.4; }
.bee-talk .bt-swarm .bt-swatch { display: inline-block; width: .8em; height: .8em; margin: 0 3px -1px 0; border: 1.5px solid; border-radius: 3px; rotate: 45deg; }
.bee-talk .bt-newcomb {
    padding: 4px 14px 5px;
    border: 0;
    border-radius: 999px;
    background: #4f7c3a;
    color: #fffdf4;
    cursor: pointer;
    font: italic .95rem "IM Fell English", Georgia, serif;
}
.bee-talk .bt-newcomb:hover { background: #c63e5b; }
.bee-talk .bt-weather .fine { margin-bottom: 14px; }
.bee-talk .bt-bees { margin-bottom: 10px; padding-bottom: 6px; border-bottom: 1px solid rgba(79, 124, 58, .25); }
.bee-talk .bt-info a { color: #c63e5b; }
.bee-talk .bt-log {
    flex: 1;
    min-height: 120px;
    margin: 8px 0;
    padding: 4px 2px;
    overflow-y: auto;
    overscroll-behavior: contain;
    display: flex;
    flex-direction: column;
    gap: 6px;
    -webkit-user-select: text;
    user-select: text;
}
.bee-talk .bt-log p {
    flex-shrink: 0;
    margin: 0;
    max-width: 86%;
    padding: 4px 11px 5px;
    line-height: 1.35;
    overflow-wrap: anywhere;
}
.bee-talk .bt-you {
    align-self: flex-end;
    border-radius: 12px 12px 3px 12px;
    background: rgba(79, 124, 58, .12);
}
.bee-talk .bt-bee {
    align-self: flex-start;
    border-radius: 12px 12px 12px 3px;
    background: #f6dd8a;
    color: #5b3a12;
    font-style: italic;
    letter-spacing: .02em;
    min-height: 1.35em;
    min-width: 2.2em;
}
.bee-talk .bt-bee.sung::before { content: "♪ "; }
.bee-talk .bt-bee.raw { font: normal .82rem/1.9 ui-monospace, "DejaVu Sans Mono", monospace; letter-spacing: 0; }
.bee-talk .bt-bee.raw span { padding: 1px 2px; margin-right: 2px; border-radius: 3px; background: rgba(90, 58, 18, .12); white-space: pre; }
.bee-talk .bt-bee.raw span:nth-child(even) { background: rgba(90, 58, 18, .22); }
.bee-talk .bt-bee.raw .seed { font-style: italic; opacity: .6; margin-right: 4px; }
.bee-talk.duet .bt-bee::before { content: attr(data-who) " · "; font-style: normal; opacity: .7; }
.bee-talk.duet .bt-bee.sung::before { content: attr(data-who) " ♪ "; }
.bee-talk.duet .bt-bee.other { margin-left: 22px; }
.bee-talk .bt-bee[data-mood=excited] { background: #ffd968; }
.bee-talk .bt-bee[data-mood=loving]  { background: #f6c6cf; }
.bee-talk .bt-bee[data-mood=angry]   { background: #f2ac85; color: #5a1d0e; }
.bee-talk .bt-bee[data-mood=sad]     { background: #d5dde6; color: #2f3c4a; }
.bee-talk .bt-bee[data-mood=scared]  { background: #e6efc4; }
.bee-talk .bt-bee[data-mood=sleepy]  { background: #e3d9f0; color: #3e3354; }
.bee-talk .bt-bee[data-mood=curious] { background: #d6ecdc; color: #23422e; }
.bee-talk .bt-bee[data-mood=calm]    { background: #efe0b4; }
.bee-talk .bt-note,
.bee-talk .bt-poke {
    align-self: center;
    color: #7a8a68;
    font-size: .9rem;
    font-style: italic;
}
.bee-talk .bt-hints { margin-bottom: 6px; }
.bee-talk .bt-hints summary {
    display: inline-block;
    list-style: none;
    margin-bottom: 4px;
    color: #5a6e48;
    cursor: pointer;
    font-style: italic;
    font-size: .9rem;
}
.bee-talk .bt-hints summary::-webkit-details-marker { display: none; }
.bee-talk .bt-hints summary::after { content: " \25b8"; }
.bee-talk .bt-hints[open] summary::after { content: " \25be"; }
.bee-talk .bt-hints summary:hover { color: #c63e5b; }
.bee-talk .bt-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-bottom: 8px;
}
.bee-talk .bt-chips button {
    padding: 1px 9px 2px;
    border: 1.5px solid rgba(79, 124, 58, .45);
    border-radius: 999px;
    background: transparent;
    color: #4f7c3a;
    cursor: pointer;
    font: italic .85rem "IM Fell English", Georgia, serif;
}
.bee-talk .bt-chips button:hover { border-color: #c63e5b; color: #c63e5b; }
.bee-talk .bt-say {
    display: flex;
    gap: 8px;
}
.bee-talk .bt-say input {
    flex: 1;
    min-width: 0;
    padding: 6px 4px;
    border: 0;
    border-bottom: 1.5px solid rgba(63, 110, 53, .5);
    background: transparent;
    color: #2f3a24;
    font: 1.05rem "IM Fell English", Georgia, serif;
    outline: none;
}
.bee-talk .bt-say input::placeholder {
    color: #8fa07e;
    font-style: italic;
}
.bee-talk .bt-say input:focus {
    border-bottom-color: #c63e5b;
}
.bee-talk .bt-say button {
    padding: 5px 16px;
    border: 0;
    border-radius: 999px;
    background: #4f7c3a;
    color: #fffdf4;
    cursor: pointer;
    font: italic 1rem "IM Fell English", Georgia, serif;
}
.bee-talk .bt-say button:hover {
    background: #c63e5b;
}
.bee-talk .bt-row {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin-top: 6px;
}
.bee-talk:not(.singing) .bt-row:has(.bt-hush[hidden]) {
    display: none;
}
.bee-talk .bt-sing {
    display: none;
}
.bee-talk.singing .bt-sing {
    display: inline-block;
}
.bee-talk .bt-row button {
    padding: 3px 12px;
    border-radius: 999px;
    background: rgba(79, 124, 58, .12);
}
.bee-talk .bt-row button:hover {
    background: rgba(79, 124, 58, .22);
    color: #c63e5b;
}
.bee-talk.duet:not(.info-open) .bt-row { display: flex !important; }            /* (more than one bee: someone's always starting or stopping; keep the room so nothing jumps) */
.bee-talk.duet .bt-hush[hidden] { display: inline-block; visibility: hidden; }
.bee-talk .bt-hush {
    margin-left: auto;
}
.bee-talk .bt-foot {
    margin: 8px 0 0;
    color: #7a8a68;
    font-size: .78rem;
    font-style: italic;
    line-height: 1.3;
}
.bee-talk .bt-mute {
    padding: 0;
    border: 0;
    background: none;
    color: #5a6e48;
    cursor: pointer;
    font: inherit;
    text-decoration: underline dotted;
}
.bee-talk .bt-mute:hover {
    color: #c63e5b;
}

/* at night, the card goes dark with the garden */
body:has(.front[data-time=night]) .bee-talk {
    border-color: #4a5680;
    background: rgba(24, 32, 58, .96);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .45);
    color: #e6e2cf;
}
body:has(.front[data-time=night]) .bee-talk .bt-title b { color: #f3f0dc; }
body:has(.front[data-time=night]) .bee-talk .bt-head { border-bottom-color: rgba(201, 214, 232, .2); }
body:has(.front[data-time=night]) .bee-talk :is(.bt-mood, .bt-note, .bt-poke, .bt-foot, .bt-info .fine, .bt-weather .fine) { color: #a9b4c8; }
body:has(.front[data-time=night]) .bee-talk .bt-tabs button { color: #a9b4c8; }
body:has(.front[data-time=night]) .bee-talk .bt-tabs button[aria-selected=true] { color: #f3f0dc; border-bottom-color: #f3f0dc; }
body:has(.front[data-time=night]) .bee-talk .bt-info a { color: #f2b8a0; }
body:has(.front[data-time=night]) .bee-talk .bt-brains { border-bottom-color: rgba(201, 214, 232, .2); }
body:has(.front[data-time=night]) .bee-talk .bt-chips button { border-color: rgba(201, 214, 232, .35); color: #c9d6e8; }
body:has(.front[data-time=night]) .bee-talk .bt-hints summary { color: #a9b4c8; }
body:has(.front[data-time=night]) .bee-talk .bt-swarm select { border-color: rgba(201, 214, 232, .35); color: #e6e2cf; }
body:has(.front[data-time=night]) .bee-talk .bt-swarm select option { color: #18203a; }
body:has(.front[data-time=night]) .bee-talk .bt-swarm .fine { color: #a9b4c8; }
body:has(.front[data-time=night]) .bee-talk .bt-newcomb { background: #f3f0dc; color: #18203a; }
body:has(.front[data-time=night]) .bee-talk .bt-chips button:hover { border-color: #f2b8a0; color: #f2b8a0; }
body:has(.front[data-time=night]) .bee-talk :is(.bt-brains p, .heading) { color: #a9b4c8; }
body:has(.front[data-time=night]) .bee-talk .bt-brains input { accent-color: #f3f0dc; }
body:has(.front[data-time=night]) .bee-talk :is(.bt-modes button, .bt-x, .bt-row button, .bt-mute) { color: #c9d6e8; }
body:has(.front[data-time=night]) .bee-talk .bt-modes { background: rgba(201, 214, 232, .12); }
body:has(.front[data-time=night]) .bee-talk .bt-modes button[aria-pressed=true],
body:has(.front[data-time=night]) .bee-talk .bt-say button { background: #f3f0dc; color: #18203a; }
body:has(.front[data-time=night]) .bee-talk .bt-you,
body:has(.front[data-time=night]) .bee-talk .bt-row button { background: rgba(201, 214, 232, .14); }
body:has(.front[data-time=night]) .bee-talk .bt-say input { color: #e6e2cf; border-bottom-color: rgba(201, 214, 232, .45); }
body:has(.front[data-time=night]) .bee-talk .bt-say input::placeholder { color: #8390a8; }

@media (max-width: 620px) {
    .bee-talk {
        left: 8px;
        right: 8px;
        bottom: 8px;
        width: auto;
        max-height: 52vh;
        padding: 10px 12px 8px;
    }
    .bee-talk .bt-log { min-height: 110px; }
    .bee-talk { max-height: 62vh; }
    .bee-talk .bt-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
    .bee-talk .bt-chips::-webkit-scrollbar { display: none; }
    .bee-talk .bt-chips button { flex: none; }
    .bee-talk .bt-foot { font-size: .72rem; }
    .bee-home .bee-bubble { max-width: 70vw; }
}
@media (max-height: 500px) and (min-width: 621px) {
    .bee-talk {
        left: 8px;
        top: 8px;
        bottom: 8px;
        width: 46vw;
        max-height: none;
        padding: 8px 12px;
    }
    .bee-talk .bt-log { min-height: 60px; }
}