/* =====================================================================
   Amrich UI — Mascot stylesheet  (v3)

   Everything the mascot does visually lives here. It is loaded after
   theme-engine.css, so it also supersedes the older mascot rules that
   were folded into that file.

   Why the legs used to look wrong
   -------------------------------
   The old rule was `.th-cat-leg { transform-origin: top center; }`.
   In SVG the default `transform-box` is `view-box`, so "top center"
   resolves against the 100x100 canvas — i.e. the point (50, 0), up by
   the mascot's ears. All four legs therefore swung around the same
   far-away point, which shears a rectangle instead of rotating it, and
   the two sides sheared by different amounts because they start at
   different distances from that point. That is the distorted, uneven
   gait.

   Here every leg group carries its own pivot, written inline by
   mascot.js in view-box units at that leg's hip, and the nested
   .th-shin carries a second pivot at the knee. Nothing shares a pivot,
   so a rotation moves exactly the limb it belongs to.
   ===================================================================== */

#thMascot {
  position: fixed;
  left: 0;
  top: 0;
  width: 86px;
  height: 86px;
  z-index: 2147482500;
  user-select: none;
  -webkit-user-select: none;

  /* It never receives a pointer event. Taps on it are resolved by
     geometry in mascot.js, so it can never intercept a tap meant for a
     button underneath — and, unlike the old on/off scheme, it is always
     tappable itself. */
  pointer-events: none;

  /* Position is a transform, so walking across the screen is compositor
     work and never touches layout. The layer is promoted once and kept,
     which also stops the page behind it repainting as it moves. */
  transform: translate3d(24px, 60vh, 0);
  will-change: transform;

  /* No drop-shadow filter. A filter on a moving element forces the browser
     to re-rasterise the whole sprite every frame; the SVG already draws its
     own ground shadow, which costs nothing. */

  --th-gait: .3s;      /* stride length — set from JS to match walking speed */
  --th-swing: 1;       /* how far the legs swing; lighter for birds */
}
#thMascot.th-drag { transition: none; }
#thMascot svg {
  width: 100%; height: 100%; overflow: visible; display: block;
  transition: transform .28s var(--th-ease, cubic-bezier(.22, 1, .36, 1));
}

/* Birds take shorter steps; the elephant is heavier on its feet */
#thMascot.th-sp-owl,
#thMascot.th-sp-peacock,
#thMascot.th-sp-bat      { --th-swing: .5; }
#thMascot.th-sp-elephant { --th-swing: .72; }

/* =====================================================================
   1. THE THREE TRANSFORM LAYERS
   Facing, tilt and bounce each own one group. They used to share the
   single `.th-cat-body` transform, so the run-bounce keyframe wiped out
   the mirror and a mascot running left snapped back to facing right
   halfway through every stride.
   ===================================================================== */
#thMascot .th-rig  { transform-origin: 50px 55px; }
#thMascot.th-flip .th-rig { transform: scaleX(-1); }

#thMascot .th-tilt {
  transform-origin: 50px 66px;
  transition: transform .3s var(--th-ease, cubic-bezier(.22, 1, .36, 1));
}
#thMascot.th-up   .th-tilt { transform: rotate(-7deg); }
#thMascot.th-down .th-tilt { transform: rotate(7deg); }
#thMascot.th-run  .th-tilt { transition: none; }

#thMascot .th-bob { transform-origin: 50px 84px; }

/* =====================================================================
   2. THE GAIT
   A trot: front-left moves with back-right, front-right with back-left.
   The shin lags the thigh, so the leg folds on the way forward and
   straightens as the paw lands, instead of swinging out rigid.
   ===================================================================== */
#thMascot.th-run .th-leg {
  animation: thThigh var(--th-gait) cubic-bezier(.42, 0, .58, 1) infinite;
}
#thMascot.th-run .th-leg .th-shin {
  animation: thShin var(--th-gait) cubic-bezier(.42, 0, .58, 1) infinite;
}
/* the opposite diagonal, half a stride behind */
#thMascot.th-run .th-leg-fr,
#thMascot.th-run .th-leg-bl,
#thMascot.th-run .th-leg-fr .th-shin,
#thMascot.th-run .th-leg-bl .th-shin {
  animation-delay: calc(var(--th-gait) * -.5);
}
#thMascot.th-run .th-bob {
  animation: thBob var(--th-gait) cubic-bezier(.42, 0, .58, 1) infinite;
}
#thMascot.th-run .th-shadow-g {
  animation: thShadowRun var(--th-gait) cubic-bezier(.42, 0, .58, 1) infinite;
}

@keyframes thThigh {
  0%   { transform: rotate(calc(var(--th-swing) *  24deg)); }
  30%  { transform: rotate(calc(var(--th-swing) *   4deg)); }
  50%  { transform: rotate(calc(var(--th-swing) * -20deg)); }
  78%  { transform: rotate(calc(var(--th-swing) *   2deg)); }
  100% { transform: rotate(calc(var(--th-swing) *  24deg)); }
}
@keyframes thShin {
  0%   { transform: rotate(calc(var(--th-swing) *  -4deg)); }  /* paw planted */
  22%  { transform: rotate(calc(var(--th-swing) *  -2deg)); }
  45%  { transform: rotate(calc(var(--th-swing) * -30deg)); }  /* folded, swinging through */
  72%  { transform: rotate(calc(var(--th-swing) * -14deg)); }
  100% { transform: rotate(calc(var(--th-swing) *  -4deg)); }
}
/* two bounces per stride — one for each diagonal pair landing */
@keyframes thBob {
  0%, 50%, 100% { transform: translateY(0); }
  25%           { transform: translateY(-2.6px); }
  75%           { transform: translateY(-2.6px); }
}
@keyframes thShadowRun {
  0%, 50%, 100% { transform: scaleX(1);   opacity: .16; }
  25%, 75%      { transform: scaleX(.86); opacity: .10; }
}

/* legs return smoothly to standing when the run stops */
#thMascot .th-leg,
#thMascot .th-leg .th-shin {
  transition: transform .28s var(--th-ease, cubic-bezier(.22, 1, .36, 1));
}
#thMascot.th-run .th-leg,
#thMascot.th-run .th-leg .th-shin { transition: none; }

/* =====================================================================
   3. IDLE LIFE
   ===================================================================== */
#thMascot .th-shadow-g { transform-origin: 50px 90px; }
#thMascot .th-shadow {
  transform-origin: 50px 90px;
  animation: thShadow 3.2s ease-in-out infinite;
}
@keyframes thShadow {
  0%, 100% { transform: scaleX(1);  opacity: .16; }
  50%      { transform: scaleX(.9); opacity: .12; }
}

/* breathing — a whole-body idle that reads as alive without being busy */
#thMascot .th-torso { transform-origin: 50px 72px; animation: thBreathe 3.6s ease-in-out infinite; }
@keyframes thBreathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.018, 1.026); } }
#thMascot.th-run .th-torso { animation: none; }

#thMascot .th-tail { transform-origin: 22px 62px; animation: thTail 2.4s ease-in-out infinite; }
@keyframes thTail { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(14deg); } }
#thMascot.th-run .th-tail { animation-duration: .9s; }

/* The lid sits on top of the pupils and is only out of the way because
   it is scaled flat. That has to be its resting state, not something the
   animation happens to leave behind — otherwise the first environment
   that stops animations (Lite mode, reduced motion, a print sheet)
   leaves the mascot standing there with its eyes covered. */
