/* tanuki.css — how Tanu moves (docs/decisions/0016).
 *
 * The character is drawn by js/components/tanuki.js as one SVG with every
 * part present; this file decides which parts show and how they travel.
 * Three layers, all transform/opacity on SVG groups so nothing lays out:
 *
 *   moods     .t-mood-* on the svg root — brows, eyes, ears, tail, mouth.
 *             Changing mood flips one class; the parts transition.
 *   idle life keyframe loops (breathe, blink, leaf sway) with a per-frame
 *             phase set by the script (--t-blink, --t-breath).
 *   one-shots .is-* on the root, added by the script for < 1s.
 *
 * Every colour is a --play-* token; the ink is the frame's currentColor.
 * Reduced motion removes every loop and transition and keeps the still
 * expressions. .tanu-paused (hidden tab) pauses the loops; .tanu-doze
 * (long idle) puts every idle mascot to sleep.
 */

/* ---- frame ------------------------------------------------------------- */
.p-tanu>svg.tanu{width:88%;height:88%;display:block;overflow:visible;
  --tx:0;--ty:0;            /* pointer, set by the script            */
  --mx:0;--my:0;--ps:1;     /* mood offset + pupil scale, set below  */
}
.p-tanu{--tx:0;--ty:0}
.tanu text{font-family:var(--play-display)}

/* Anything that moves pivots inside its own box. */
.tanu .t-body,.tanu .t-head,.tanu .t-ear,.tanu .t-eyes,.tanu .t-eye,.tanu .t-pupil,
.tanu .t-brow,.tanu .t-cheek,.tanu .t-tail,.tanu .t-leaf,.tanu .t-star,.tanu .t-heart,.tanu .t-drop,.tanu .t-zzz{
  transform-box:fill-box;transform-origin:center}
.tanu .t-body{transform-origin:50% 100%}
.tanu .t-head{transform-origin:50% 92%}
.tanu .t-ear{transform-origin:50% 100%}
.tanu .t-tail{transform-origin:15% 90%}
.tanu .t-leaf{transform-origin:0% 100%}

/* What transitions when the mood flips. */
.tanu .t-head,.tanu .t-ear,.tanu .t-eyes,.tanu .t-brow,.tanu .t-cheek,.tanu .t-tail,.tanu .t-leaf{
  transition:transform .28s cubic-bezier(.34,1.56,.64,1)}
.tanu .t-mouth,.tanu .t-drop,.tanu .t-heart,.tanu .t-zzz,.tanu .t-star{transition:opacity .16s ease}
.tanu .t-pupil{transition:transform .12s ease-out}

/* ---- pupils: pointer + mood, one rule --------------------------------- */
.tanu .t-pupil{transform:translate(calc((var(--tx) + var(--mx)) * 1.5px),calc((var(--ty) + var(--my)) * 1.3px)) scale(var(--ps))}

/* ---- idle life -------------------------------------------------------- */
@keyframes t-breathe{0%,100%{transform:scale(1,1)}50%{transform:scale(1.012,1.028)}}
@keyframes t-blink{0%,93.5%,100%{transform:scaleY(1)}96%{transform:scaleY(.06)}}
@keyframes t-sway{0%,100%{transform:rotate(-5deg)}50%{transform:rotate(6deg)}}
.tanu .t-body{animation:t-breathe 3.6s ease-in-out infinite;animation-delay:var(--t-breath,0s)}
.tanu .t-eye{animation:t-blink 4.2s linear infinite;animation-delay:var(--t-blink,0s)}
.tanu .t-leaf{animation:t-sway 5s ease-in-out infinite;animation-delay:var(--t-breath,0s)}

/* hover: ears perk */
.p-tanu:hover .t-ear-l{transform:rotate(-7deg) translateY(-.6px)}
.p-tanu:hover .t-ear-r{transform:rotate(7deg) translateY(-.6px)}

/* ---- parts hidden until a mood or play asks for them ------------------ */
.tanu .t-mouth,.tanu .t-drop,.tanu .t-heart,.tanu .t-zzz,.tanu .t-star{opacity:0}
.tanu .t-m-idle{opacity:1}

/* ---- moods ------------------------------------------------------------- */
.t-mood-happy .t-m-idle,.t-mood-sad .t-m-idle,.t-mood-think .t-m-idle,.t-mood-cheer .t-m-idle,
.t-mood-shock .t-m-idle,.t-mood-wink .t-m-idle,.t-mood-sleep .t-m-idle{opacity:0}

