/* TobSar helper bot on the site: rendered in Blender (blender/bot_v2.py), served as transparent WebP
   from /assets/mascot/. Behaviour follows the Baymax rule: calm idle, big moves only at big moments. */
.bot{display:block;width:100%;height:auto;user-select:none;-webkit-user-drag:none;filter:drop-shadow(0 18px 26px rgba(10,30,90,.18))}
.bot-float{animation:botFloat 5.5s ease-in-out infinite}
@keyframes botFloat{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-10px) rotate(-.6deg)}}
.bot-pop{animation:botPop .7s cubic-bezier(.2,1.4,.4,1) both}
@keyframes botPop{0%{transform:scale(.85) translateY(14px);opacity:0}100%{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.bot-float,.bot-pop{animation:none}}
html.shot .bot-float,html.shot .bot-pop{animation:none}

/* hero: the bot stands in front of the inbox, handing work to the seller */
.hero-bot{position:absolute;left:-27%;bottom:-31%;width:82%;max-width:520px;z-index:3;pointer-events:none}
@media (max-width:980px){.hero-bot{left:auto;right:-4%;bottom:-16%;width:44%}}
@media (max-width:560px){.hero-bot{width:46%;right:-6%;bottom:-20%}}

/* story film: the helper stands at the corner of the stage and changes mood with each step */
.story-bot{position:absolute;left:-12%;bottom:-10%;width:36%;max-width:250px;z-index:30;pointer-events:none}
@media (max-width:980px){.story-bot{left:auto;right:-4%;bottom:-8%;width:30%}}

/* page heroes (help, 404): the bot stands to the right of the headline */
.phero .wrap{position:relative}
.phero-bot{position:absolute;right:30px;top:-30px;width:min(34vw,380px)}
@media (max-width:980px){.phero-bot{position:static;width:200px;margin:30px 0 0 auto}}

/* close: the bot greets with a sampeah beside the final call to action */
.close .wrap{position:relative}
.close-bot{position:absolute;right:20px;bottom:-60px;width:300px}
@media (max-width:980px){.close-bot{position:static;width:220px;margin:40px auto 0}}

/* meet-the-helper strip: one card per product moment */
.moods{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:40px}
.mood{position:relative;border-radius:26px;padding:14px 14px 18px;background:linear-gradient(180deg,#eaf3ff,#cfe3ff);
  border:1.5px solid #dbe7fb;overflow:hidden;transition:transform .35s cubic-bezier(.2,1.2,.4,1),box-shadow .35s}
.mood:hover{transform:translateY(-6px);box-shadow:0 22px 40px -18px rgba(37,99,235,.45)}
.mood .bot{width:112%;max-width:none;margin:-14px -6% -18px;filter:drop-shadow(0 10px 14px rgba(10,30,90,.16))}
.mood .n{position:absolute;top:14px;left:16px;font:700 12px var(--u);letter-spacing:.06em;color:#5b7bb8}
.mood h3{margin-top:4px;font:900 20px/1.15 var(--d);letter-spacing:-.02em;color:var(--ink)}
.mood p{margin-top:6px;font-size:14px;line-height:1.5;color:var(--ink-2)}
html[lang=km] .mood h3{letter-spacing:0;line-height:1.5;font-size:18px}
@media (max-width:980px){.moods{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.moods{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;margin:28px -16px 0;padding:0 16px 8px}
  .mood{flex:0 0 74%;scroll-snap-align:center}}

/* a bot beside a level card (Assist / Copilot / Autopilot) and other inline spots */
.bot-side{width:230px;flex:0 0 230px;margin:-40px -20px -30px -30px}
.lvl-wrap{display:flex;align-items:flex-end;gap:10px}
@media (max-width:760px){.bot-side{width:120px;flex-basis:120px}}

/* sticker pack: the moods as Telegram stickers with Khmer captions */
.stickers{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin-top:30px}
.stk{text-align:center}
.stk .bot{filter:drop-shadow(0 6px 10px rgba(10,30,90,.18))}
.stk span{display:inline-block;margin-top:-6px;padding:5px 10px;border-radius:13px;background:#fff;border:2px solid #14204a;
  font:700 13px "Khmer",var(--u);color:#14204a;box-shadow:0 3px 0 #14204a}
@media (max-width:760px){.stickers{grid-template-columns:repeat(3,1fr)}}