#thMascot .th-eyelid {
  transform-box: fill-box;
  transform-origin: top center;
  transform: scaleY(0);
  animation: thBlink 5.5s infinite;
}
@keyframes thBlink { 0%, 95%, 100% { transform: scaleY(0); } 97% { transform: scaleY(1); } }

#thMascot .th-head { transform-origin: 50px 44px; }

/* ears, wings, trunk, fan, bell, tongue */
#thMascot .th-ear-l { animation: thEarL 3.6s ease-in-out infinite; }
#thMascot .th-ear-r { animation: thEarR 3.6s ease-in-out infinite; }
@keyframes thEarL { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-6deg); } }
@keyframes thEarR { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(6deg); } }

#thMascot .th-wing-l { animation: thWingL 3.4s ease-in-out infinite; }
#thMascot .th-wing-r { animation: thWingR 3.4s ease-in-out infinite; }
#thMascot.th-run .th-wing-l,
#thMascot.th-run .th-wing-r { animation-duration: .34s; }
@keyframes thWingL { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-13deg) translateY(-2px); } }
@keyframes thWingR { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(13deg) translateY(-2px); } }

/* the bat hovers instead of walking, so its legs stay still */
#thMascot.th-sp-bat .th-bob { animation: thHover 3s ease-in-out infinite; }
#thMascot.th-sp-bat.th-run .th-bob { animation: thHover .5s ease-in-out infinite; }
#thMascot.th-sp-bat.th-run .th-leg,
#thMascot.th-sp-bat.th-run .th-leg .th-shin { animation: none; }
@keyframes thHover { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }

#thMascot .th-fan { animation: thFan 5s ease-in-out infinite; }
@keyframes thFan { 0%, 100% { transform: rotate(-2.5deg) scale(.97); } 50% { transform: rotate(2.5deg) scale(1.03); } }

#thMascot .th-trunk { animation: thTrunk 4.2s ease-in-out infinite; }
@keyframes thTrunk { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(5deg); } }

#thMascot .th-tongue { animation: thPant 1.5s ease-in-out infinite; }
@keyframes thPant { 0%, 100% { transform: scaleY(.85); } 50% { transform: scaleY(1.25); } }

#thMascot .th-bell { animation: thBell 3.8s ease-in-out infinite; }
#thMascot.th-run .th-bell { animation-duration: .3s; }
@keyframes thBell { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(5deg); } }

#thMascot .th-crest { animation: thCrest 4s ease-in-out infinite; }
@keyframes thCrest { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }

/* sitting, looking around, chasing */
#thMascot.th-sit .th-leg-fl,
#thMascot.th-sit .th-leg-fr { transform: rotate(4deg); }
#thMascot.th-sit .th-leg-bl,
#thMascot.th-sit .th-leg-br { transform: rotate(-38deg); }
#thMascot.th-sit .th-leg-bl .th-shin,
#thMascot.th-sit .th-leg-br .th-shin { transform: rotate(44deg); }
#thMascot.th-sit .th-tail { animation-duration: 1.2s; }

#thMascot.th-look .th-head { animation: thLook 1.6s ease-in-out; }
@keyframes thLook {
  0%, 100% { transform: rotate(0); }
  25%      { transform: rotate(-11deg); }
  60%      { transform: rotate(11deg); }
}

#thMascot.th-chase .th-tail { animation-duration: .7s; }
#thMascot.th-chase .th-head { animation: thAlert 1s ease-in-out infinite; }
@keyframes thAlert { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px) rotate(-3deg); } }

/* Leaning with the scroll — on the <svg>, not on #thMascot, because the
   root element's transform is now the sprite's position on screen. */
#thMascot.th-lean-down svg { transform: translateY(3px) rotate(4deg); }
#thMascot.th-lean-up   svg { transform: translateY(-3px) rotate(-4deg); }

/* =====================================================================
   4. FACE SLOTS
   Every eye and mouth variant is drawn once and switched with display,
   so a change of mood costs nothing and never rebuilds the DOM.
   ===================================================================== */
#thMascot .th-eye  { display: none; }
#thMascot .th-eye-open { display: block; }
#thMascot .th-brows,
#thMascot .th-brows-sad { display: none; }

#thMascot .th-m { display: none; }
#thMascot .th-m-neutral { display: block; }

#thMascot .th-blush { opacity: .42; transition: opacity .3s ease; }
#thMascot .th-prop  { display: none; }

/* =====================================================================
   5. EMOTIONS
   Driven by  #thMascot[data-emo="…"].  Anything a page or another
   script wants to trigger goes through AmrichMascot.emote(name) or
   document.dispatchEvent(new CustomEvent('amrich:emote',{detail:'joy'})).
   ===================================================================== */

/* ---- quick happy hop (the old .th-happy, kept for compatibility) ---- */
#thMascot.th-happy svg,
#thMascot[data-emo="happy"] svg { animation: thHop .55s var(--th-ease, cubic-bezier(.22, 1, .36, 1)); }
@keyframes thHop {
  0%, 100% { transform: translateY(0) rotate(0); }
  35%      { transform: translateY(-24px) rotate(-8deg); }
  70%      { transform: translateY(-6px) rotate(4deg); }
}
#thMascot.th-happy .th-fan,
#thMascot[data-emo="happy"] .th-fan { animation: thFanOpen .8s var(--th-ease, cubic-bezier(.22, 1, .36, 1)); }
@keyframes thFanOpen { 0% { transform: scale(.55); } 60% { transform: scale(1.14); } 100% { transform: scale(1); } }

/* ---------------------------------------------------------- JOYFUL */
#thMascot[data-emo="joy"] .th-eye-open { display: none; }
#thMascot[data-emo="joy"] .th-eye-joy  { display: block; }
#thMascot[data-emo="joy"] .th-m-neutral { display: none; }
#thMascot[data-emo="joy"] .th-m-big     { display: block; }
#thMascot[data-emo="joy"] .th-prop-spark { display: block; }
#thMascot[data-emo="joy"] .th-blush { opacity: .6; }
#thMascot[data-emo="joy"] .th-bob { animation: thJoy .62s cubic-bezier(.3, 1.5, .5, 1) infinite; }
#thMascot[data-emo="joy"] .th-fan { animation: thFanOpen .8s var(--th-ease, cubic-bezier(.22, 1, .36, 1)) infinite; }
@keyframes thJoy {
  0%, 100% { transform: translateY(0)    scale(1, 1); }
  30%      { transform: translateY(-9px) scale(.97, 1.05); }
  60%      { transform: translateY(0)    scale(1.05, .95); }
}

/* ---------------------------------------------------------- LAUGHING */
#thMascot[data-emo="laugh"] .th-eye-open { display: none; }
#thMascot[data-emo="laugh"] .th-eye-joy  { display: block; }
#thMascot[data-emo="laugh"] .th-m-neutral { display: none; }
#thMascot[data-emo="laugh"] .th-m-big     { display: block; }
#thMascot[data-emo="laugh"] .th-prop-spark { display: block; }
#thMascot[data-emo="laugh"] .th-bob  { animation: thLaugh .26s ease-in-out infinite; }
#thMascot[data-emo="laugh"] .th-head { animation: thLaughHead .26s ease-in-out infinite; }
@keyframes thLaugh { 0%, 100% { transform: translateY(0) rotate(-1.5deg); } 50% { transform: translateY(-3px) rotate(1.5deg); } }
@keyframes thLaughHead { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(3deg); } }

