/* =====================================================================
   ============  Study companion animated sticker (cs-*)  ==============
   ===================================================================== */
.cs-sticker-wrap{
  position:absolute;top:8px;left:8px;width:84px;height:84px;pointer-events:none;z-index:3;
  filter:drop-shadow(0 6px 14px rgba(13,71,161,.25));
}
.ui-hero-head{position:relative}
@media (max-width:640px){ .cs-sticker-wrap{width:64px;height:64px;top:4px;left:4px} }
.cs-sticker-wrap svg{width:100%;height:100%;overflow:visible}
.cs-pose{display:none}
.cs-pose.cs-active{display:block}
.cs-sticker-label{
  position:absolute;bottom:-16px;left:50%;transform:translateX(-50%);white-space:nowrap;
  font-size:9.5px;font-weight:800;color:#0d47a1;background:#fff;border:1px solid #90caf9;
  border-radius:8px;padding:1px 7px;box-shadow:0 2px 6px rgba(13,71,161,.15);opacity:.95;
}
html.dark .cs-sticker-label{background:#0d1a4a;color:#9fc9f5;border-color:#2a3f8f}

/* ---- reading / studying ---- */
@keyframes csPageFlip{0%,40%{transform:rotateY(0deg)}50%{transform:rotateY(-140deg)}90%,100%{transform:rotateY(0deg)}}
.cs-book-page{transform-origin:2px 50%;animation:csPageFlip 2.6s ease-in-out infinite}
@keyframes csHeadBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-1.5px)}}
.cs-pose-study .cs-head-grp{animation:csHeadBob 2.2s ease-in-out infinite}

/* ---- resting / napping ---- */
@keyframes csZFloat{0%{opacity:0;transform:translate(0,0) scale(.6)}20%{opacity:1}100%{opacity:0;transform:translate(8px,-16px) scale(1.1)}}
.cs-pose-rest .cs-z1{animation:csZFloat 2.4s ease-in infinite}
.cs-pose-rest .cs-z2{animation:csZFloat 2.4s ease-in infinite .8s}
.cs-pose-rest .cs-z3{animation:csZFloat 2.4s ease-in infinite 1.6s}

/* ---- eating ---- */
@keyframes csChew{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.72)}}
.cs-pose-eat .cs-jaw{transform-origin:50% 0%;animation:csChew 0.9s ease-in-out infinite}
@keyframes csSteam{0%{opacity:.7;transform:translateY(0) scaleX(1)}100%{opacity:0;transform:translateY(-10px) scaleX(1.4)}}
.cs-pose-eat .cs-steam{animation:csSteam 1.8s ease-out infinite}

/* ---- phone ---- */
@keyframes csThumb{0%,100%{transform:translateY(0)}50%{transform:translateY(2.5px)}}
.cs-pose-phone .cs-thumb{transform-origin:50% 100%;animation:csThumb 1s ease-in-out infinite}
@keyframes csGlow{0%,100%{opacity:.35}50%{opacity:.8}}
.cs-pose-phone .cs-screen-glow{animation:csGlow 1.4s ease-in-out infinite}

/* ---- superhero ---- */
@keyframes csCape{0%,100%{transform:skewX(0deg) rotate(0deg)}50%{transform:skewX(-9deg) rotate(-2deg)}}
.cs-pose-hero .cs-cape{transform-origin:50% 0%;animation:csCape 1.3s ease-in-out infinite}
@keyframes csFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.cs-pose-hero .cs-hero-grp{animation:csFloat 1.6s ease-in-out infinite}
@keyframes csSparkle{0%,100%{opacity:.2;transform:scale(.7)}50%{opacity:1;transform:scale(1.15)}}
.cs-pose-hero .cs-spark{animation:csSparkle 1.1s ease-in-out infinite}

/* ---- gym / exercise ---- */
@keyframes csCurl{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
.cs-pose-gym .cs-gym-arm{animation:csCurl .85s ease-in-out infinite}

/* ---- shopping ---- */
@keyframes csBagSwing{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(10deg)}}
.cs-pose-shopping .cs-bag{transform-origin:70px 62px;animation:csBagSwing 1.1s ease-in-out infinite}

/* ---- party ---- */
@keyframes csHorn{0%,100%{transform:scaleX(1)}50%{transform:scaleX(1.35)}}
.cs-pose-party .cs-horn{transform-origin:0% 50%;animation:csHorn .6s ease-in-out infinite}
@keyframes csConfetti{0%{transform:translateY(0) rotate(0deg);opacity:1}100%{transform:translateY(14px) rotate(180deg);opacity:0}}
.cs-pose-party .cs-confetti{animation:csConfetti 1.6s ease-in infinite}
.cs-pose-party .cs-confetti-2{animation-delay:.4s}
.cs-pose-party .cs-confetti-3{animation-delay:.8s}
.cs-pose-party .cs-confetti-4{animation-delay:1.2s}

/* ---- outing ---- */
@keyframes csBounceWalk{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
.cs-pose-outing .cs-walk-body{animation:csBounceWalk .7s ease-in-out infinite}
@keyframes csStepL{0%,100%{transform:translateY(0) scaleY(1)}50%{transform:translateY(-2px) scaleY(.9)}}
@keyframes csStepR{0%,100%{transform:translateY(-2px) scaleY(.9)}50%{transform:translateY(0) scaleY(1)}}
.cs-pose-outing .cs-leg-l{transform-origin:50% 0%;animation:csStepL .7s ease-in-out infinite}
.cs-pose-outing .cs-leg-r{transform-origin:50% 0%;animation:csStepR .7s ease-in-out infinite}
@keyframes csSunSpin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}
.cs-pose-outing .cs-sun{transform-origin:80px 18px;animation:csSunSpin 6s linear infinite}

/* ---- extracurricular class ---- */
@keyframes csWrite{0%,100%{transform:translateX(0)}50%{transform:translateX(8px)}}
.cs-pose-extracurricular .cs-pencil{transform-origin:0% 50%;animation:csWrite .9s ease-in-out infinite}

/* ---- sleep (end of day) ---- */
@keyframes csBreathe{0%,100%{transform:scaleY(1)}50%{transform:scaleY(1.05)}}
.cs-pose-sleep .cs-blanket{transform-origin:50% 100%;animation:csBreathe 2.6s ease-in-out infinite}
.cs-pose-sleep .cs-z1,.cs-pose-sleep .cs-z2{animation:csZFloat 2.8s ease-in infinite}
.cs-pose-sleep .cs-z2{animation-delay:1s}

@media (prefers-reduced-motion:reduce){
  .cs-pose *{animation:none !important}
}