/* ==========================================================================
   css/d2/mascot.css -- owner MASCOT-LIVE (8 Oct 2026). The living mascot: the rig's colours (night from the -night
   poses), its two sizes (tm-s under 40 px), the disc mount (tm-disc: launcher, chat avatar) and its eight states as
   classes on the rig root (tm--idle hello listening thinking answer found sorry sleepy). The rig is
   templates_v1/_mascot_rig.html; js/mascot.js switches the states, blinks, and pauses loops off-screen (tm-paused).
   Transform and opacity only. Reduced motion (or tm-rm): still poses with a 150 ms crossfade, no loops.
   ========================================================================== */
.tm{--m-body:#fff;--m-shade:#F6E7EC;--m-edge:#7A1E3A;--m-handle:#7A1E3A;--m-rim:#7A1E3A;--m-rim-hi:#B8325F;--m-face:#7A1E3A;
  --m-leaf:#2E9D5B;--m-vein:#E5F2EA;--m-tongue:#FF8FAB;--m-accent:#7A1E3A;--m-sh:#16130F;--m-sh-o:.09;--m-disc:#7A1E3A;
  --m-spring:cubic-bezier(.34,1.56,.64,1);--m-soft:cubic-bezier(.3,0,.2,1);display:inline-block;vertical-align:middle;overflow:visible}