.t-mood-happy .t-m-happy,.t-mood-wink .t-m-happy{opacity:1}
.t-mood-happy .t-eyes,.t-mood-wink .t-eyes{transform:scaleY(.8)}
.t-mood-happy .t-brow,.t-mood-wink .t-brow{transform:translateY(-1.2px)}
.t-mood-happy .t-cheek,.t-mood-wink .t-cheek,.t-mood-cheer .t-cheek{transform:scale(1.3)}
.t-mood-happy .t-ear-l,.t-mood-cheer .t-ear-l{transform:rotate(-4deg)}
.t-mood-happy .t-ear-r,.t-mood-cheer .t-ear-r{transform:rotate(4deg)}

.t-mood-sad .t-m-sad{opacity:1}
.t-mood-sad .t-brow-l{transform:rotate(-16deg) translateY(1px)}
.t-mood-sad .t-brow-r{transform:rotate(16deg) translateY(1px)}
.t-mood-sad .t-ear-l{transform:rotate(-16deg) translateY(1px)}
.t-mood-sad .t-ear-r{transform:rotate(16deg) translateY(1px)}
.t-mood-sad .t-head{transform:translateY(1px) rotate(-3deg)}
.t-mood-sad .t-tail{transform:rotate(14deg)}
.t-mood-sad .t-drop{opacity:1}
.t-mood-sad{--my:.9}

.t-mood-think .t-m-think{opacity:1}
.t-mood-think .t-head{transform:rotate(-6deg)}
.t-mood-think .t-brow-l{transform:translateY(-1.6px)}
.t-mood-think .t-brow-r{transform:rotate(-12deg) translateY(.4px)}
.t-mood-think .t-ear-r{transform:rotate(9deg) translateY(-.6px)}
.t-mood-think{--mx:.8;--my:-.9}

.t-mood-cheer .t-m-cheer{opacity:1}
.t-mood-cheer .t-eyes{transform:scaleY(.55)}
.t-mood-cheer .t-brow{transform:translateY(-1.8px)}
.t-mood-cheer .t-star{opacity:1;animation:t-twinkle 1.1s ease-in-out infinite}
.t-mood-cheer .t-sparks>:nth-child(2) .t-star{animation-delay:.25s}
.t-mood-cheer .t-sparks>:nth-child(3) .t-star{animation-delay:.5s}
.t-mood-cheer .t-sparks>:nth-child(4) .t-star{animation-delay:.75s}
@keyframes t-twinkle{0%,100%{transform:scale(.6) rotate(0);opacity:.4}50%{transform:scale(1.15) rotate(45deg);opacity:1}}

.t-mood-shock .t-m-shock{opacity:1}
.t-mood-shock .t-eyes{transform:scale(1.22)}
.t-mood-shock .t-brow{transform:translateY(-2.6px)}
.t-mood-shock .t-ear-l{transform:rotate(3deg) translateY(-1.4px)}
.t-mood-shock .t-ear-r{transform:rotate(-3deg) translateY(-1.4px)}
.t-mood-shock .t-drop{opacity:1}
.t-mood-shock{--ps:.72}

.t-mood-wink .t-eye-r{animation:none;transform:scaleY(.08)}
.t-mood-wink .t-brow-r{transform:translateY(1.2px)}

.t-mood-sleep .t-m-sleep{opacity:1}
.t-mood-sleep .t-eye{animation:none;transform:scaleY(.06)}
.t-mood-sleep .t-head{transform:rotate(6deg) translateY(1.5px)}
.t-mood-sleep .t-leaf{animation:none;transform:rotate(16deg)}
.t-mood-sleep .t-ear-l{transform:rotate(-12deg) translateY(1px)}
.t-mood-sleep .t-ear-r{transform:rotate(12deg) translateY(1px)}
.t-mood-sleep .t-body{animation-duration:5.2s}
.t-mood-sleep .t-zzz{opacity:1;animation:t-zzz 2.4s ease-in-out infinite}
.t-mood-sleep .t-zzz-2{animation-delay:1.2s}
@keyframes t-zzz{0%{transform:translate(0,2px);opacity:0}30%,70%{opacity:1}100%{transform:translate(2px,-5px);opacity:0}}