/* ---------------------------------------------------------- IN LOVE */
#thMascot[data-emo="love"] .th-eye-open { display: none; }
#thMascot[data-emo="love"] .th-eye-love { display: block; }
#thMascot[data-emo="love"] .th-m-neutral { display: none; }
#thMascot[data-emo="love"] .th-m-smile   { display: block; }
#thMascot[data-emo="love"] .th-blush { opacity: .95; }
#thMascot[data-emo="love"] .th-prop-hearts { display: block; }
#thMascot[data-emo="love"] .th-bob { animation: thSway 1.5s ease-in-out infinite; }
@keyframes thSway { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }

.th-prop-hearts .th-h1 { animation: thFloat 2.2s ease-out infinite; }
.th-prop-hearts .th-h2 { animation: thFloat 2.2s ease-out .5s infinite; }
.th-prop-hearts .th-h3 { animation: thFloat 2.2s ease-out 1s infinite; }
@keyframes thFloat {
  0%   { opacity: 0; transform: translateY(6px) scale(.6); }
  25%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(-22px) scale(1.1); }
}

/* ---------------------------------------------------------- PLAYFUL */
#thMascot[data-emo="playful"] .th-eye-open { display: none; }
#thMascot[data-emo="playful"] .th-eye-wink { display: block; }
#thMascot[data-emo="playful"] .th-m-neutral { display: none; }
#thMascot[data-emo="playful"] .th-m-big     { display: block; }
#thMascot[data-emo="playful"] .th-prop-ball { display: block; }
#thMascot[data-emo="playful"] .th-bob  { animation: thPounce .9s cubic-bezier(.3, 1.4, .5, 1) infinite; }
#thMascot[data-emo="playful"] .th-tail { animation-duration: .45s; }
#thMascot[data-emo="playful"] .th-leg-fl { animation: thPaw .45s ease-in-out infinite; }
@keyframes thPounce {
  0%, 100% { transform: translateY(0) rotate(0); }
  25%      { transform: translateY(-8px) rotate(-6deg); }
  55%      { transform: translateY(2px)  rotate(3deg); }
}
@keyframes thPaw { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(48deg); } }
.th-prop-ball .th-ball { animation: thBall .9s cubic-bezier(.4, 0, .6, 1) infinite; }
@keyframes thBall {
  0%, 100% { transform: translate(0, 0) scale(1, 1) rotate(0); }
  30%      { transform: translate(-9px, -26px) scale(.94, 1.06) rotate(-90deg); }
  60%      { transform: translate(3px, 2px) scale(1.1, .9) rotate(-180deg); }
}

/* ---------------------------------------------------------- EATING */
#thMascot[data-emo="eat"] .th-m-neutral { display: none; }
#thMascot[data-emo="eat"] .th-m-chew    { display: block; animation: thChew .34s ease-in-out infinite;
                                          transform-box: fill-box; transform-origin: top center; }
#thMascot[data-emo="eat"] .th-prop-food { display: block; }
#thMascot[data-emo="eat"] .th-head { animation: thNibble .34s ease-in-out infinite; }
#thMascot[data-emo="eat"] .th-blush { opacity: .6; }
@keyframes thChew  { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(.42); } }
@keyframes thNibble { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(1.6px) rotate(1.5deg); } }
.th-prop-food .th-food { animation: thFoodBite 1.6s ease-in-out infinite; }
@keyframes thFoodBite {
  0%      { opacity: 0; transform: translateY(14px) scale(.7); }
  15%     { opacity: 1; transform: translateY(4px)  scale(1); }
  70%     { opacity: 1; transform: translateY(0)    scale(.86); }
  100%    { opacity: 0; transform: translateY(-2px) scale(.5); }
}
.th-prop-food .th-c1 { animation: thCrumb 1.6s ease-in .4s infinite; }
.th-prop-food .th-c2 { animation: thCrumb 1.6s ease-in .9s infinite; }
@keyframes thCrumb { 0% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(14px); } }

/* ---------------------------------------------------------- SLEEPING */
#thMascot[data-emo="sleep"] .th-eye-open,
#thMascot.th-sleep .th-eye-open { display: none; }
#thMascot[data-emo="sleep"] .th-eye-shut,
#thMascot.th-sleep .th-eye-shut { display: block; }
#thMascot[data-emo="sleep"] .th-m-neutral { display: none; }
#thMascot[data-emo="sleep"] .th-m-flat    { display: block; }
#thMascot[data-emo="sleep"] .th-prop-zzz,
#thMascot.th-sleep .th-prop-zzz { display: block; }
#thMascot[data-emo="sleep"] .th-bob { animation: thSnooze 3.4s ease-in-out infinite; }
#thMascot[data-emo="sleep"] .th-head { animation: thNod 3.4s ease-in-out infinite; }
#thMascot[data-emo="sleep"] .th-tail { animation-duration: 5s; }
#thMascot[data-emo="sleep"] .th-leg-bl,
#thMascot[data-emo="sleep"] .th-leg-br { transform: rotate(-40deg); }
#thMascot[data-emo="sleep"] .th-leg-bl .th-shin,
#thMascot[data-emo="sleep"] .th-leg-br .th-shin { transform: rotate(46deg); }
@keyframes thSnooze { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(1.5px) scale(1.02, .98); } }
@keyframes thNod    { 0%, 100% { transform: rotate(0) translateY(0); } 50% { transform: rotate(4deg) translateY(2px); } }

.th-prop-zzz .th-z1 { animation: thZzz 2.6s ease-in-out infinite; }
.th-prop-zzz .th-z2 { animation: thZzz 2.6s ease-in-out .8s infinite; }
@keyframes thZzz {
  0%   { opacity: 0; transform: translate(0, 0) scale(.7); }
  35%  { opacity: 1; }
  100% { opacity: 0; transform: translate(12px, -22px) scale(1.15); }
}

/* ---------------------------------------------------------- YAWNING */
#thMascot[data-emo="yawn"] .th-eye-open { display: none; }
#thMascot[data-emo="yawn"] .th-eye-shut { display: block; }
#thMascot[data-emo="yawn"] .th-m-neutral { display: none; }
#thMascot[data-emo="yawn"] .th-m-yawn    { display: block; animation: thYawn 2.2s ease-in-out both;
                                           transform-box: fill-box; transform-origin: top center; }
#thMascot[data-emo="yawn"] .th-head { animation: thYawnHead 2.2s ease-in-out; }
@keyframes thYawn     { 0%, 100% { transform: scaleY(.2); } 35%, 65% { transform: scaleY(1.15); } }
@keyframes thYawnHead { 0%, 100% { transform: rotate(0); } 40% { transform: rotate(-10deg) translateY(-2px); } }