@media (prefers-color-scheme:dark){.tm:not(:where([data-theme="light"] *)){--m-edge:#B8325F;--m-handle:#F6E7EC;--m-rim:#B8325F;--m-rim-hi:#FF8FAB;--m-accent:#FF8FAB;--m-sh:#000;--m-sh-o:.45;--m-disc:#B8325F}}
:where([data-theme="dark"]) .tm{--m-edge:#B8325F;--m-handle:#F6E7EC;--m-rim:#B8325F;--m-rim-hi:#FF8FAB;--m-accent:#FF8FAB;--m-sh:#000;--m-sh-o:.45;--m-disc:#B8325F}
.tm.tm-disc{--m-handle:#fff;--m-edge:#561127;--m-rim:#F6E7EC;--m-rim-hi:#fff}

/* ---- paint ---- */
.tm .tm-fill{fill:var(--m-body)}
.tm .tm-shade{fill:var(--m-shade)}
.tm .tm-hem{fill:var(--m-edge);stroke:var(--m-edge);stroke-width:8px;stroke-linejoin:round}
.tm .tm-rim rect{fill:var(--m-rim)}
.tm .tm-rimhi{fill:none;stroke:var(--m-rim-hi);stroke-width:2.4px;stroke-linecap:round;opacity:.55}
.tm .tm-handle{fill:none;stroke:var(--m-handle);stroke-width:8px;stroke-linecap:round}
.tm .tm-limb{fill:none;stroke:var(--m-handle);stroke-width:7px;stroke-linecap:round}
.tm .tm-hand{fill:var(--m-handle)}
.tm .tm-blade{fill:var(--m-leaf)}
.tm .tm-vein{fill:none;stroke:var(--m-vein);stroke-width:1.6px;stroke-linecap:round}
.tm .tm-iris,.tm .tm-lip{fill:var(--m-face)}
.tm .tm-lip{stroke:var(--m-face);stroke-width:2px;stroke-linejoin:round}
.tm .tm-hi{fill:#fff}
.tm .tm-cheek{fill:var(--m-face);opacity:.16}
.tm .tm-tongue{fill:var(--m-tongue)}
.tm .tm-ln{fill:none;stroke:var(--m-face);stroke-width:4.5px;stroke-linecap:round}
.tm .tm-happy .tm-ln{stroke-width:5px}
.tm .tm-brow{stroke-width:3.2px}
.tm .tm-shadow{fill:var(--m-sh);opacity:var(--m-sh-o)}
.tm .tm-bg{fill:var(--m-disc);display:none}
.tm .tm-waves path,.tm .tm-zz path{fill:none;stroke:var(--m-accent);stroke-width:3.4px;stroke-linecap:round;stroke-linejoin:round}
.tm .tm-dots circle{fill:var(--m-accent)}
.tm .tm-spark path{fill:var(--m-leaf)}

/* ---- pivots (user units of the 160 viewBox) ---- */
.tm .tm-fit{transform-origin:80px 80px}
.tm .tm-hop,.tm .tm-lean,.tm .tm-breathe{transform-origin:80px 132px}
.tm .tm-shadow{transform-origin:80px 146px}
.tm .tm-arm-r{transform-origin:123px 96px}
.tm .tm-arm-l{transform-origin:37px 96px}
.tm .tm-leaf,.tm .tm-sway{transform-origin:99px 33px}
.tm .tm-eye-l{transform-origin:63px 99px}
.tm .tm-eye-r{transform-origin:97px 99px}
.tm .tm-lid .tm-big{transform-origin:0 91.2px}
.tm .tm-lid .tm-sm{transform-origin:0 89.2px}
.tm .tm-spark path{transform-origin:142px 46px}
.tm .tm-zz path{transform-origin:20px 30px}

/* ---- sizes and mounts ---- */
.tm .tm-sm{display:none}
.tm.tm-s .tm-sm{display:inline}
.tm.tm-s :is(.tm-big,.tm-leaf,.tm-hi,.tm-cheek,.tm-rimhi,.tm-shadow,.tm-brow,.tm-x){display:none}
.tm.tm-s .tm-ln{stroke-width:7px}
.tm.tm-disc .tm-bg{display:inline}
.tm.tm-disc .tm-fit{transform:translateY(4px) scale(.78)}
.tm.tm-disc.tm-s .tm-fit{transform:translateY(4px) scale(.86)}
.tm.tm-disc :is(.tm-shadow,.tm-x){display:none}

/* ---- the rest pose (idle) and what every state change eases ---- */
.tm :is(.tm-lean,.tm-gaze,.tm-arm,.tm-leaf,.tm-lid ellipse){transition:transform .5s var(--m-spring),opacity .2s linear}
.tm :is(.tm-eye,.tm-happy,.tm-brow,.tm-mouth,.tm-x){transition:opacity .2s linear}
.tm .tm-arm{opacity:0}
.tm .tm-arm-r{transform:rotate(60deg) scale(.3)}
.tm .tm-arm-l{transform:rotate(-60deg) scale(.3)}
.tm .tm-lid ellipse{transform:scaleY(0)}
.tm :is(.tm-happy,.tm-brow,.tm-x,.tm-mouth){opacity:0}
.tm .tm-m-open{opacity:1}

/* ---- the eight states: still poses ---- */
.tm--hello .tm-lean{transform:translateX(-6px) rotate(-6deg)}
.tm--hello .tm-arm-r,.tm--answer .tm-arm{opacity:1;transform:none}
.tm--hello .tm-waves{opacity:1}
.tm--listening .tm-lean{transform:translateY(2px) rotate(3deg)}
.tm--listening .tm-gaze{transform:translate(-1px,4px)}
.tm--listening .tm-lid ellipse{transform:scaleY(.1)}
.tm--thinking .tm-gaze{transform:translate(2px,-7px)}
.tm--thinking .tm-dots{opacity:1}
.tm--answer .tm-arm-r{transform:rotate(32deg)}
.tm--answer .tm-arm-l{transform:rotate(-32deg)}
.tm--found .tm-eye{opacity:0}
.tm--found :is(.tm-happy,.tm-spark){opacity:1}
.tm--sorry .tm-lean{transform:translateY(3px) rotate(3deg);transition-duration:.7s;transition-timing-function:var(--m-soft)}
.tm--sorry .tm-gaze{transform:translateY(3px)}
.tm--sorry .tm-lid ellipse{transform:scaleY(.42)}
.tm--sorry .tm-brow{opacity:1}
.tm--sorry .tm-leaf{transform:rotate(40deg);transition-duration:.9s}
.tm--sleepy .tm-lean{transform:rotate(5deg);transition-duration:.9s;transition-timing-function:var(--m-soft)}
.tm--sleepy .tm-lid ellipse{transform:scaleY(.8);transition-timing-function:var(--m-soft)}
.tm--sleepy .tm-leaf{transform:rotate(55deg);transition-duration:1.1s}
.tm--sleepy .tm-zz{opacity:1}
:is(.tm--listening,.tm--thinking,.tm--sorry,.tm--sleepy) .tm-m-open{opacity:0}
.tm--listening .tm-m-calm,.tm--thinking .tm-m-small,.tm--sorry .tm-m-sad,.tm--sleepy .tm-m-sleepy{opacity:1}

/* ---- motion: breathing, the leaf's lagging sway, blinks, and each state's beat ---- */
@media (prefers-reduced-motion:no-preference){
  .tm:not(.tm-rm) .tm-breathe{animation:tm-breathe 3.8s ease-in-out infinite}
  .tm:not(.tm-rm) .tm-sway{animation:tm-sway 3.8s ease-in-out -1.1s infinite}
  .tm--sorry:not(.tm-rm) .tm-breathe{animation-duration:4.6s}
  .tm--sleepy:not(.tm-rm) .tm-breathe{animation:tm-breathe-deep 5.6s ease-in-out infinite}
  .tm.tm-blink:not(.tm-rm) .tm-eye{animation:tm-blink .16s ease-in-out}
  .tm--hello:not(.tm-rm) .tm-lean{animation:tm-hello-lean .9s ease-out}
  .tm--hello:not(.tm-rm) .tm-arm-r{animation:tm-wave 1.9s ease-in-out}
  .tm--hello:not(.tm-rm) .tm-sway{animation:tm-flick 1.4s ease-out .15s}
  .tm--thinking:not(.tm-rm) .tm-hop{animation:tm-bob 1.6s ease-in-out infinite alternate}
  .tm--thinking:not(.tm-rm) .tm-dots circle{animation:tm-dot 1.2s ease-in-out infinite}
  .tm--thinking:not(.tm-rm) .tm-dots circle:nth-child(2){animation-delay:.2s}
  .tm--thinking:not(.tm-rm) .tm-dots circle:nth-child(3){animation-delay:.4s}
  .tm--answer:not(.tm-rm) .tm-hop{animation:tm-pop .8s ease-in-out}
  .tm--found:not(.tm-rm) .tm-hop{animation:tm-hop 1.2s linear}
  .tm--found:not(.tm-rm) .tm-shadow{animation:tm-hop-sh 1.2s linear}
  .tm--found:not(.tm-rm) .tm-spark path{animation:tm-spark 1.3s ease-out}
  .tm--sleepy:not(.tm-rm) .tm-zz path{animation:tm-z 3.2s ease-in-out infinite}
  .tm--sleepy:not(.tm-rm) .tm-zz path+path{animation-delay:-1.6s}
}
@keyframes tm-breathe{50%{transform:scale(.99,1.025)}}
@keyframes tm-breathe-deep{45%{transform:scale(.98,1.045)}}
@keyframes tm-sway{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(5deg)}}
@keyframes tm-flick{0%{transform:none}20%{transform:rotate(14deg)}45%{transform:rotate(-8deg)}70%{transform:rotate(3deg)}100%{transform:rotate(-3deg)}}
@keyframes tm-blink{50%{transform:scaleY(.1)}}
@keyframes tm-hello-lean{0%{transform:none}18%{transform:translateY(2px) rotate(3deg)}55%{transform:translateX(-7px) rotate(-8deg)}80%{transform:translateX(-5.5px) rotate(-5deg)}100%{transform:translateX(-6px) rotate(-6deg)}}
@keyframes tm-wave{0%{opacity:0;transform:rotate(60deg) scale(.3)}12%{opacity:1;transform:rotate(-14deg) scale(1.05)}20%{transform:rotate(4deg)}32%{transform:rotate(-18deg)}44%{transform:rotate(10deg)}56%{transform:rotate(-14deg)}66%{transform:rotate(6deg)}76%{transform:rotate(-4deg)}86%,100%{opacity:1;transform:none}}
@keyframes tm-bob{to{transform:translateY(-3px) rotate(-1.5deg)}}
@keyframes tm-dot{0%,100%{opacity:.3}40%{opacity:1}}
@keyframes tm-pop{0%{transform:none}20%{transform:scale(1.05,.94)}50%{transform:translateY(-7px) scale(.97,1.04)}75%{transform:scale(1.02,.98)}100%{transform:none}}
@keyframes tm-hop{
  0%{transform:none;animation-timing-function:ease-out}
  14%{transform:scale(1.1,.88);animation-timing-function:cubic-bezier(.2,.7,.3,1)}
  32%{transform:translateY(-24px) scale(.92,1.1);animation-timing-function:ease-out}
  46%{transform:translateY(-28px) scale(1);animation-timing-function:cubic-bezier(.6,0,.9,.6)}
  62%{transform:scale(1.12,.86);animation-timing-function:ease-out}
  76%{transform:scale(.96,1.05)}
  88%{transform:scale(1.02,.98)}
  100%{transform:none}}
@keyframes tm-hop-sh{14%{transform:scale(1.08)}32%{transform:scale(.7)}46%{transform:scale(.62)}62%{transform:scale(1.1)}76%{transform:scale(.98)}}
@keyframes tm-spark{0%,30%{transform:scale(0)}52%{transform:scale(1.25) rotate(40deg)}72%{transform:scale(.92) rotate(75deg)}100%{transform:rotate(90deg)}}
@keyframes tm-z{0%{opacity:0;transform:translate(4px,6px) scale(.7)}30%{opacity:1}100%{opacity:0;transform:translate(-6px,-10px)}}

/* ---- reduced motion, off-screen: still poses, a short crossfade, nothing loops ---- */
@media (prefers-reduced-motion:reduce){.tm *{animation:none!important;transition:opacity .15s linear!important}}
.tm.tm-rm *{animation:none!important;transition:opacity .15s linear!important}
.tm.tm-rm.tm-swap{animation:tm-fade .15s linear}
@keyframes tm-fade{from{opacity:.4}}
.tm.tm-paused *{animation-play-state:paused!important}