/* A long idle: every idle mascot on the page dozes (the script toggles the
   body class). Mascots holding another mood keep it. */
.tanu-doze .t-mood-idle .t-m-idle{opacity:0}
.tanu-doze .t-mood-idle .t-m-sleep{opacity:1}
.tanu-doze .t-mood-idle .t-eye{animation:none;transform:scaleY(.06)}
.tanu-doze .t-mood-idle .t-head{transform:rotate(6deg) translateY(1.5px)}
.tanu-doze .t-mood-idle .t-leaf{animation:none;transform:rotate(16deg)}
.tanu-doze .t-mood-idle .t-ear-l{transform:rotate(-12deg) translateY(1px)}
.tanu-doze .t-mood-idle .t-ear-r{transform:rotate(12deg) translateY(1px)}
.tanu-doze .t-mood-idle .t-zzz{opacity:1;animation:t-zzz 2.4s ease-in-out infinite}
.tanu-doze .t-mood-idle .t-zzz-2{animation-delay:1.2s}

/* Tail wags whenever the news is good. */
@keyframes t-wag{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(10deg)}}
.t-mood-happy .t-tail,.t-mood-wink .t-tail{animation:t-wag .7s ease-in-out infinite}
.t-mood-cheer .t-tail{animation:t-wag .4s ease-in-out infinite}

/* ---- one-shots (script adds .is-* to the root for under a second) ----- */
@keyframes t-bounce{0%{transform:translateY(0)}30%{transform:translateY(-4px) scale(1.03,1.03)}55%{transform:translateY(0) scale(1.06,.93)}75%{transform:scale(.98,1.02)}100%{transform:none}}
@keyframes t-shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-2.4px) rotate(-3deg)}45%{transform:translateX(2.2px) rotate(3deg)}70%{transform:translateX(-1.4px) rotate(-1.5deg)}}
@keyframes t-jump{0%{transform:translateY(0)}18%{transform:scale(1.08,.9)}40%{transform:translateY(-6px) scale(.96,1.06)}70%{transform:translateY(0) scale(1.06,.94)}100%{transform:none}}
@keyframes t-nod{0%,100%{transform:rotate(0)}35%{transform:rotate(5deg) translateY(1px)}70%{transform:rotate(-3deg)}}
@keyframes t-spin{0%{transform:rotate(0) scale(1)}50%{transform:rotate(180deg) scale(.92)}100%{transform:rotate(360deg) scale(1)}}
@keyframes t-twitch{0%,100%{transform:rotate(0)}30%{transform:rotate(-14deg)}60%{transform:rotate(6deg)}}
@keyframes t-twitch-r{0%,100%{transform:rotate(0)}30%{transform:rotate(14deg)}60%{transform:rotate(-6deg)}}
@keyframes t-pop{0%{transform:scale(0) translateY(0);opacity:0}35%{transform:scale(1.25) translateY(-1px);opacity:1}70%{transform:scale(1) translateY(-3px);opacity:1}100%{transform:scale(.9) translateY(-7px);opacity:0}}
@keyframes t-wake{0%{transform:scale(1,1)}40%{transform:scale(.96,1.07) translateY(-2px)}70%{transform:scale(1.04,.96)}100%{transform:none}}
.is-bounce .t-body{animation:t-bounce .55s cubic-bezier(.34,1.56,.64,1) both}
.is-shake .t-head{animation:t-shake .42s ease-in-out both}
.is-jump .t-body{animation:t-jump .7s cubic-bezier(.34,1.56,.64,1) both}
.is-nod .t-head{animation:t-nod .55s ease-in-out both}
.is-spin.tanu{animation:t-spin .75s cubic-bezier(.45,0,.2,1) both}
.is-twitch .t-ear-l{animation:t-twitch .5s ease-in-out both}
.is-twitch-r .t-ear-r{animation:t-twitch-r .5s ease-in-out both}
.is-pop .t-heart{opacity:1;animation:t-pop .85s ease-out both}
.is-wake .t-body{animation:t-wake .6s cubic-bezier(.34,1.56,.64,1) both}

/* ---- pauses and opt-outs ---------------------------------------------- */
.tanu-paused .tanu *{animation-play-state:paused}
@media (prefers-reduced-motion: reduce){
  .tanu,.tanu *{animation:none !important;transition:none !important}
  .tanu .t-pupil{transform:none}
}