/* ---------------------------------------------------------- CRYING */
#thMascot[data-emo="cry"] .th-eye-open  { display: none; }
#thMascot[data-emo="cry"] .th-eye-sad   { display: block; }
#thMascot[data-emo="cry"] .th-brows-sad { display: block; }
#thMascot[data-emo="cry"] .th-m-neutral { display: none; }
#thMascot[data-emo="cry"] .th-m-frown   { display: block; }
#thMascot[data-emo="cry"] .th-prop-tears { display: block; }
#thMascot[data-emo="cry"] .th-blush { opacity: .7; }
#thMascot[data-emo="cry"] .th-bob  { animation: thSob .42s ease-in-out infinite; }
#thMascot[data-emo="cry"] .th-head { animation: thSobHead .42s ease-in-out infinite; }
#thMascot[data-emo="cry"] .th-tail { animation: none; transform: rotate(-26deg); }
#thMascot[data-emo="cry"] .th-ear-l { animation: none; transform: rotate(-22deg); }
#thMascot[data-emo="cry"] .th-ear-r { animation: none; transform: rotate(22deg); }
@keyframes thSob     { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1.8px); } }
@keyframes thSobHead { 0%, 100% { transform: rotate(-1deg) translateY(1px); } 50% { transform: rotate(1deg) translateY(0); } }

.th-prop-tears .th-tear-l  { animation: thTearFall 1.05s ease-in infinite; }
.th-prop-tears .th-tear-r  { animation: thTearFall 1.05s ease-in .28s infinite; }
.th-prop-tears .th-tear-l2 { animation: thTearFall 1.05s ease-in .55s infinite; }
.th-prop-tears .th-tear-r2 { animation: thTearFall 1.05s ease-in .82s infinite; }
@keyframes thTearFall {
  0%   { opacity: 0; transform: translateY(-2px) scale(.5); }
  18%  { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(28px) scale(.85); }
}

/* ---------------------------------------------------------- ANGRY */
#thMascot[data-emo="angry"] .th-brows { display: block; }
#thMascot[data-emo="angry"] .th-m-neutral { display: none; }
#thMascot[data-emo="angry"] .th-m-grit    { display: block; }
#thMascot[data-emo="angry"] .th-prop-anger { display: block; }
#thMascot[data-emo="angry"] .th-blush { opacity: .9; }
#thMascot[data-emo="angry"] .th-head  { filter: saturate(1.45) brightness(1.03); animation: thFume .18s ease-in-out infinite; }
#thMascot[data-emo="angry"] .th-bob   { animation: thStomp .5s ease-in-out infinite; }
#thMascot[data-emo="angry"] .th-tail  { animation-duration: .38s; }
#thMascot[data-emo="angry"] .th-leg-fl { animation: thStompLeg .5s ease-in-out infinite; }
#thMascot[data-emo="angry"] .th-leg-fr { animation: thStompLeg .5s ease-in-out .25s infinite; }
@keyframes thFume  { 0%, 100% { transform: translateX(-.6px); } 50% { transform: translateX(.6px); } }
@keyframes thStomp { 0%, 100% { transform: translateY(0) scale(1); } 40% { transform: translateY(-4px) scale(1.03, .97); } }
@keyframes thStompLeg { 0%, 100% { transform: rotate(0); } 45% { transform: rotate(34deg); } }

.th-prop-anger .th-vein { animation: thVein .5s ease-in-out infinite; }
@keyframes thVein { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.22); } }
.th-prop-anger .th-s1 { animation: thSteam 1.2s ease-out infinite; }
.th-prop-anger .th-s2 { animation: thSteam 1.2s ease-out .35s infinite; }
.th-prop-anger .th-s3 { animation: thSteam 1.2s ease-out .7s infinite; }
@keyframes thSteam {
  0%   { opacity: 0; transform: translateY(4px) scale(.5); }
  30%  { opacity: .85; }
  100% { opacity: 0; transform: translateY(-16px) scale(1.5); }
}

/* ---------------------------------------------------------- SURPRISED */
#thMascot[data-emo="surprise"] .th-eye-open { display: none; }
#thMascot[data-emo="surprise"] .th-eye-wide { display: block; }
#thMascot[data-emo="surprise"] .th-m-neutral { display: none; }
#thMascot[data-emo="surprise"] .th-m-o       { display: block; }
#thMascot[data-emo="surprise"] .th-prop-excl { display: block; }
#thMascot[data-emo="surprise"] .th-bob   { animation: thStartle .5s cubic-bezier(.3, 1.6, .5, 1) both; }
#thMascot[data-emo="surprise"] .th-ear-l { animation: none; transform: rotate(14deg); }
#thMascot[data-emo="surprise"] .th-ear-r { animation: none; transform: rotate(-14deg); }
@keyframes thStartle {
  0%   { transform: translateY(0) scale(1); }
  30%  { transform: translateY(-12px) scale(1.08, .94); }
  60%  { transform: translateY(0) scale(.96, 1.04); }
  100% { transform: translateY(0) scale(1); }
}
.th-prop-excl .th-excl { animation: thExcl .5s cubic-bezier(.3, 1.6, .5, 1) both; }
@keyframes thExcl {
  0%   { opacity: 0; transform: scale(.2); }
  60%  { opacity: 1; transform: scale(1.2); }
  100% { opacity: 1; transform: scale(1); }
}

/* ---------------------------------------------------------- SCARED */
#thMascot[data-emo="scared"] .th-eye-open  { display: none; }
#thMascot[data-emo="scared"] .th-eye-wide  { display: block; }
#thMascot[data-emo="scared"] .th-brows-sad { display: block; }
#thMascot[data-emo="scared"] .th-m-neutral { display: none; }
#thMascot[data-emo="scared"] .th-m-frown   { display: block; }
#thMascot[data-emo="scared"] .th-prop-sweat { display: block; }
#thMascot[data-emo="scared"] .th-bob { animation: thTremble .09s linear infinite; }
#thMascot[data-emo="scared"] .th-tail { animation: none; transform: rotate(-34deg); }
@keyframes thTremble {
  0%, 100% { transform: translate(-.9px, 0); }
  50%      { transform: translate(.9px, 0); }
}
.th-prop-sweat .th-drop { animation: thDrop 1.1s ease-in infinite; }
@keyframes thDrop {
  0%   { opacity: 0; transform: translateY(-4px) scale(.5); }
  25%  { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(20px) scale(.8); }
}

/* ---------------------------------------------------------- THINKING */
#thMascot[data-emo="think"] .th-eye-open { display: none; }
#thMascot[data-emo="think"] .th-eye-wink { display: block; }
#thMascot[data-emo="think"] .th-m-neutral { display: none; }
#thMascot[data-emo="think"] .th-m-flat    { display: block; }
#thMascot[data-emo="think"] .th-prop-think { display: block; }
#thMascot[data-emo="think"] .th-head { animation: thPonder 2.4s ease-in-out infinite; }
@keyframes thPonder { 0%, 100% { transform: rotate(-7deg); } 50% { transform: rotate(-2deg) translateY(-1px); } }
.th-prop-think circle,
.th-prop-think ellipse { transform-box: fill-box; transform-origin: center; }
.th-prop-think .th-t1 { animation: thBubbleUp 1.8s ease-out infinite; }
.th-prop-think .th-t2 { animation: thBubbleUp 1.8s ease-out .22s infinite; }
.th-prop-think .th-t3 { animation: thBubbleUp 1.8s ease-out .44s infinite; }
@keyframes thBubbleUp {
  0%       { opacity: 0; transform: scale(.4); }
  30%, 75% { opacity: 1; transform: scale(1); }
  100%     { opacity: 0; transform: scale(1.05); }
}

