/* ===================================================================
   FLOWTRIG — robot-mascot.css
   "Trixie" — a cute GIRL robot. Neutral resting face by default;
   expressions are triggered (random idle + on scroll-in + on click).
   Modes:  (A) .ftbot  travelling buddy   (B) .ftbot-mount  drop-anywhere
   Reactions: wave · smile · blush · spin · bounce · nod · shy · giggle.
   =================================================================== */

.ftbot-svg{ display:block; width:100%; height:auto; overflow:visible; }
.bot-float{ animation:bot-float 4.2s ease-in-out infinite; transform-box:fill-box; transform-origin:50% 100%; }
@keyframes bot-float{ 0%,100%{ transform:translateY(0) rotate(-1deg);} 50%{ transform:translateY(-8px) rotate(1.5deg);} }

.bot-shadow{ fill:rgba(10,30,20,.22); animation:bot-sh 4.2s ease-in-out infinite; transform-box:fill-box; transform-origin:center; }
@keyframes bot-sh{ 0%,100%{ transform:scaleX(1); opacity:.5;} 50%{ transform:scaleX(.82); opacity:.32;} }

/* girl touches: bow + side accents */
.bot-bow{ fill:#FF6FA5; }
.bot-bow-knot{ fill:#ff5497; }
.bot-ant{ stroke:#cdb6c6; stroke-width:3; stroke-linecap:round; }
.bot-ant-tip{ fill:#FF6FA5; animation:bot-tip 2s ease-in-out infinite; transform-box:fill-box; transform-origin:center; }
@keyframes bot-tip{ 0%,100%{ filter:drop-shadow(0 0 2px #FF6FA5);} 50%{ filter:drop-shadow(0 0 7px #FF6FA5); transform:scale(1.15);} }

.bot-head,.bot-torso{ fill:#fdfefe; stroke:#e2d3dd; stroke-width:1.5; }
.bot-ear{ fill:#f3e7ee; stroke:#e2d0db; stroke-width:1.2; }
.bot-ear-core{ fill:#FF6FA5; }
.bot-visor{ fill:#241626; }
.bot-chest{ fill:none; stroke:var(--neon,#2BE881); stroke-width:2.4; }
.bot-chest-core{ fill:var(--neon,#2BE881); animation:bot-tip 2.4s ease-in-out infinite; transform-box:fill-box; transform-origin:center; }
.bot-leg{ fill:#e2d0db; } .bot-foot{ fill:#5a3b4d; }
.bot-arm{ fill:#f3e7ee; stroke:#e2d0db; stroke-width:1.2; }

/* eyelashes (girl) */
.bot-lash{ stroke:#fff; stroke-width:1.6; stroke-linecap:round; }

/* ----- FACE STATES -----
   default = neutral (open round eyes, tiny straight mouth)
   .is-happy = curved happy eyes + smile + cheeks
   .is-shy   = looking-away small eyes + big blush + wobble mouth
   eyes blink in all non-happy states */
.bot-eyes{ animation:bot-blink 4.5s infinite; transform-box:fill-box; transform-origin:center; }
.bot-eyes .eye{ fill:var(--neon,#2BE881); filter:drop-shadow(0 0 3px rgba(43,232,129,.8)); }
@keyframes bot-blink{ 0%,92%,100%{ transform:scaleY(1);} 95%{ transform:scaleY(.1);} }
.bot-eyes-happy,.bot-eyes-shy{ opacity:0; }
.bot-eyes-happy path,.bot-eyes-shy path{ fill:none; stroke:var(--neon,#2BE881); stroke-width:3; stroke-linecap:round; filter:drop-shadow(0 0 3px rgba(43,232,129,.8)); }
.is-happy .bot-eyes{ opacity:0; } .is-happy .bot-eyes-happy{ opacity:1; }
.is-shy   .bot-eyes{ opacity:0; } .is-shy   .bot-eyes-shy{ opacity:1; }

.bot-cheek{ fill:rgba(255,140,170,.45); opacity:0; transition:opacity .3s; }
.is-happy .bot-cheek{ opacity:.85; }
.is-blush .bot-cheek, .is-shy .bot-cheek{ opacity:1; fill:rgba(255,90,135,.6); }

/* mouths */
.bot-mouth-neutral{ fill:none; stroke:#FF6FA5; stroke-width:2.2; stroke-linecap:round; opacity:.9; }
.bot-mouth-smile{ fill:none; stroke:#FF6FA5; stroke-width:2.6; stroke-linecap:round; opacity:0; }
.bot-mouth-o{ fill:#FF6FA5; opacity:0; }
.is-happy .bot-mouth-neutral{ opacity:0; } .is-happy .bot-mouth-smile{ opacity:1; }
.is-shy .bot-mouth-neutral{ opacity:0; } .is-shy .bot-mouth-o{ opacity:1; }

/* waving arm — bigger, friendlier, repeats */
.bot-arm-r{ transform-box:fill-box; transform-origin:86% 12%; }
.is-wave .bot-arm-r{ animation:bot-wave 1.4s ease-in-out; }
@keyframes bot-wave{
  0%{ transform:rotate(0);} 10%{ transform:rotate(-58deg);}
  25%{ transform:rotate(-32deg);} 40%{ transform:rotate(-58deg);}
  55%{ transform:rotate(-30deg);} 70%{ transform:rotate(-56deg);}
  85%{ transform:rotate(-34deg);} 100%{ transform:rotate(0);} }

/* spin / bounce / nod / shy-wobble */
.is-spin .bot-float{ animation:bot-spin 1.1s cubic-bezier(.5,0,.3,1);}
@keyframes bot-spin{ 0%{ transform:rotateY(0) scale(1);} 50%{ transform:rotateY(180deg) scale(1.05);} 100%{ transform:rotateY(360deg) scale(1);} }
.is-bounce .bot-float{ animation:bot-bounce .9s cubic-bezier(.3,1.4,.5,1);}
@keyframes bot-bounce{ 0%,100%{ transform:translateY(0) scale(1);} 30%{ transform:translateY(-22px) scale(1.06,.94);} 60%{ transform:translateY(0) scale(.96,1.05);} 80%{ transform:translateY(-6px);} }
.is-nod .bot-float{ animation:bot-nod .8s ease-in-out;}
@keyframes bot-nod{ 0%,100%{ transform:rotate(0);} 30%{ transform:rotate(8deg) translateY(2px);} 60%{ transform:rotate(-4deg);} }
.is-shy .bot-float{ animation:bot-wobble 1.6s ease-in-out;}
@keyframes bot-wobble{ 0%,100%{ transform:translateX(0) rotate(0);} 20%{ transform:translateX(-5px) rotate(-5deg);} 50%{ transform:translateX(4px) rotate(4deg);} 80%{ transform:translateX(-2px) rotate(-2deg);} }
.is-giggle .bot-float{ animation:bot-giggle 1s ease-in-out;}
@keyframes bot-giggle{ 0%,100%{ transform:translateY(0) rotate(0);} 20%,60%{ transform:translateY(-4px) rotate(3deg);} 40%,80%{ transform:translateY(-4px) rotate(-3deg);} }

.ftbot.landed .bot-float{ animation:bot-land .7s cubic-bezier(.3,1.5,.5,1), bot-float 4.2s ease-in-out infinite .7s; }
@keyframes bot-land{ 0%{ transform:translateY(14px) scale(.82);} 55%{ transform:translateY(-4px) scale(1.07);} 100%{ transform:none;} }

/* speech bubble */
.ftbot-say{ position:absolute; right:102%; top:6%; background:#fff; color:#0A1512; font-size:12.5px; font-weight:600;
  padding:8px 12px; border-radius:13px 13px 4px 13px; white-space:nowrap; max-width:200px; line-height:1.35;
  box-shadow:0 12px 28px -12px rgba(16,46,32,.4); border:1px solid rgba(12,28,22,.08);
  opacity:0; transform:translateX(6px) scale(.92); transform-origin:bottom right; transition:opacity .3s, transform .3s; pointer-events:none; }
.say .ftbot-say{ opacity:1; transform:none; }
.ftbot-say::after{ content:""; position:absolute; right:14px; bottom:-5px; width:10px; height:10px; background:#fff;
  border-right:1px solid rgba(12,28,22,.08); border-bottom:1px solid rgba(12,28,22,.08); transform:rotate(45deg); }
.say-left .ftbot-say, .ftbot-mount.say-left .ftbot-say{ right:auto; left:102%; border-radius:13px 13px 13px 4px; transform-origin:bottom left; white-space:normal; }
.say-left .ftbot-say::after{ right:auto; left:14px; }

/* (A) travelling */
.ftbot{ position:fixed; right:clamp(8px,2vw,28px); width:clamp(104px,9vw,138px); z-index:60; will-change:transform; transition:opacity .4s ease; }
.ftbot.hide{ opacity:0; pointer-events:none; }
.ftbot.docked{ position:absolute; }
/* the bot is click-interactive (so reactions fire), but the hit area is just the figure */
.ftbot, .ftbot-mount{ cursor:pointer; }
.ftbot .ftbot-svg, .ftbot-mount .ftbot-svg{ pointer-events:auto; }
.ftbot-say{ pointer-events:none; }

/* (B) placement */
.ftbot-mount{ position:relative; display:inline-block; width:var(--bot-w,128px); vertical-align:bottom; }

@media(max-width:760px){ .ftbot{ width:86px; right:5px; } .ftbot .ftbot-say{ display:none; } }
@media(prefers-reduced-motion: reduce){
  .bot-float,.bot-shadow,.bot-ant-tip,.bot-chest-core,.bot-eyes{ animation:none; }
  .is-wave .bot-arm-r,.is-spin .bot-float,.is-bounce .bot-float,.is-nod .bot-float,.is-shy .bot-float,.is-giggle .bot-float{ animation:none; }
}