/* ---------------------------------------------------------- DANCING */
#thMascot[data-emo="dance"] .th-eye-open { display: none; }
#thMascot[data-emo="dance"] .th-eye-joy  { display: block; }
#thMascot[data-emo="dance"] .th-m-neutral { display: none; }
#thMascot[data-emo="dance"] .th-m-big     { display: block; }
#thMascot[data-emo="dance"] .th-prop-notes { display: block; }
#thMascot[data-emo="dance"] .th-bob { animation: thDance .56s ease-in-out infinite; }
#thMascot[data-emo="dance"] .th-head { animation: thDanceHead .56s ease-in-out infinite; }
#thMascot[data-emo="dance"] .th-leg-fl { animation: thKick .56s ease-in-out infinite; }
#thMascot[data-emo="dance"] .th-leg-fr { animation: thKick .56s ease-in-out .28s infinite; }
#thMascot[data-emo="dance"] .th-tail { animation-duration: .56s; }
#thMascot[data-emo="dance"] .th-fan  { animation: thFan 1.1s ease-in-out infinite; }
@keyframes thDance {
  0%, 100% { transform: translateY(0) rotate(-5deg); }
  25%      { transform: translateY(-5px) rotate(0); }
  50%      { transform: translateY(0) rotate(5deg); }
  75%      { transform: translateY(-5px) rotate(0); }
}
@keyframes thDanceHead { 0%, 100% { transform: rotate(5deg); } 50% { transform: rotate(-5deg); } }
@keyframes thKick { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(38deg); } }
.th-prop-notes .th-n1 { animation: thNote 1.6s ease-out infinite; }
.th-prop-notes .th-n2 { animation: thNote 1.6s ease-out .55s infinite; }
@keyframes thNote {
  0%   { opacity: 0; transform: translateY(8px) rotate(-8deg) scale(.7); }
  25%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(-20px) rotate(10deg) scale(1.05); }
}

/* ---------------------------------------------------------- WAVING */
#thMascot[data-emo="wave"] .th-eye-open { display: none; }
#thMascot[data-emo="wave"] .th-eye-joy  { display: block; }
#thMascot[data-emo="wave"] .th-m-neutral { display: none; }
#thMascot[data-emo="wave"] .th-m-smile   { display: block; }
#thMascot[data-emo="wave"] .th-leg-fl { animation: thWave .5s ease-in-out infinite; }
#thMascot[data-emo="wave"] .th-leg-fl .th-shin { animation: thWaveShin .5s ease-in-out infinite; }
#thMascot[data-emo="wave"] .th-wing-l { animation: thWingWave .5s ease-in-out infinite; }
#thMascot[data-emo="wave"] .th-trunk  { animation: thWaveTrunk .6s ease-in-out infinite; }
#thMascot[data-emo="wave"] .th-bob    { animation: thSway 1.2s ease-in-out infinite; }
@keyframes thWave      { 0%, 100% { transform: rotate(112deg); } 50% { transform: rotate(140deg); } }
@keyframes thWaveShin  { 0%, 100% { transform: rotate(-18deg); } 50% { transform: rotate(18deg); } }
@keyframes thWaveTrunk { 0%, 100% { transform: rotate(-16deg); } 50% { transform: rotate(16deg); } }
@keyframes thWingWave  { 0%, 100% { transform: rotate(-26deg); } 50% { transform: rotate(-52deg); } }

/* ---------------------------------------------------------- DIZZY */
#thMascot[data-emo="dizzy"] .th-eye-open  { display: none; }
#thMascot[data-emo="dizzy"] .th-eye-dizzy { display: block; animation: thSpinEye 1.1s linear infinite;
                                            transform-box: fill-box; transform-origin: center; }
#thMascot[data-emo="dizzy"] .th-m-neutral { display: none; }
#thMascot[data-emo="dizzy"] .th-m-o       { display: block; }
#thMascot[data-emo="dizzy"] .th-bob  { animation: thWobble .7s ease-in-out infinite; }
#thMascot[data-emo="dizzy"] .th-head { animation: thWobbleHead .7s ease-in-out infinite; }
@keyframes thSpinEye    { to { transform: rotate(360deg); } }
@keyframes thWobble     { 0%, 100% { transform: rotate(-7deg) translateX(-2px); } 50% { transform: rotate(7deg) translateX(2px); } }
@keyframes thWobbleHead { 0%, 100% { transform: rotate(6deg); } 50% { transform: rotate(-6deg); } }

/* ---------------------------------------------------------- SHY */
#thMascot[data-emo="shy"] .th-eye-open { display: none; }
#thMascot[data-emo="shy"] .th-eye-shut { display: block; }
#thMascot[data-emo="shy"] .th-m-neutral { display: none; }
#thMascot[data-emo="shy"] .th-m-smile   { display: block; }
#thMascot[data-emo="shy"] .th-blush { opacity: 1; }
#thMascot[data-emo="shy"] .th-prop-shy { display: block; }
#thMascot[data-emo="shy"] .th-head { animation: thShy 1.6s ease-in-out infinite; }
#thMascot[data-emo="shy"] .th-leg-fl { transform: rotate(28deg); }
@keyframes thShy { 0%, 100% { transform: rotate(-8deg) translateY(1px); } 50% { transform: rotate(-3deg); } }

/* =====================================================================
   6. SPEECH BUBBLE
   ===================================================================== */
#thBubble {
  position: fixed;
  z-index: 2147482600;
  max-width: 230px;
  background: var(--th-card, #fff);
  color: var(--th-ink, #1e293b);
  border: 1px solid rgba(125, 125, 125, .2);
  padding: 9px 13px;
  border-radius: 14px 14px 14px 4px;
  font: 500 12.5px/1.45 'Inter', system-ui, sans-serif;
  box-shadow: 0 14px 30px -14px rgba(0, 0, 0, .45);
  opacity: 0;
  transform: translateY(8px) scale(.94);
  transition: opacity .25s ease, transform .25s var(--th-ease, cubic-bezier(.22, 1, .36, 1));
  pointer-events: none;
}
#thBubble.th-show { opacity: 1; transform: none; }

/* =====================================================================
   7. QUIET, LITE, PRINT AND CAPTURE
   ===================================================================== */
/* Only while the user is typing does it hold completely still. */
#thMascot.th-quiet * { animation-play-state: paused !important; }

/* Battery saver stops everything that runs FOREVER — the tail, the ears,
   the breathing, the blink. It does not stop the mascot feeling something:
   a mood is a class change and a short, finite animation, and switching it
   off left the mascot standing there blank, which is what people noticed.
   Roaming stays off, which is where the actual cost was. */
html[data-th-lite="1"] #thMascot .th-tail,
html[data-th-lite="1"] #thMascot .th-eyelid,
html[data-th-lite="1"] #thMascot .th-shadow,
html[data-th-lite="1"] #thMascot .th-torso,
html[data-th-lite="1"] #thMascot .th-wing-l,
html[data-th-lite="1"] #thMascot .th-wing-r,
html[data-th-lite="1"] #thMascot .th-fan,
html[data-th-lite="1"] #thMascot .th-ear-l,
html[data-th-lite="1"] #thMascot .th-ear-r,
html[data-th-lite="1"] #thMascot .th-trunk,
html[data-th-lite="1"] #thMascot .th-tongue,
html[data-th-lite="1"] #thMascot .th-crest,
html[data-th-lite="1"] #thMascot .th-bell { animation: none !important; }

/* …but while a mood is on, the parts it drives are allowed to move. */
html[data-th-lite="1"] #thMascot[data-emo] .th-tail,
html[data-th-lite="1"] #thMascot[data-emo] .th-fan { animation-play-state: running; }

html[data-th-motion="off"] #thMascot { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  #thMascot svg * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; }
}

@media print {
  #thMascot, #thBubble { display: none !important; }
}

@media (max-width: 640px) {
  #thMascot { width: 66px; height: 66px; }
  #thBubble { max-width: 190px; font-size: 12px; }
}

.th-capturing #thMascot,
.th-capturing #thBubble { display: none !important; }


/* =====================================================================
   8. THE PICKER
   AmrichMascot.mountPicker() fills any [data-th-mascot-picker] element,
   so the profile page and the app's bottom sheet share one component.
   It inherits colour from whatever card it is dropped into.
   ===================================================================== */
.th-mascot-picker {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: 10px;
}
.th-mascot-picker .th-mp-tile {
  border: 2px solid transparent;
  border-radius: 16px;
  background: rgba(125, 125, 125, .08);
  padding: 8px 4px 8px;
  display: block;
  width: 100%;
  cursor: pointer;
  font: inherit;
  color: inherit;
  -webkit-tap-highlight-color: transparent;
  transition: transform .16s var(--th-ease, cubic-bezier(.22, 1, .36, 1)), border-color .16s ease, background .16s ease;
}
.th-mascot-picker .th-mp-tile:active { transform: scale(.94); }
.th-mascot-picker .th-mp-tile.th-active {
  border-color: var(--th-accent, #2563eb);
  background: color-mix(in srgb, var(--th-accent, #2563eb) 10%, transparent);
}
@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .th-mascot-picker .th-mp-tile.th-active { background: rgba(125, 125, 125, .16); }
}
.th-mascot-picker .th-mp-tile svg {
  width: 100%;
  height: 54px;
  display: block;
  overflow: visible;
}
.th-mascot-picker .th-mp-tile b {
  display: block;
  margin-top: 5px;
  font-size: 11.5px;
  font-weight: 700;
  text-align: center;
  line-height: 1.2;
}
.th-mascot-picker .th-mp-tile i {
  display: block;
  font-size: 10px;
  font-style: normal;
  text-align: center;
  opacity: .55;
}

/* A tile is a portrait. Nothing in it animates — every animation rule is
   scoped to #thMascot — but the blink lid is only out of the way *because*
   of an animation, and the mood props are only hidden by one, so both are
   switched off here explicitly. */
.th-mascot-picker .th-props,
.th-mascot-picker .th-eyelid,
.th-mascot-picker .th-shadow-g,
.th-mascot-picker .th-brows,
.th-mascot-picker .th-brows-sad,
.th-mascot-picker .th-eye,
.th-mascot-picker .th-m { display: none; }
.th-mascot-picker .th-eye-open,
.th-mascot-picker .th-m-smile { display: block; }
.th-mascot-picker .th-blush { opacity: .42; }


/* =====================================================================
   9. WEATHER MOODS
   Each theme names a signature reaction and mascot.js weaves it into the
   idle rotation — shivering on Winter, sweating on Sunny Day, cowering
   when weather.js fires a lightning strike, soaked on Monsoon, blissful
   on Spring Bloom, a salute on Independence Day, an anjali on the pujas.
   ===================================================================== */

/* ---------------------------------------------------------- SHIVERING */
#thMascot[data-emo="shiver"] .th-eye-open  { display: none; }
#thMascot[data-emo="shiver"] .th-eye-sad   { display: block; }
#thMascot[data-emo="shiver"] .th-m-neutral { display: none; }
#thMascot[data-emo="shiver"] .th-m-chatter { display: block; animation: thChatter .11s steps(2) infinite; }
#thMascot[data-emo="shiver"] .th-prop-breath { display: block; }
#thMascot[data-emo="shiver"] .th-blush { opacity: .85; }
/* the whole body vibrates fast and small — a shiver, not a wobble */
#thMascot[data-emo="shiver"] .th-bob  { animation: thShiver .085s linear infinite; }
#thMascot[data-emo="shiver"] .th-head { animation: thShiverHead .085s linear infinite; }
/* it pulls its legs in and hunches */
#thMascot[data-emo="shiver"] .th-leg-fl { transform: rotate(9deg); }
#thMascot[data-emo="shiver"] .th-leg-fr { transform: rotate(-9deg); }
#thMascot[data-emo="shiver"] .th-tail   { animation: none; transform: rotate(-30deg); }
#thMascot[data-emo="shiver"] .th-ear-l  { animation: none; transform: rotate(-16deg); }
#thMascot[data-emo="shiver"] .th-ear-r  { animation: none; transform: rotate(16deg); }
/* a cold cast over the fur, so it looks cold as well as acting cold */
#thMascot[data-emo="shiver"] .th-cat-body { filter: saturate(.72) hue-rotate(-8deg) brightness(1.04); }
@keyframes thShiver     { 0%, 100% { transform: translate(-.7px, 0); } 50% { transform: translate(.7px, .4px); } }
@keyframes thShiverHead { 0%, 100% { transform: translate(.5px, 0) rotate(.6deg); } 50% { transform: translate(-.5px, .3px) rotate(-.6deg); } }
@keyframes thChatter    { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(.9px); } }

.th-prop-breath .th-puff  { animation: thPuff 2.3s ease-out infinite; }
.th-prop-breath .th-flake { animation: thFlakeSit 3.4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes thPuff {
  0%   { opacity: 0; transform: translate(-3px, 2px) scale(.4); }
  25%  { opacity: .85; }
  100% { opacity: 0; transform: translate(12px, -5px) scale(1.5); }
}
@keyframes thFlakeSit { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(8deg); } }

/* ---------------------------------------------------------- SWEATING */
#thMascot[data-emo="sweat"] .th-eye-open  { display: none; }
#thMascot[data-emo="sweat"] .th-eye-shut  { display: block; }
#thMascot[data-emo="sweat"] .th-m-neutral { display: none; }
#thMascot[data-emo="sweat"] .th-m-pant    { display: block; }
#thMascot[data-emo="sweat"] .th-prop-heat { display: block; }
#thMascot[data-emo="sweat"] .th-blush { opacity: 1; }
/* heavy, slow breathing and a body that has given up standing straight */
#thMascot[data-emo="sweat"] .th-bob  { animation: thWilt 1.5s ease-in-out infinite; }
#thMascot[data-emo="sweat"] .th-head { animation: thWiltHead 1.5s ease-in-out infinite; }
#thMascot[data-emo="sweat"] .th-tail { animation: none; transform: rotate(-24deg); }
#thMascot[data-emo="sweat"] .th-ear-l { animation: none; transform: rotate(-24deg); }
#thMascot[data-emo="sweat"] .th-ear-r { animation: none; transform: rotate(24deg); }
#thMascot[data-emo="sweat"] .th-wing-l { animation: thFan1 .4s ease-in-out infinite; }
#thMascot[data-emo="sweat"] .th-wing-r { animation: thFan2 .4s ease-in-out infinite; }
#thMascot[data-emo="sweat"] .th-cat-body { filter: saturate(1.12) brightness(1.03); }
@keyframes thWilt     { 0%, 100% { transform: translateY(1.5px) scale(1, .985); } 50% { transform: translateY(0) scale(1.01, 1); } }
@keyframes thWiltHead { 0%, 100% { transform: translateY(2px) rotate(3deg); } 50% { transform: translateY(1px) rotate(1deg); } }
/* the birds fan themselves with their wings */
@keyframes thFan1 { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(-26deg); } }
@keyframes thFan2 { 0%, 100% { transform: rotate(6deg); } 50% { transform: rotate(26deg); } }

.th-prop-heat .th-sw1 { animation: thDrop 1.15s ease-in infinite; }
.th-prop-heat .th-sw2 { animation: thDrop 1.15s ease-in .38s infinite; }
.th-prop-heat .th-sw3 { animation: thDrop 1.15s ease-in .76s infinite; }
.th-prop-heat .th-shimmer { animation: thShimmer 2.4s ease-in-out infinite; }
@keyframes thShimmer {
  0%   { opacity: 0; transform: translateY(4px) scaleX(.9); }
  35%  { opacity: .8; }
  100% { opacity: 0; transform: translateY(-8px) scaleX(1.15); }
}
.th-prop-heat + * .th-pant-tongue,
#thMascot[data-emo="sweat"] .th-pant-tongue {
  transform-box: fill-box; transform-origin: top center;
  animation: thPantFast .34s ease-in-out infinite;
}
@keyframes thPantFast { 0%, 100% { transform: scaleY(.85); } 50% { transform: scaleY(1.3); } }

/* ---------------------------------------------------------- COWERING */
#thMascot[data-emo="cower"] .th-eye-open  { display: none; }
#thMascot[data-emo="cower"] .th-eye-wide  { display: block; }
#thMascot[data-emo="cower"] .th-brows-sad { display: block; }
#thMascot[data-emo="cower"] .th-m-neutral { display: none; }
#thMascot[data-emo="cower"] .th-m-o       { display: block; }
#thMascot[data-emo="cower"] .th-prop-sweat { display: block; }
#thMascot[data-emo="cower"] .th-prop-excl  { display: block; }
/* it drops low, flattens its ears and shakes harder than 'scared' does */
#thMascot[data-emo="cower"] .th-bob {
  animation: thCower .07s linear infinite;
  transform-origin: 50px 88px;
}
#thMascot[data-emo="cower"] .th-cat-body { transform: translateY(5px) scale(1.06, .86); }
#thMascot[data-emo="cower"] .th-leg-bl { transform: rotate(-42deg); }
#thMascot[data-emo="cower"] .th-leg-br { transform: rotate(42deg); }
#thMascot[data-emo="cower"] .th-leg-bl .th-shin { transform: rotate(48deg); }
#thMascot[data-emo="cower"] .th-leg-br .th-shin { transform: rotate(-48deg); }
#thMascot[data-emo="cower"] .th-ear-l { animation: none; transform: rotate(-34deg); }
#thMascot[data-emo="cower"] .th-ear-r { animation: none; transform: rotate(34deg); }
#thMascot[data-emo="cower"] .th-tail  { animation: none; transform: rotate(-42deg); }
@keyframes thCower { 0%, 100% { transform: translate(-1.4px, 0); } 50% { transform: translate(1.4px, 0); } }

/* ---------------------------------------------------------- SOAKED */
#thMascot[data-emo="wet"] .th-eye-open  { display: none; }
#thMascot[data-emo="wet"] .th-eye-sad   { display: block; }
#thMascot[data-emo="wet"] .th-brows-sad { display: block; }
#thMascot[data-emo="wet"] .th-m-neutral { display: none; }
#thMascot[data-emo="wet"] .th-m-flat    { display: block; }
#thMascot[data-emo="wet"] .th-prop-drip { display: block; }
/* wet fur clings: narrower, taller, darker, and everything droops */
#thMascot[data-emo="wet"] .th-cat-body { transform: scale(.94, 1.02); filter: saturate(.8) brightness(.92); }
#thMascot[data-emo="wet"] .th-bob   { animation: thDroop 2.6s ease-in-out infinite; }
#thMascot[data-emo="wet"] .th-tail  { animation: none; transform: rotate(-38deg); }
#thMascot[data-emo="wet"] .th-ear-l { animation: none; transform: rotate(-28deg); }
#thMascot[data-emo="wet"] .th-ear-r { animation: none; transform: rotate(28deg); }
#thMascot[data-emo="wet"] .th-head  { animation: thDroopHead 2.6s ease-in-out infinite; }
@keyframes thDroop     { 0%, 100% { transform: translateY(1px); } 50% { transform: translateY(2.2px); } }
@keyframes thDroopHead { 0%, 100% { transform: rotate(2deg) translateY(1.5px); } 50% { transform: rotate(-1deg) translateY(2.5px); } }
/* one good shake, once, at the start */
#thMascot[data-emo="wet"] .th-rig { animation: thShakeOff .55s ease-in-out 2; }
@keyframes thShakeOff { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(4deg); } 75% { transform: rotate(-4deg); } }
#thMascot[data-emo="wet"].th-flip .th-rig { animation: thShakeOffFlip .55s ease-in-out 2; }
@keyframes thShakeOffFlip {
  0%, 100% { transform: scaleX(-1) rotate(0); }
  25%      { transform: scaleX(-1) rotate(4deg); }
  75%      { transform: scaleX(-1) rotate(-4deg); }
}
.th-prop-drip .th-dr1 { animation: thDrip 1.5s ease-in infinite; }
.th-prop-drip .th-dr2 { animation: thDrip 1.5s ease-in .5s infinite; }
.th-prop-drip .th-dr3 { animation: thDrip 1.5s ease-in 1s infinite; }
.th-prop-drip .th-puddle { animation: thPuddle 3.2s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes thDrip {
  0%   { opacity: 0; transform: translateY(-2px) scale(.5); }
  20%  { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(22px) scale(.8); }
}
@keyframes thPuddle { 0%, 100% { transform: scaleX(1); opacity: .4; } 50% { transform: scaleX(1.1); opacity: .55; } }

/* ---------------------------------------------------------- BLISSFUL */
#thMascot[data-emo="bliss"] .th-eye-open  { display: none; }
#thMascot[data-emo="bliss"] .th-eye-joy   { display: block; }
#thMascot[data-emo="bliss"] .th-m-neutral { display: none; }
#thMascot[data-emo="bliss"] .th-m-smile   { display: block; }
#thMascot[data-emo="bliss"] .th-prop-petals { display: block; }
#thMascot[data-emo="bliss"] .th-blush { opacity: .8; }
/* head tipped back, breathing it in, gentle sway */
#thMascot[data-emo="bliss"] .th-bob  { animation: thSway 2.6s ease-in-out infinite; }
#thMascot[data-emo="bliss"] .th-head { animation: thSniff 2.6s ease-in-out infinite; }
#thMascot[data-emo="bliss"] .th-torso { animation: thBreathe 2.4s ease-in-out infinite; }
@keyframes thSniff { 0%, 100% { transform: rotate(-4deg) translateY(-1px); } 50% { transform: rotate(-7deg) translateY(-2px); } }
.th-prop-petals .th-pt1 { animation: thPetalBy 3.4s linear infinite; }
.th-prop-petals .th-pt2 { animation: thPetalBy 3.4s linear .85s infinite; }
.th-prop-petals .th-pt3 { animation: thPetalBy 3.4s linear 1.7s infinite; }
.th-prop-petals .th-pt4 { animation: thPetalBy 3.4s linear 2.55s infinite; }
/* the one that has landed stays put, and wobbles when it breathes */
.th-prop-petals .th-pt-nose { animation: thPetalRest 3s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes thPetalRest { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }
@keyframes thPetalBy {
  0%   { opacity: 0; transform: translate(0, -6px) rotate(0); }
  15%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { opacity: 0; transform: translate(14px, 34px) rotate(200deg); }
}

/* ---------------------------------------------------------- SALUTE */
#thMascot[data-emo="salute"] .th-eye-open  { display: none; }
#thMascot[data-emo="salute"] .th-eye-open  { display: block; }
#thMascot[data-emo="salute"] .th-m-neutral { display: none; }
#thMascot[data-emo="salute"] .th-m-flat    { display: block; }
#thMascot[data-emo="salute"] .th-prop-salute    { display: block; }
#thMascot[data-emo="salute"] .th-prop-salutepaw { display: block; }
/* The paw is a drawn prop, not a rotated leg — see the note in mascot.js.
   It snaps up smartly, holds, and comes down. Nothing sways: it is
   standing to attention. */
#thMascot[data-emo="salute"] .th-salutepaw { animation: thSalutePaw 3s ease-out both; transform-box: fill-box; transform-origin: 88% 100%; }
#thMascot[data-emo="salute"] .th-bob   { animation: none; transform: translateY(-1px); }
#thMascot[data-emo="salute"] .th-tail  { animation: none; transform: rotate(6deg); }
#thMascot[data-emo="salute"] .th-torso { animation: none; }
#thMascot[data-emo="salute"] .th-head  { animation: thSaluteHead 3s ease-out both; }
@keyframes thSalutePaw {
  0%       { opacity: 0; transform: rotate(-52deg) translateY(6px); }
  14%      { opacity: 1; transform: rotate(4deg); }
  18%, 88% { opacity: 1; transform: rotate(0); }
  100%     { opacity: 0; transform: rotate(-40deg) translateY(5px); }
}
@keyframes thSaluteHead {
  0%       { transform: rotate(0); }
  16%, 88% { transform: rotate(-3deg) translateY(-1px); }
  100%     { transform: rotate(0); }
}
.th-prop-salute .th-sl1 { animation: thFloat 1.8s ease-out infinite; }
.th-prop-salute .th-sl2 { animation: thFloat 1.8s ease-out .6s infinite; }

/* ---------------------------------------------------------- ANJALI */
#thMascot[data-emo="pray"] .th-eye-open  { display: none; }
#thMascot[data-emo="pray"] .th-eye-shut  { display: block; }
#thMascot[data-emo="pray"] .th-m-neutral { display: none; }
#thMascot[data-emo="pray"] .th-m-flat    { display: block; }
#thMascot[data-emo="pray"] .th-prop-halo   { display: block; }
#thMascot[data-emo="pray"] .th-prop-anjali { display: block; }
/* The joined palms are a drawn prop for the same reason the salute is —
   rotating the front legs inward buried them in the belly. Nothing
   bounces and nothing is played for laughs: the same restraint the
   pratima artwork keeps. */
#thMascot[data-emo="pray"] .th-anjali { animation: thAnjali .7s var(--th-ease, cubic-bezier(.22, 1, .36, 1)) both; transform-box: fill-box; transform-origin: bottom center; }
#thMascot[data-emo="pray"] .th-leg-fl { transform: rotate(6deg); }
#thMascot[data-emo="pray"] .th-leg-fr { transform: rotate(-6deg); }
#thMascot[data-emo="pray"] .th-wing-l { animation: none; transform: rotate(-30deg); }
#thMascot[data-emo="pray"] .th-wing-r { animation: none; transform: rotate(30deg); }
@keyframes thAnjali {
  0%   { opacity: 0; transform: translateY(8px) scale(.85); }
  100% { opacity: 1; transform: none; }
}
#thMascot[data-emo="pray"] .th-bob    { animation: thBowSlow 4s ease-in-out infinite; }
#thMascot[data-emo="pray"] .th-head   { animation: thBowHead 4s ease-in-out infinite; }
#thMascot[data-emo="pray"] .th-tail   { animation-duration: 5s; }
@keyframes thBowSlow { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(1.6px); } }
@keyframes thBowHead { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(5deg) translateY(1.4px); } }
.th-prop-halo .th-halo  { animation: thHalo 5s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.th-prop-halo .th-halo2 { animation: thHalo 5s ease-in-out 1.2s infinite; transform-box: fill-box; transform-origin: center; }
@keyframes thHalo { 0%, 100% { opacity: .18; transform: scale(.94); } 50% { opacity: .5; transform: scale(1.02); } }

/* Battery saver: these moods keep their pose and their props, and drop
   the loops — same rule as the rest. */
html[data-th-lite="1"] #thMascot .th-puff,
html[data-th-lite="1"] #thMascot .th-shimmer,
html[data-th-lite="1"] #thMascot .th-halo,
html[data-th-lite="1"] #thMascot .th-halo2,
html[data-th-lite="1"] #thMascot .th-puddle { animation: none !important; }


/* =====================================================================
   10. WEATHER WEAR
   The second wearable slot. The festival owns the head; these sit
   somewhere else on purpose, so a topor and an umbrella can be worn at
   the same time without either being hidden.
   ===================================================================== */

/* The umbrella lives in `.th-wxhold`, a slot OUTSIDE the head group, so it
   sways with the body instead of being flung about by every head turn. */
#thMascot .th-wx-umbrella {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: thUmbrella 3.6s ease-in-out infinite;
}
@keyframes thUmbrella { 0%, 100% { transform: rotate(-2deg); } 50% { transform: rotate(2.5deg); } }
/* running with an umbrella tips it back into the wind */
#thMascot.th-run .th-wx-umbrella { animation-duration: .9s; }
.th-wx-umbrella .th-ud1 { animation: thDrip 1.4s ease-in infinite; }
.th-wx-umbrella .th-ud2 { animation: thDrip 1.4s ease-in .55s infinite; }

/* Earmuffs squash a little when it shivers, which sells the cold. */
#thMascot .th-wx-earmuffs { transform-box: fill-box; transform-origin: center; }
#thMascot[data-emo="shiver"] .th-wx-earmuffs { animation: thMuff .09s linear infinite; }
@keyframes thMuff { 0%, 100% { transform: translateX(-.4px); } 50% { transform: translateX(.4px); } }

/* Sunglasses hide the eyes, so the mood has to come from the mouth while
   they are on — and they come OFF for anything that needs the eyes. */
#thMascot .th-wx-shades { transform-box: fill-box; transform-origin: center; }
#thMascot[data-emo="cry"]      .th-wx-shades,
#thMascot[data-emo="love"]     .th-wx-shades,
#thMascot[data-emo="surprise"] .th-wx-shades,
#thMascot[data-emo="cower"]    .th-wx-shades,
#thMascot[data-emo="dizzy"]    .th-wx-shades,
#thMascot[data-emo="sleep"]    .th-wx-shades { display: none; }
/* a small tip-down when it is thinking */
#thMascot[data-emo="think"] .th-wx-shades { transform: translateY(2px); }

/* In the rain the umbrella keeps the worst off, so the soaked pose is
   softened when it is actually holding one. */
#thMascot[data-wx="rain"] .th-prop-drip .th-dr1,
#thMascot[data-wx="rain"] .th-prop-drip .th-dr2,
#thMascot[data-wx="drizzle"] .th-prop-drip .th-dr1,
#thMascot[data-wx="drizzle"] .th-prop-drip .th-dr2 { display: none; }

html[data-th-lite="1"] #thMascot .th-wx-umbrella { animation: none !important; }